การสร้างปฏิทินกิจกรรม ด้วย fullcalendar อัพเดทปี 2020 ตอนที่ 1
เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdeeการใช้งาน fullcalendar fullcalendar
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ การใช้งาน fullcalendar fullcalendar
ดูแล้ว 14,251 ครั้ง
ไปที่
Copy
Fullcalendar 4.4.2 with simple Demo
เนื้อหานี้จะเป็นแนวทางการใช้งาน fullcalendar และเป็นการอัพเดท
เนื้อหาเพร้อมกับ เวอร์ชั่นล่าสุด ณ ปัจจุบันของ fullcalendar
โดยตอนนี้เราจะเริ่มต้นอย่างง่าย กับการแสดง fullcalendar
ดาวน์โหลด Fullcalendar 4.4.2
ให้ทำการดาวน์โหลดไฟล์นี้ Fullcalendar 4.4.2
ทำการแตกไฟล์ เราจะได้โฟลเดอร์ fullcalendar-4.4.2 และด้านในมีส่วนของ ของโค้ดทั้งหมด
สร้างไฟล์ตัวอย่างเริ่มต้น
<?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> <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: [ 'dayGrid' ] }); // แสดงปฏิทิน calendar.render(); }); </script> </body> </html>
ดาวน์โหลดไฟล์ตัวอย่างเริ่มต้น Fullcalendar 4.4.2
Fullcalendar 4.4.2 with simple Demoเราสามารถใช้งานร่วมกับ bootstrap
โดยเพิ่ม css style ของ bootstrap เข้าไป หรือถ้าเว็บเรามีการใช้งาน bootstrap อยู่แล้งก็ไม่ได้เพิ่มอะไร<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
อ่านต่อที่บทความ
-
04 Jun2020การตั้งค่าปฏิทินกิจกรรม fullcalendar อัพเดทปี 2020 ตอนที่ 2 อ่าน 10,439
เนื้อหานี้เรามาดูการตั้งค่า ที่มักใช้งานบ่อย โดยเฉพาะภาษาไทย รวมถึง plugi
เนื้อหาที่เกี่ยวข้อง
-
กำลังอ่านเนื้อหานี้อยู่03 Jun2020การสร้างปฏิทินกิจกรรม ด้วย fullcalendar อัพเดทปี 2020 ตอนที่ 1 อ่าน 14,251
เนื้อหานี้จะเป็นแนวทางการใช้งาน fullcalendar และเป็นการอัพเดท เนื้อหาเพร้
-
04 Jun2020การตั้งค่าปฏิทินกิจกรรม fullcalendar อัพเดทปี 2020 ตอนที่ 2 อ่าน 10,439
เนื้อหานี้เรามาดูการตั้งค่า ที่มักใช้งานบ่อย โดยเฉพาะภาษาไทย รวมถึง plugi
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ