เนื้อหานี้เรามาดูการตั้งค่า ที่มักใช้งานบ่อย โดยเฉพาะภาษาไทย
รวมถึง plugin การแสดงต่างๆ ทบทวนตอนที่แล้วที่
การสร้างปฏิทินกิจกรรม ด้วย fullcalendar อัพเดทปี 2020 ตอนที่ 1 http://niik.in/973
https://www.ninenik.com/content.php?arti_id=973 via @ninenik
การตั้งค่าปฏิทินกิจกรรม fullcalendar
ใน fullcalendar เวอร์ชั่นปัจจุบัน มีการแยกส่วนต่างๆ ออกเป็น package หรือส่วนย่อย ทำให้เวลา
เราต้องการใช้งาน จำเป็นจะต้องเรียกใช้ไฟล์นั้นๆ รวมถึง css ไฟล์ด้วย โค้ดด้านล่าง เป็นส่วนปรับ
เพิ่มเติมจากตอนที่ 1 เราจะมีการใช้ plugin หลัก รวมถึงการกำหนดการแสดงเป็นภาษาไทย ด้วย
ไฟลด์ โค้ดตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <?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> 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' }, 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 style และ javascript
1 2 3 4 5 6 7 8 9 | <!-- ส่วนที่เพิ่มเข้ามาใหม่--> <link href='<?=$fullcalendar_path?>/timegrid/main.css' rel='stylesheet' /> <link href='<?=$fullcalendar_path?>/list/main.css' rel='stylesheet' /><!-- ส่วนที่เพิ่มเข้ามาใหม่--> <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> |
ทั้งสองส่วน เป็นส่วนที่ใช้สำหรับจัดการ plugin เพิ่มเติม ที่เราเรียกใช้งาน
ต่อด้วยรูปแแบบการตั้งค่า ต่างๆ ไม่ว่าจะเป็น การกำหนดภาษา การกำหนด plugin ที่จะใช้งาน
1 | plugins: [ 'interaction','dayGrid', 'timeGrid', 'list' ], // plugin ที่เราจะใช้งาน |
เนื่องจากตอนนี้ เรายังไม่มีข้อมูลของ event หรือกิจกรรม ก็จะอาจยังไม่เห็นความแตกต่าง
การกำหนด defaultView เป็นการบอกว่า เราต้องการแสดงรูปแบบเริ่มต้นของปฏิทินเป็นแบบไหน
สังเกตที่ชื่อ ของค่าที่กำหนด 'dayGridMonth' หรือกำหนดเป็นค่าอื่นๆ เช่น dayGridMonth,timeGridWeek,
timeGridDay และ listMonth ตามต้องการ
demo ด้านล่าง จะแสดงตัวอย่าง แบบที่ยังไม่ได้กำหนดค่าใดๆ กับตัวอย่างที่กำหนดค่าตามโค้ดด้านบนแล้ว
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง