เนื้อหานี้จะเป็นแนวทางการใช้งาน fullcalendar และเป็นการอัพเดท
เนื้อหาเพร้อมกับ เวอร์ชั่นล่าสุด ณ ปัจจุบันของ fullcalendar
โดยตอนนี้เราจะเริ่มต้นอย่างง่าย กับการแสดง fullcalendar
ดาวน์โหลด Fullcalendar 4.4.2
ให้ทำการดาวน์โหลดไฟล์นี้ Fullcalendar 4.4.2
ทำการแตกไฟล์ เราจะได้โฟลเดอร์ fullcalendar-4.4.2 และด้านในมีส่วนของ ของโค้ดทั้งหมด
สร้างไฟล์ตัวอย่างเริ่มต้น
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 | <?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' /> <script src='<?=$fullcalendar_path?>/core/main.js'></script> <script src='<?=$fullcalendar_path?>/daygrid/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: [ 'dayGrid' ] }); // แสดงปฏิทิน calendar.render(); }); </script> </body></html> |
ดาวน์โหลดไฟล์ตัวอย่างเริ่มต้น Fullcalendar 4.4.2
Fullcalendar 4.4.2 with simple Demoเราสามารถใช้งานร่วมกับ bootstrap
โดยเพิ่ม css style ของ bootstrap เข้าไป หรือถ้าเว็บเรามีการใช้งาน bootstrap อยู่แล้งก็ไม่ได้เพิ่มอะไร1 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> |
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง