เนื้อหานี้เราจะมาดูรูปแบบ event หรือกิจกรรมรูปแบบต่างๆ
ที่ใช้งานใน fullcalendar โดยในสองตอนที่แล้ว เราเริ่มต้นสร้าง
fullcalendar และยังไม่มีกิจกรรมใดๆ มาแสดง ทบทวนที่
การตั้งค่าปฏิทินกิจกรรม fullcalendar อัพเดทปี 2020 ตอนที่ 2 http://niik.in/975
รูปแบบกิจกรรมใน fullcalendar
เราจะมาลิสรายการรูปแบบกิจกรรม ที่สามารถกำหนดให้แสดงใน fullcalendar ดังรายการต่อไปนี้
1. กิจกรรมที่กำหนดวันที่เริ่มต้นอย่างเดียว
2. กิจกรรมที่กำหนดวันที่เริ่มต้น และวันที่สิ้นสุด
3. กิจกรรมที่กำหนดวันที่เริ่มต้น และเวลาเริ่มต้น
4. กิจกรรมที่กำหนดวันที่เริ่มต้น เวลาเริ่มต้น และเวลาสิ้นสุด
5. กิจกรรมที่กำหนดวันที่เริ่มต้น เวลาเริ่มต้น เวลาสิ้นสุด
6. กิจกรรมที่กำหนดวันที่เริ่มต้น เวลาเริ่มต้น วันที่สิ้นสุด และเวลาสิ้นสุด
7. กิจกรรมที่ทำซ้ำ ในวันที่กำหนดในแต่ละสัปดาห์ เช่น ทุกๆ วันจันทร์ หรือทุกๆ วันจันทร์ พุธ และศุกร์
ข้างต้นคือรูปแบบ ที่เราสามารถกำหนดใช้งานใน fullcalendar โดยหลักๆ ข้อมูลสำคัญที่เราจะต้องกำหนด
ก็คือวันที่เริ่มต้น จะต้องมีเสมอ กิจกรรมที่ไม่กำหนดเวลาใดๆ จะเป็นกิจกรรมที่แสดงตลอดทั้งวัน กิจกรรมที่กำหนดเฉพาะ
เวลาเริ่มต้น จะเป็นกิจกรรมที่เริ่มต้นในเวลานั้นที่กำหนด และสิ้นสุดในเที่ยงคืน เช่น กำหนดเวลาเริ่มต้นเป็น 12:00 ช่วงเวลา
จะเป็น 12:00 - 00:00 ดังนั้น หากมีการใช้งานเวลา เป็นไปได้ควรกำหนดเวลาเริ่มต้น และเวลาสิ้นสุด ตัวอย่าง เช่นรูปแบบที่ 4
กำหนดวันที่เป็น 2020-06-01 เวลาเริ่มต้นเป็น 12:00 และเวลาสิ้นสุดเป็น 15:00 ความหมายคือ เป็นกิจกกรมของวันที่ 01-06-2020
เวลา 12:00 - 15:00 น. นั่นเอง
การกำหนดกิจกรรมแบบทำซ้ำ เป็นตัวช่วยให้เราสร้างรูปแบบกิจกรรมซ้ำๆ โดยไม่ต้องเพิ่มข้อมูลใหม่เข้าไป สมมติเช่น กิจกกรม
วันที 1 - 6 ช่วงเวลา 12:00 - 15:00 เราก็สามารถกำหนด แค่ครั้งเดียว มีวันเริ่มต้น วันสิ้นสุด เวลาเริ่มต้น และเวลาสิ้นสุด ส่วนนี้
จะอธิบายเพิ่มเติมในลำดับต่อไป เช่นเดียวกันกับรูปแบบ การทำซ้ำเฉพาะวันที่ต้องการ เช่น ทำซ้ำเฉพาะวันจันทร์ ในช่วงวันที่ที่กำหนด
ที่กล่าวไปเป็นการอธิบายให้เห็นภาพคร่าวๆ เท่านั้น ในส่วนรายละเอียด และโค้ดจะอธิบายเพิ่มติมในลำดับต่อไป
ชนิดข้อมูลที่ใช้ใน fullcalendar
สำหรับข้อมูลที่ใช้งานใน fullcalendar จะเป็นรูปแบบ JSON String data หรือเรียกสั้นๆ ว่า json เรามาดูรูปแบบข้อมูล
json ของแต่ละรูปแบบกิจกรรม เป็นแนวทางตัวอย่างดังนี้
1. กิจกรรมที่กำหนดวันที่เริ่มต้นอย่างเดียว
ข้อมูลวันที่เริ่มต้น 2020-06-01
[
{
"id": "18", /* id เฉพาะของกิจกรรม */
"groupId": "20200601", /* id กลุ่มข้อมูล */
"allDay": true, /* กิจกรรมทั้งวัน */
"start": "2020-06-01", /* วันที่เริ่มต้น */
"title": "กิจกรรมทดสอบ", /* หัวข้อกิจกรรม */
"url": "", /* ลิ้งค์ */
"textColor": "#FFFFFF", /* สีข้อความ */
"backgroundColor": "#03a9f4", /* สีพื้นหลัง */
"borderColor": "transparent" /* สีเส้นขอบ */
}
]
รูปแบบ json ข้างต้นเป็นแบบ array ข้อมูล object ของกิจกรรมตัวอย่าง
id จะเป็นค่าเฉพาะ ของ กิจกรรมนั้นๆ ไม่่ควรซ้ำกัน ซึ่งโดยทั่วไป เราก็จะใช้เป็น primary key ของข้อมูลอยู่แล้ว
groupId จะเป็นการจัดกลุ่มข้อมูล ส่วนนี้แล้วแต่เราจะกำหนด ในที่นี้ใช้วันที่เริ่มต้นของกิจกรรมนั้น มีประโยชน์สำหรับ
กรณีวันนั้นๆ มีกิจกรรม หลายกิจกรรม เราก็สามารถรู้ว่าเป็นกิจกรรมจากกลุ่มวันที่อะไร
allDay ปกติค่านี้ ถ้าเรากำหนดแค่วันเริ่มต้นอย่างเดียว ค่าเริ่มต้นจะเป็น true อยู่แล้ว นั้นคือกิจกรรมนั้น เป็นกิจกรรมทั้งวัน
เราจะกำหนดหรือไม่ก็ได้
start คือวันที่เริ่มต้น
ส่วนอื่นๆ ที่เหลือ ก็จะเป็นข้อมูลการปรับแต่งเพิ่มเติม คำอธิบายอยู่ด้านหลัง
2. กิจกรรมที่กำหนดวันที่เริ่มต้น และวันที่สิ้นสุด
ข้อมูลวันที่เริ่มต้น 2020-06-01 และสิ้นสุด 2020-06-03
[
{
"id": "18",
"groupId": "20200601",
"start": "2020-06-01",
"end": "2020-06-04",
"title": "กิจกรรมทดสอบ",
"url": "",
"textColor": "#FFFFFF",
"backgroundColor": "#03a9f4",
"borderColor": "transparent"
}
]
แบบที่กำหนด "allDay": true ก็ได้ผลลัพธ์เหมือนกัน
[
{
"id": "18",
"groupId": "20200601",
"allDay": true,
"start": "2020-06-01",
"end": "2020-06-04",
"title": "กิจกรรมทดสอบ",
"url": "",
"textColor": "#FFFFFF",
"backgroundColor": "#03a9f4",
"borderColor": "transparent"
}
]
สิ่งที่เพิ่มเข้ามาในรูปแบบที่ 2 คือวันที่สิ้นสุด ( end ) สังเกต จะเห็นว่า วันที่สิ้นสุดของข้อมูลเราจะเป็นวันที่ 3 แต่ข้อมูลที่แสดง
ใน json จะเป็นค่าของวันถัดไป ก็คือวันที่ 4 ทั้งนี้เพราะ ถ้าเรากำหนดเป้น 2020-06-03 จะเป็นวันที่และเวลาสิ้นสุดที่ เท่ากับ
2020-06-03 00:00:00 ตัว fullcalendar จะเอาข้อมูลช่วงวันที่ 2020-06-01 00:00:00 ไปจนถึง 2020-06-03 00:00:00 นั่นหมาย
ความว่า ข้อมูลของวันที่ 3 หลังเที่ยงคืน จะไม่แสดง ข้อมูลจึงไม่ถูกต้อง เราต้องการให้แสดงข้อมูลของวันที่ 3 ดังนั้น ช่วง
วันที่และเวลาสิ้นสุด จะต้องเป็นเที่ยงคืนของวันที่ 4 หรือก็คือ 2020-06-04 00:00:00 ซึ่งเท่ากับ 2020-06-04
3. กิจกรรมที่กำหนดวันที่เริ่มต้น และเวลาเริ่มต้น
ข้อมูลวันที่เริ่มต้น 2020-06-01 เวลาเริ่มต้น 12:00:00
[
{
"id": "18",
"groupId": "20200601",
"start": "2020-06-01T12:00:00",
"title": "กิจกรรมทดสอบ",
"url": "",
"textColor": "#FFFFFF",
"backgroundColor": "#03a9f4",
"borderColor": "transparent"
}
]
รูปแบบข้อมูลวันที่เริ่มต้น ( start ) ข้างต้นมีเวลาเข้ามาด้วย สังเกตว่ามีตัว T คั่นระหว่างวันที่และเวลา เป็นรูปแบบข้อมูล
วันที่และเวลาอีกรูปแบบหนึ่ง การกำหนดเฉพาะวันที่และเวลา ข้อมูลปฏิทินจะแสดงในช่วง 2020-06-01 12:00:00 ไปจนถึง
2020-06-01 23:59:59 หรือก็คือหลังจากเวลา 12.00 น. ของวันที่ 1 ทั้งหมด
4. กิจกรรมที่กำหนดวันที่เริ่มต้น เวลาเริ่มต้น และเวลาสิ้นสุด
ข้อมูลวันที่เริ่มต้น 2020-06-01 เวลาเริ่มต้น 12:00:00 เวลาสิ้นสุด 15:00:00
[
{
"id": "18",
"groupId": "20200601",
"start": "2020-06-01T12:00:00",
"end": "2020-06-01T15:00:00",
"title": "กิจกรรมทดสอบ",
"url": "",
"textColor": "#FFFFFF",
"backgroundColor": "#03a9f4",
"borderColor": "transparent"
}
]
รูปแบบแทบจะคล้ายกับรูปแบบที่ 3 แต่เนื่องจากว่ามีเวลาสิ้นสุดเข้ามา ดังนั้น จึงเพิ่มส่วนของ end เป็นวันที่เดียวกัน และ
เวลาสิ้นสุดเข้าไป ข้อมูลก็จะอยู่ในช่วง 2020-06-01 12:00:00 ไปจนถึง 2020-06-01 15:00:00
5. กิจกรรมที่กำหนดวันที่เริ่มต้น เวลาเริ่มต้น และวันที่สิ้นสุด
ข้อมูลวันที่เริ่มต้น 2020-06-01 เวลาเริ่มต้น 12:00:00 วันที่สิ้นสุดเป็น 2020-06-03
[
{
"id": "18",
"groupId": "20200601",
"start": "2020-06-01T12:00:00",
"end": "2020-06-04",
"title": "กิจกรรมทดสอบ",
"url": "",
"textColor": "#FFFFFF",
"backgroundColor": "#03a9f4",
"borderColor": "transparent"
}
]
จริงๆ รูปแบบนี้ เราไม่ควรใช้เท่าไหร่ เพราะเวลาสิ้นสุดไม่มี จะทำให้ช่วงข้อมูล เป็นดังนี้
2020-06-01 12:00:00 ถึง 2020-06-01 23:59:59
2020-06-02 00:00:00 ถึง 2020-06-02 23:59:59
2020-06-03 00:00:00 ถึง 2020-06-03 23:59:59
ควรใช้รูปแบบที่ 6 ถัดไปจะเหมาะสมกว่า
6. กิจกรรมที่กำหนดวันที่เริ่มต้น เวลาเริ่มต้น วันที่สิ้นสุด และเวลาสิ้นสุด
ข้อมูลวันที่เริ่มต้น 2020-06-01 เวลาเริ่มต้น 12:00:00 วันที่สิ้นสุดเป็น 2020-06-03 เวลาสิ้นสุด 15:00:00
[
{
"id": "18",
"groupId": "20200601",
"start": "2020-06-01",
"end": "2020-06-03",
"startTime": "12:00:00",
"endTime": "15:00:00",
"title": "กิจกรรมทดสอบ",
"url": "",
"textColor": "#FFFFFF",
"backgroundColor": "#03a9f4",
"borderColor": "transparent",
"startRecur": "2020-06-01",
"endRecur": "2020-06-04"
}
]
รูปแบบของกิจกรรมนี้ เป็นในลักษณะ เราต้องการให้กิจกรรม เกิดขึ้นในช่วงเวลา 12:00 - 15:00 ของแต่ละวันในช่วงวันที่ 1 ถึง 3
สิ่งที่เพิ่มเข้ามา จะมี startTime , endTime, startRecur และ endRecur โดยเมื่อใด ก็ตามที่เราจะให้มีกิจกรรมซ้ำๆ จะมีวันที่เริ่มต้น
ของการทำซ้ำ และวันที่สิ้นสุดของการทำซ้ำ นั่นคือ startRecur และ endRecur เพิ่มเข้ามา นั่นคือ ในช่วงวันที่กำหนด ให้ทำซ้ำในช่วง
เวลาที่กำหนดใน startTime และ endTime นั่นเอง
สังเกต end หรือวันที่สิ้นสุดในกรณีนี้ เป็นวันที่เดียวกับข้อมูลคือวันที่ 3 ในขณะที่ทำไมวันที่ endRecur หรือวันที่สิ้นสุดทำซ้ำ ถึงเป็นวันถัดไป
ทั้งนี้ก็เพราะว่า กิจกรรมมีช่วงเวลาสิ้นสุดเพิ่มเข้ามา และใช้วันที่ endRecur หรือวันที่สิ้นสุดทำซ้ำเป็นช่วงกำหนดแทน
7. กิจกรรมที่ทำซ้ำ ในวันที่กำหนดในแต่ละสัปดาห์ เช่น ทุกๆ วันจันทร์ หรือทุกๆ วันจันทร์ พุธ และศุกร์
ข้อมูลวันที่เริ่มต้น 2020-06-01 เวลาเริ่มต้น 12:00:00 วันที่สิ้นสุดเป็น 2020-06-07 เวลาสิ้นสุด 15:00:00
โดยทำซ้ำเฉพาะวัน จันทร์ พุธ และพฤหัส
[
{
"id": "18",
"groupId": "20200601",
"start": "2020-06-01",
"end": "2020-06-07",
"startTime": "12:00:00",
"endTime": "15:00:00",
"title": "กิจกรรมทดสอบ",
"url": "",
"textColor": "#FFFFFF",
"backgroundColor": "#03a9f4",
"borderColor": "transparent",
"daysOfWeek": [
"1",
"3",
"4"
],
"startRecur": "2020-06-01",
"endRecur": "2020-06-08"
}
]
รูปแบบนี้ จะคล้ายกับรูปแบบที่ 6 แต่มีการกำหนดการทำซ้ำในวันที่ต้องการของแต่ละสัปดาห์ ในที่นี้คือวัน จันทร์ พุธ และศุกรร์ ค่าที่เพิ่มเข้ามาคือ
daysOfWeek หรือก็คือค่าวันในสัปดาห์ที่ต้องการกำหนด เริ่มต้นที่ 0 คือวันอาทิตย์ ดังนั้นข้อมูลกิจกรรม ก็จะแสดงเฉพาะวันที่ 1 3 และ 4 ซึ่งตรงกับ
วันจันทร์ พุธ และศุกร์ ในช่วงเวลาวันที่ 1 - 7 แตกต่างจากรูปแบบที่ 6 ที่แสดงทุกวันในช่วงวันที่ 1 - 3
ให้เราทำความเข้าใจกับรูปแบบข้างต้นไว้ เพราะเนื้อหาต่อไป เราจะกำหนดรูปแบบฐานข้อมูล และการแสดงข้อมูล json จากฐานข้อมูลให้สอดคล้องกับ
รูปแบบกิจกรรมที่เราต้องการตาม โครงสร้าง json
การตั้งค่าแสดงข้อมูล event จาก json ไฟล์
ในที่นี้ เราจะสร้างรูปแบบ json ด้วยคำสั่ง อย่างง่ายโดย php แล้วทำการเรียกใช้งานใน fullcalendar ตามรูปแบบดังนี้
โดยตัวอย่างข้างต้น เป็นการสร้างโครงสร้าง json สำหรับ fullcalendar เป้นตัวอย่างเท่านั้น ข้อมูลจะแปรผันตามเดือนปัจจุบัน
ไฟล์ events.php
<?php
header("Content-type:application/json; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
// require_once("dbconnect.php");
$json_data = array();
$arr_color_demo = array(
"1"=>"#ffd149",
"2"=>"#fa42a2",
"3"=>"#61c419",
"4"=>"#ff8e25",
"5"=>"#44c5ed",
"6"=>"#ca5ec9",
"7"=>"#ff0000"
);
$arr_events = array();
$key = null;
for($i=1; $i<=7; $i++){
$demo_start_date = date("Y-m-01");
if(is_null($key)){
$key = 0;
}else{
$key++;
}
$json_data[$key] = array(
"id" => $i,
"groupId" => date("Ymd",strtotime($demo_start_date)),
"start" => date("Y-m-d",strtotime($demo_start_date)),
"title" => "รูปแบบกิจกรรม {$i}",
"url" => "",
"textColor" => "#FFFFFF",
"backgroundColor" => $arr_color_demo[$i],
"borderColor" => "transparent",
);
if($i==2){
$json_data[$key]["end"] = date("Y-m-d",strtotime($demo_start_date." +3 day"));
}
if($i==3){
$json_data[$key]["start"] = date("Y-m-d\T12:00:00",strtotime($demo_start_date." +4 day"));
}
if($i==4){
$json_data[$key]["start"] = date("Y-m-d\T12:00:00",strtotime($demo_start_date." +6 day"));
$json_data[$key]["end"] = date("Y-m-d\T15:00:00",strtotime($demo_start_date." +6 day"));
}
if($i==5){
$json_data[$key]["start"] = date("Y-m-d\T12:00:00",strtotime($demo_start_date." +7 day"));
$json_data[$key]["end"] = date("Y-m-d",strtotime($demo_start_date." +9 day"));
}
if($i==6){
$json_data[$key]["start"] = date("Y-m-d",strtotime($demo_start_date." +12 day"));
$json_data[$key]["end"] = date("Y-m-d",strtotime($demo_start_date." +19 day"));
$json_data[$key]["startTime"] = "12:00:00";
$json_data[$key]["endTime"] = "15:00:00";
$json_data[$key]["startRecur"] = date("Y-m-d",strtotime($demo_start_date." +12 day"));
$json_data[$key]["endRecur"] = date("Y-m-d",strtotime($demo_start_date." +20 day"));
}
if($i==7){
$json_data[$key]["start"] = date("Y-m-d",strtotime($demo_start_date." +19 day"));
$json_data[$key]["end"] = date("Y-m-d",strtotime($demo_start_date." +27 day"));
$json_data[$key]["startTime"] = "12:00:00";
$json_data[$key]["endTime"] = "15:00:00";
$json_data[$key]["daysOfWeek"] = array(1,3,4);
$json_data[$key]["startRecur"] = date("Y-m-d",strtotime($demo_start_date." +19 day"));
$json_data[$key]["endRecur"] = date("Y-m-d",strtotime($demo_start_date." +28 day"));
}
}
// แปลง array เป็นรูปแบบ json string
if(isset($json_data)){
$json= json_encode($json_data);
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";
}else{
echo $json;
}
}
?>
ไฟล์นี้เราจะไว้ที่เดียวกับไฟล์ทดสอบ demo.php ตามเนื้อหาในตอนที่ 1 และ 2 ที่ผ่านมา
ให้เราทำการเรีรยกใช้งาน event จากไฟล์ events.php ดังนี้
<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'
},
events: { // เรียกใช้งาน event จาก json ไฟล์ ที่สร้างด้วย php
url: 'events.php?gData=1',
error: function() {
}
},
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>
ดู demo ผลลัพธ์ด้านล่าง เลือกมุมมองแบบ กำหนดการ จะเห็นรายละเอียด ข่วงเวลาที่ชัดเจน
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง