เนื้อหานี้เรามาดูการตั้งค่า ที่มักใช้งานบ่อย โดยเฉพาะภาษาไทย
รวมถึง 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 หลัก รวมถึงการกำหนดการแสดงเป็นภาษาไทย ด้วย
ไฟลด์ โค้ดตัวอย่าง
<?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'
},
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
<!-- ส่วนที่เพิ่มเข้ามาใหม่-->
<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 ที่จะใช้งาน
plugins: [ 'interaction','dayGrid', 'timeGrid', 'list' ], // plugin ที่เราจะใช้งาน
เนื่องจากตอนนี้ เรายังไม่มีข้อมูลของ event หรือกิจกรรม ก็จะอาจยังไม่เห็นความแตกต่าง
การกำหนด defaultView เป็นการบอกว่า เราต้องการแสดงรูปแบบเริ่มต้นของปฏิทินเป็นแบบไหน
สังเกตที่ชื่อ ของค่าที่กำหนด 'dayGridMonth' หรือกำหนดเป็นค่าอื่นๆ เช่น dayGridMonth,timeGridWeek,
timeGridDay และ listMonth ตามต้องการ
demo ด้านล่าง จะแสดงตัวอย่าง แบบที่ยังไม่ได้กำหนดค่าใดๆ กับตัวอย่างที่กำหนดค่าตามโค้ดด้านบนแล้ว
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง