เนื้อหานี้จะเป็นแนวทางการใช้งาน 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">
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง