การแสดงข้อมูลเพิ่มเติม ใน fullcalendar อัพเดทปี 2020 ตอนที่ 5
เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdeefullcalendar modal แสดง modal
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ fullcalendar modal แสดง modal
ไปที่
Copy
หรือใช้รูปแบบนี้แทนได้
ดูตัวอย่างใน DEMO 2
จากเนื้อหาในตอนที่ 4 เราได้ให้แนวทางการสร้าง และ
บันทึกข้อมูลกิจกรรมลงในฐานข้อมูล และได้พูดถึงการ
กำหนดฟิลด์พิเศษเพิ่มเติม ในกรณืที่เราต้องการให้
กิจกรรมนั้น มีรายละเอียดเพิ่มเติม หรือมีฟิลด์ข้อมูลนอกเหนือ
จากฟิลด์ข้อมูลหลักแล้ว ทบทวนตอนที่แล้วได้ที่
บักทึก และสร้าง event ใน fullcalendar อัพเดทปี 2020 ตอนที่ 4 http://niik.in/977
https://www.ninenik.com/content.php?arti_id=977 via @ninenik
เนื้อหาตอนต่อไปนี้ เราจะให้แนวทาง การใช้งานข้อมูลเพิ่มเติมนั้น โดยจะประยุกต์ใช้งานกับ
modal ของ bootstrap เพื่อแสดงรายละเอียดของกิจกรรมเพิ่มเติม เมื่อคลิกที่ กิจกรรมนั้นๆ
ในปฏิทินกิจกรรม ทำตามแนวทางต่อไปนี้ตามลำดับ
การใช้งานฟิลด์เพิ่มเติมในไฟล์ json
จะขอยกโครงสร้าง ไฟล์ events.php จากตอนที่แล้วมาประกอบการอธิบาย
ไฟล์ events.php
<?php header("Content-type:application/json; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); // โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642 require_once("dbconnect.php"); $json_data = array(); $sql =" SELECT * FROM tbl_event WHERE event_startdate>='".$_GET['start']."' AND event_enddate<='".$_GET['end']."' "; $result = $mysqli->query($sql); if(isset($result) && $result->num_rows>0){ while($row = $result->fetch_assoc()){ $_start_date = $row['event_startdate']; $_end_date = false; $_start_time = false; $_end_time = false; $_repeat_day = false; $_all_day = ($row['event_allday']!=0)?true:false; if($row['event_starttime']!="00:00:00"){ $_start_date = $row['event_startdate']."T".$row['event_starttime']; if($row['event_endtime']!="00:00:00" && ($row['event_starttime']==$row['event_enddate'] || $row['event_enddate']=="0000-00-00") ){ $_end_date = $row['event_startdate']."T".$row['event_endtime']; } } if($row['event_enddate']!="0000-00-00"){ $_end_date = $row['event_enddate']; if($row['event_endtime']!="00:00:00"){ $_end_date = $row['event_enddate']."T".$row['event_endtime']; }else{ $_end_date = date("Y-m-d",strtotime($row['event_enddate']." +1 day")); } } if($row['event_enddate']!="0000-00-00" && $row['event_enddate']!=$row['event_startdate'] && $row['event_starttime']!="00:00:00" && $row['event_endtime']!="00:00:00" ){ $_start_date = $row['event_startdate']; $_end_date = $row['event_enddate']; $_start_time = $row['event_starttime']; $_end_time = $row['event_endtime']; $_all_day = false; } // ทำการเปลี่ยน หรือกำหนดการใช้งาน url หรือลิ้งค์ เป็นการเรียกใช้งาน javascript ฟังก์ชั่น $row['event_url'] = "javascript:viewdetail('{$row['event_id']}');"; // ส่งค่า id ไปในฟังก์ชั่น $arr_eventData = array( "id" => $row['event_id'], "groupId" => str_replace("-","",$row['event_startdate']), "allDay" => $_all_day, "start" => $_start_date, "end" => $_end_date, "startTime" => $_start_time, "endTime" => $_end_time, "title" => $row['event_title'], "url" => $row['event_url'], "textColor" => $row['event_color'], "backgroundColor" => $row['event_bgcolor'], "borderColor" => "transparent", "detail" => $row['event_detail'],// กำหนดฟิลด์เพิ่มเติมที่จะใช้งานข้อมูล ); if($row['event_repeatday']!=""){ $arr_eventData['daysOfWeek'] = explode(",",$row['event_repeatday']); } if($row['event_enddate']!="0000-00-00" && $row['event_enddate']!=$row['event_startdate'] && $row['event_starttime']!="00:00:00" && $row['event_endtime']!="00:00:00" ){ $arr_eventData['startRecur'] = $_start_date; $_end_date = date("Y-m-d",strtotime($row['event_enddate']." +1 day")); $arr_eventData['endRecur'] = $_end_date; } if(!$_all_day){unset($arr_eventData['allDay']);} if(!$_end_date){unset($arr_eventData['end']);} if(!$_start_time){unset($arr_eventData['startTime']);} if(!$_end_time){unset($arr_eventData['endTime']);} $json_data[] = $arr_eventData; } } // แปลง array เป็นรูปแบบ json string if(isset($json_data)){ $json= json_encode($json_data); if(isset($_GET['callback']) && $_GET['callback']!=""){ echo $_GET['callback']."(".$json.");"; }else{ echo $json; } } ?>
ดูบรรทัดที่เราได้ทำการเพิ่ม ตามที่ได้ highlight ไว้ 45 46 60
หากเป็นแนวทางอย่างง่าย ในการแสดงข้อมูลเพิ่มเติม เราก็แค่อาจจะใส่ลิ้งค์ หรือกำหนด url เป็นไฟล์ข้อมูลใหม่ โดยส่ง
event_id แล้วไปทำการคิวรี่แสดงข้อมูลก็ได้ เช่น เรากำหนด url เป็นดังนี้
$row['event_url'] = "http://www.mywebsite.com/viewevent.php?id=".$row['event_id'];
แล้วใช้ไฟล์หน้า viewevent.php คิวรี่ดึงข้อมูลจาก event ของ id นั้นมาแสดง
แต่ในที่นี้ เราจะทำการแสดงข้อมูลในหน้าเดียวกับปฏิทิน จึงใช้วิธีเรียกใช้งาน คำสั่ง javascript ชื่อฟังก์ชั่นว่า viewdetail()
$row['event_url'] = "javascript:viewdetail('{$row['event_id']}');"; // ส่งค่า id ไปในฟังก์ชั่น
ซึ่งเราจะต้องไปสร้างฟังก์ชั่นนี้ในไฟล์ที่เรียกใช้งาน fullcalendar ในฟังก์ชั่น เราทำการส่งค่า event_id เข้าไป เพื่อใช้สำหรับ
ดึงข้อมูลกิจกรรมมาแสดงอีกที
นอกจากกำหนดในส่วนของ url แล้ว เราก็มีการกำหนด property เพิ่มเติม ซึ่งจะเพิ่มกี่ property ก็ได้ ในที่นี้เราเพิ่มมาแค่
อันเดียวเป็นแนวทาง ชื่อว่า detail โดยใช้ข้อมูลจากฐานข้อมูลที่เราเพิ่มในตอนต้นชื่อฟิลด์ว่า event_detail ข้อมูลส่วนนี้ จะเป็น
รายละเอียดเพิ่มเติมที่แราจะแสดงใน modal
การแสดงข้อมูลเพิ่มเติมของ fullcalendar ใน modal
ก่อนไปดูการเพิ่มโค้ดเพิ่มเติม เพื่อแสดงข้อมูล modal จะขอยกโค้ดไฟล์ ตัวอย่าง ในบทความก่อนหน้าก่อนปรับแต่ง
มาอธิบายเพิ่มเติมดังนี้
ไฟล์ demo.php
<?php $fullcalendar_path = "fullcalendar-4.4.2/packages/"; ?> <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <link href='<?=$fullcalendar_path?>/core/main.css' rel='stylesheet' /> <link href='<?=$fullcalendar_path?>/daygrid/main.css' rel='stylesheet' /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> <!-- ส่วนที่เพิ่มเข้ามาใหม่--> <link href='<?=$fullcalendar_path?>/timegrid/main.css' rel='stylesheet' /> <link href='<?=$fullcalendar_path?>/list/main.css' rel='stylesheet' /> <script src='<?=$fullcalendar_path?>/core/main.js'></script> <script src='<?=$fullcalendar_path?>/daygrid/main.js'></script> <!-- ส่วนที่เพิ่มเข้ามาใหม่--> <script src='<?=$fullcalendar_path?>/core/locales/th.js'></script> <script src='<?=$fullcalendar_path?>/timegrid/main.js'></script> <script src='<?=$fullcalendar_path?>/interaction/main.js'></script> <script src='<?=$fullcalendar_path?>/list/main.js'></script> <style type="text/css"> #calendar{ width: 800px;margin: auto; } </style> </head> <body> <div id='calendar'></div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script type="text/javascript"> $(function(){ // กำหนด element ที่จะแสดงปฏิทิน var calendarEl = $("#calendar")[0]; // กำหนดการตั้งค่า var calendar = new FullCalendar.Calendar(calendarEl, { plugins: [ 'interaction','dayGrid', 'timeGrid', 'list' ], // plugin ที่เราจะใช้งาน defaultView: 'dayGridMonth', // ค้าเริ่มร้นเมื่อโหลดแสดงปฏิทิน header: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' }, events: { // เรียกใช้งาน event จาก json ไฟล์ ที่สร้างด้วย php url: 'events.php?gData=1', error: function() { } }, eventLimit: true, // allow "more" link when too many events locale: 'th', // กำหนดให้แสดงภาษาไทย firstDay: 0, // กำหนดวันแรกในปฏิทินเป็นวันอาทิตย์ 0 เป็นวันจันทร์ 1 showNonCurrentDates: false, // แสดงที่ของเดือนอื่นหรือไม่ eventTimeFormat: { // รูปแบบการแสดงของเวลา เช่น '14:30' hour: '2-digit', minute: '2-digit', meridiem: false } }); // แสดงปฏิทิน calendar.render(); }); </script> </body> </html>
สิ่งที่เราจะจัดการก็คือ เรียกใช้ css และ js ไฟล์ของ bootstrap เพราะเราจะมีการใช้งาน modal เป็น component หนึ่งของ
boostrap และจำเป็นต้องใช้งาน bootstrap js ด้วย
ต่อด้วยย้ายการประกาศตัวแปรที่เป้น instant ของ fullcalendar ที่ชื่อ calendar ให้มาอยู่ด้านนอก ขอบเขตของ jquery เพื่อให้
สามารถเรียกใช้งานหน้าเว็บได้ทุกส่วน จะอธิบายต่อด้านล่าง
ต่อด้วยกำหนด modal component หรือ โครงสร้าง html ของ modal ที่เราจะใช้งาน หลักๆ จะเน้นไปที่กำหนดกำหนด id ให้กับ
ส่วนที่เราจะแสดงข้อมูล ก็จะมี id ของ modal , id ของหัวข้อ และ id ของรายละเอียด เพิ่มเติมได้ตามต้องการ
และส่วนสุดท้ายก็คือ ฟังก์ชั่น javascript ที่ชื่อ viewdetail() ฟังก์ชั่นนี้จะรับค่า id มา เราจะเอา id นี้ไปดึงข้อมูลจาก calendar
ผ่าน api แล้วนำมาแสดงใน modal
ดูโค้ดที่มีการปรับใช้งานแล้วได้ดังต่อไปนี้
<?php $fullcalendar_path = "fullcalendar-4.4.2/packages/"; ?> <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <link href='<?=$fullcalendar_path?>/core/main.css' rel='stylesheet' /> <link href='<?=$fullcalendar_path?>/daygrid/main.css' rel='stylesheet' /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> <!-- ส่วนที่เพิ่มเข้ามาใหม่--> <link href='<?=$fullcalendar_path?>/timegrid/main.css' rel='stylesheet' /> <link href='<?=$fullcalendar_path?>/list/main.css' rel='stylesheet' /> <script src='<?=$fullcalendar_path?>/core/main.js'></script> <script src='<?=$fullcalendar_path?>/daygrid/main.js'></script> <!-- ส่วนที่เพิ่มเข้ามาใหม่--> <script src='<?=$fullcalendar_path?>/core/locales/th.js'></script> <script src='<?=$fullcalendar_path?>/timegrid/main.js'></script> <script src='<?=$fullcalendar_path?>/interaction/main.js'></script> <script src='<?=$fullcalendar_path?>/list/main.js'></script> <style type="text/css"> #calendar{ width: 800px;margin: auto; } </style> </head> <body> <div id='calendar'></div> <!-- Modal --> <div class="modal fade" id="calendarmodal" tabindex="-1" role="dialog" > <!--กำหนด id ให้กับ modal--> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="calendarmodal-title">Modal title</h5> <!--กำหนด id ให้ส่วนหัวข้อ--> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body" id="calendarmodal-detail"> ก<!--ำหนด id ให้ส่วนรายละเอียด--> Modal detail </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script> <script type="text/javascript"> var calendar; // สร้างตัวแปรไว้ด้านนอก เพื่อให้สามารถอ้างอิงแบบ global ได้ $(function(){ // กำหนด element ที่จะแสดงปฏิทิน var calendarEl = $("#calendar")[0]; // กำหนดการตั้งค่า calendar = new FullCalendar.Calendar(calendarEl, { plugins: [ 'interaction','dayGrid', 'timeGrid', 'list' ], // plugin ที่เราจะใช้งาน defaultView: 'dayGridMonth', // ค้าเริ่มร้นเมื่อโหลดแสดงปฏิทิน header: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' }, events: { // เรียกใช้งาน event จาก json ไฟล์ ที่สร้างด้วย php url: 'events.php?gData=1', error: function() { } }, eventLimit: true, // allow "more" link when too many events locale: 'th', // กำหนดให้แสดงภาษาไทย firstDay: 0, // กำหนดวันแรกในปฏิทินเป็นวันอาทิตย์ 0 เป็นวันจันทร์ 1 showNonCurrentDates: false, // แสดงที่ของเดือนอื่นหรือไม่ eventTimeFormat: { // รูปแบบการแสดงของเวลา เช่น '14:30' hour: '2-digit', minute: '2-digit', meridiem: false } }); // แสดงปฏิทิน calendar.render(); }); </script> <script type="text/javascript"> function viewdetail(id){ // ก่อนที่ modal จะแสดง $('#calendarmodal').on('show.bs.modal', function (e) { var event = calendar.getEventById(id) // ดึงข้อมูล ผ่าน api $("#calendarmodal-title").html(event.title); $("#calendarmodal-detail").html(event.extendedProps.detail);// ข้อมูลเพิ่มเติมจะเรียกผ่าน extendedProps }); $("#calendarmodal").modal();// แสดง modal } </script> </body> </html>
บรรทัดที่ 11 และ 59 เราเรียกใช้งาน css และ js ของ bootstrap
บรรทัดที่ 61 เราประกาศตัวแปร calendar ไว้นอก jquery จากเดิมที่ประกาศ และกำหนดค่าทันทีด้านในขอบเขตของ jquery
ก็เปลี่ยนมาประกาศตัวแปรด้านนอกก่อน เพื่อให้เป็น global แล้วค่อยกำหนดค่าอีกทีด้านใน โดยมีมีคำว่า var ในบรรทัด 67
ตัวแปร calendar จะเป็นเหมือน instnant object หรือตัวแทนของ fullcalendar ที่เราจะอ้างอิงการใช้งาน
บรรทัดที่ 36 - 53 เป็นส่วนของการกำหนด modal component ในส่วนนี้ เรากได้กำหนดค่า id ต่าง เพื่อใช้อ้างอิงการแสดงค่า
ในบรรทัดที่ 36 40 และ 45 ข้อมูล Modal Title และ Modal detail จะถูกแทนที่ด้วยข้อมูลใหม่ เมื่อเราทำการโหลด modal
และสุดท้าย บรรทัดที่ 98 จนถึง 106 เราสร้างฟักง์ชั่นไว้ด้านนอกของ jquery เพื่อเรียกใช้งานจากการกดลิ้งค์ในปฏิทิน โดยส่งค่า
id ของ event เข้ามา โดยก่อนที่แสดง modal เราได้ทำการเรียก fullcalendar api ผ่านตัวแปร instant ที่ชื่อ calendar ตรงนี้จะเห็น
ว่าเพราะ ตัวแปร calendar เป้นแบบ global เราจึงสามารถเรียกใช้งานในนี้ได้ ตามเหตุผลที่พยายามอธิบายไปแล้วในตอนต้น
ตัว fullcalendar api มีคำสั่งที่ชื่อว่า getEventById ที่สามารถเรียกข้อมูล event object มาใช้งานได้ ซึ่งในที่นี้เราจะใช้แค่สองค่า
คือค่า title ซึ่งป็น property หลักของ event object อยู่แล้ว และอีกอันคือ detail
สำหรับ detail นั้นเป็น ค่า property เพิ่มเติมที่เรากำหนดเอง ดังนั้น เวลาอ้างอิงการเรียกใช้ จึงใช้เป็น event.extendedProps.detail
แทนที่จะเป้น event.detail แนวทางนี้ใช้กับ property เพิ่มเติมอื่นๆ ถ้ามี
เมื่อเราได้ค่า event.title และ event.extendedProps.detail ก็นำค่าทั้งสองนี้ไปแสดงใน modal ตามตำแหน่ง id ที่เรากำหนดไว้
และ เมื่อ modal โชว์ขึ้นมา ค่าต่างๆ ก็จะแสดงใน modal ตามที่เรากำหนดนั่นเอง
สามารถดู demo แนวทางผลลัพธ์ได้จากด้านล่าง โดยคลิกกิจกรรม ที่ต้องการแสดงข้อมูลเพิ่มเติม
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-10-2020
การซ่อนเวลาในปฏิทิน Fullcalendar
เราสามารถซ่อนเวลาในปฏิทิน ที่มีรูปแบบ dayGridMonth โดยกำหนด
displayEventTime: false,
และถ้าต้องการกำหนดว่า ให้ซ่อนเวลา เฉพราะปฏิทินในรูปแบบ dayGridMonth เท่านั้น
ก็สามารถใช้ event ดักการทำงาน และกำหนดค่าได้
// แสดงปฏิทิน calendar.render(); // ซ่อนเวลาตามเงื่อนไขปฏิทินที่แสดง calendar.on('viewSkeletonRender', function(info) { if(info.view.type == 'dayGridMonth'){ calendar.setOption('displayEventTime', false); }else{ calendar.setOption('displayEventTime', true); } });
หรือใช้รูปแบบนี้แทนได้
calendar.on('viewSkeletonRender', function(info) { var timeStatus = true; if(info.view.type == 'dayGridMonth'){ timeStatus = false; } setTimeout(function(){ calendar.setOption('displayEventTime', timeStatus); },1); });
ดูตัวอย่างใน DEMO 2
เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 05-11-2020
โหลดเนื้อหากิจกรรม จากภายนอก
กรณีเราต้องการเปิดรายละเอียดเพิ่มเติมผ่าน modal และไม่ต้องการแทรกรายละเอียด
ทั้งหมดไว้ใน event ต้องการแค่ส่ง id หรือข้อมูลบางตัว แล้วเปิดไฟล์ ใหม่ ใน modal
สามารถใช้แนวทางนี้ได้
ส่วนของ modal body กำหนด iframe แทรกไปในลักษณะนี้
<div class="modal-body" id="calendarmodal-detail"> ก<!--ำหนด id ให้ส่วนรายละเอียด--> <iframe name="event-box" frameborder="0" style="width:100%;border: none;height: 300px;" src=""></iframe> </div>
ส่วนของไฟล์ events.php กำหนด url ให้เรียกใช้งาน javascript ฟังก์ชั่น ส่งค่า paramter ตามต้องการ
ในตัวอย่างส่งค่าแค่ id
$row['event_url'] = "javascript:viewdetail('{$row['event_id']}');"; // ส่งค่า id ไปในฟังก์ชั่น
ถ้าส่งหลายค่า เช่นอาจจะส่งวันที่มาด้วยก็กำหนดเป็นประมาณนี้
$row['event_url'] = "javascript:viewdetail('{$row['event_id']}','{$row['event_startdate']}');";
ต่อไปส่วนของแสดงรายละเอียด สมมติไฟล์รายละเอียดเพิ่มเติมเราชื่อ showdetail.php และรับค่า เพื่อดึงข้อมูล
จากตัวแปร GET สมมติส่งมาแค่ id ก็จะเป็น showdetail.php?event_id=xxx
เราจะได้วิธีการกำหนดในฟังก์ชั่น viewdetail(id) หรือ viewdetail(id,date) ประมาณนี้
<script type="text/javascript"> function viewdetail(id,date){ // ก่อนที่ modal จะแสดง $('#calendarmodal').on('show.bs.modal', function (e) { $("iframe[name='event-box']").attr("src","show.php?id="+id+"&date="+date); }); }); $("#calendarmodal").modal();// แสดง modal } </script>
เพิ่มเติมเนื้อหา ครั้งที่ 3 วันที่ 05-11-2020
กรณีดึงข้อมูลจากภายนอกด้วย ajax สามารถใช้รูปแบบนี้ได้
ส่วนของ modal body
<div class="modal-body" id="calendarmodal-detail"> ก<!--ำหนด id ให้ส่วนรายละเอียด--> </div>
ส่วนของฟังก์ชั่น
<script type="text/javascript"> function viewdetail(id,date){ // ก่อนที่ modal จะแสดง $('#calendarmodal').on('show.bs.modal', function (e) { $.get("show.php",{id:id,date:date},function(res){ $("#calendarmodal-detail").html(res); }); }); }); $("#calendarmodal").modal();// แสดง modal } </script>
หรือแบบนี้ก็ได้
<script type="text/javascript"> function viewdetail(id,date){ // ก่อนที่ modal จะแสดง $('#calendarmodal').on('show.bs.modal', function (e) { $("#calendarmodal-detail").load("show.php?id="+id+"&date=+"+date); }); }); $("#calendarmodal").modal();// แสดง modal } </script>
เพิ่มเติมเนื้อหา ครั้งที่ 4 วันที่ 10-03-2021
กรณีต้องการกำหนดให้แสดงเวลาเริ่มต้นและเวลาสิ้นสุดในหน้าแสดงแบบเดือน
ให้กำหนดสองค่าเป็นดังนี้ แต่อย่าลืมว่า ข้อมูลในฐานข้อมูล จะต้องมีการกำหนดเวลาสิ้นสุดด้วย
ข้อมูลจึงจะแสดง
displayEventTime: true, displayEventEnd: true,
ดูผลลัพธ์ที่ DEMO 3 ด้านล่าง
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาที่เกี่ยวข้อง
-
03 Jun2020การสร้างปฏิทินกิจกรรม ด้วย fullcalendar อัพเดทปี 2020 ตอนที่ 1 อ่าน 13,512
เนื้อหานี้จะเป็นแนวทางการใช้งาน fullcalendar และเป็นการอัพเดท เนื้อหาเพร้
-
04 Jun2020การตั้งค่าปฏิทินกิจกรรม fullcalendar อัพเดทปี 2020 ตอนที่ 2 อ่าน 9,717
เนื้อหานี้เรามาดูการตั้งค่า ที่มักใช้งานบ่อย โดยเฉพาะภาษาไทย รวมถึง plugi
-
05 Jun2020รูปแบบกิจกรรม event ใน fullcalendar อัพเดทปี 2020 ตอนที่ 3 อ่าน 7,445
เนื้อหานี้เราจะมาดูรูปแบบ event หรือกิจกรรมรูปแบบต่างๆ ที่ใช้งานใน fullca
-
06 Jun2020บักทึก และสร้าง event ใน fullcalendar อัพเดทปี 2020 ตอนที่ 4 อ่าน 7,257
เมื่อเราได้รู้จักการเรียกใช้งาน การตั้งค่า และรูปแบบกิจกรรม ของ fullcalen
-
กำลังอ่านเนื้อหานี้อยู่08 Jun2020การแสดงข้อมูลเพิ่มเติม ใน fullcalendar อัพเดทปี 2020 ตอนที่ 5 อ่าน 9,190
จากเนื้อหาในตอนที่ 4 เราได้ให้แนวทางการสร้าง และ บันทึกข้อมูลกิจกรรมลงในฐ
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()