โค้ดการะประยุกต์ต่อไปนี้ อยู่ในเงื่อนไข ที่เราต้องการแสดง กิจกรรมทั้งหมด
แบบเป็นลิสรายการ แบบ basicDay และ agendaDay โดยที่เรากำหนดเมื่อคลิก
วันที่ใดๆ ในปฏิทิน ซึ่งแสดงใน views แบบ month แล้วให้ทำการเปลี่ยน ไปที่
basicDay หรือ agendaDay ตามแต่กำหนด จากนั้น ให้ทำการแสดงกิจกรรมของวันที่
ที่เราคลิกเลือก
การใช้งาน จะแนะนำต่อจากบทความก่อนหน้า ดูได้ที่
การใช้งาน fullcalendar v.2.1.1 กับฐานข้อมูล สร้างปฏิทินกิจกรรม
https://www.ninenik.com/content.php?arti_id=564 via @ninenik
มาดูรูปแบบการประยุกต์ตามขั้นตอน
1. เราคลิกที่วันที่ใดๆ ในปฏิทิน
(ดังนั้นเราต้องรู้จัก Clicking & Hovering)
ขยายความ และทำความเข้าใจ
fullcalendar จะมีการกระทำหรือเหตุการณ์ ที่เกี่ยวข้อง ประกอบด้วย 4 อย่าง
dayClick (callback) เมื่อเราคลิก วันที่ใดๆ ในปฏิทิน
eventClick (callback) เมื่อเราคลิก กิจกรรมใดๆ ในปฏิทิน
eventMouseover (callback) เมื่อเราเลื่อนเมาส์อยู่เหนือกิจกรรมใดๆ ในปฏิทิน
eventMouseout (callback) เมื่อเราเลื่อนเมาส์ออกจากกิจกรรมใดๆ ในปฏิทิน
สำหรับ eventClick eventMouseover และ eventMouseout ค่า parameter ที่รับ
เข้ามาในฟังก์ชั่น จะเหมือนกัน
ตัวอย่างการใช้งาน dayClick และ eventClick
$(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
events: {
url: 'data_events.php',
error: function() {
}
},
eventLimit:true,
lang: 'th',
dayClick: function(date, jsEvent, view) {
// alert('วันที่: ' + date.format());
// alert('ตำแแหน่งเมาส์ x y: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('หน้า view ปัจจุบัน: ' + view.name);
console.log(date); // วันที่ที่คลิกเลือกอยู่ในรูปแบบ moment object แปลงเป็นวันที่ได้
console.log(jsEvent); // event ของ mouse เมื่อคลิก เช่น jsEvent.pageX jsEvent.pageY
console.log(view); // view objcct http://fullcalendar.io/docs/views/View_Object/
console.log(view.name); // ชื่อหน้า view ปัจจุบันเช่น month ,
// เช่น month - basicWeek - basicDay - agendaWeek - agendaDay
console.log(view.title); // ชื่หัวข้อปฏิทิน เช่น ตุลาคม 2014
console.log(view.start); // วันที่เริ่มต้นในปฏิทิน ได้ค่าในรูปแบบ moment object แปลงเป็นวันที่ได้
console.log(view.end); // วันที่สุดท้ายที่ไม่ด้แสดงในปฏิทิน ได้ค่าในรูปแบบ moment object แปลงเป็นวันที่ได้
console.log(view.intervalStart); // วันที่ 1 ของแต่ละเดือน อยู่ในรูปแบบ moment object แปลงเป็นวันที่ได้
console.log(view.intervalEnd); // วันที่ 1 ของอีกเดือน หรือวันที่ถัดจากวันที่สุดท้ายของเดือน
if(view.name=="month"){ // ให้ทำงานต่อเมื่อ หน้า view ขณะนั้นเป็น month
// คำสั่งเปลี่ยนสีพื้นหลังของช่องวันที่ที่คลิก ให้เป็นสีแดง
// ดังนั้น $(this) ก็คือช่องวันที่ที่คลิกเลือก สามารถใช้อ้างอิงสำหรับใช้งานได้
$(this).css('background-color', 'red'); // ตัวอย่างอ้างอิงใช้งาน
}
},
eventClick: function(calEvent, jsEvent, view) {
// alert('กิจกรรม: ' + calEvent.title);
// alert('ำแแหน่งเมาส์ x y: ' + jsEvent.pageX + ',' + jsEvent.pageY);
// alert('หน้า view ปัจจุบัน: ' + view.name);
console.log(calEvent); // event object ดูได้เพิ่มที่ บทความก่อนหน้า หรือ
// http://fullcalendar.io/docs/event_data/Event_Object/
console.log(jsEvent); // event ของ mouse เมื่อคลิก เช่น jsEvent.pageX jsEvent.pageY
console.log(view); // view objcct http://fullcalendar.io/docs/views/View_Object/
console.log(view.name); // ชื่อหน้า view ปัจจุบันเช่น month ,
// เช่น month - basicWeek - basicDay - agendaWeek - agendaDay
console.log(view.title); // ชื่หัวข้อปฏิทิน เช่น ตุลาคม 2014
console.log(view.start); // วันที่เริ่มต้นในปฏิทิน ได้ค่าในรูปแบบ moment object แปลงเป็นวันที่ได้
console.log(view.end); // วันที่สุดท้ายที่ไม่ด้แสดงในปฏิทิน ได้ค่าในรูปแบบ moment object แปลงเป็นวันที่ได้
console.log(view.intervalStart); // วันที่ 1 ของแต่ละเดือน อยู่ในรูปแบบ moment object แปลงเป็นวันที่ได้
console.log(view.intervalEnd); // วันที่ 1 ของอีกเดือน หรือวันที่ถัดจากวันที่สุดท้ายของเดือน
if(view.name=="month"){ // ให้ทำงานต่อเมื่อ หน้า view ขณะนั้นเป็น month
// ทำสอบการทำงานเปลี่ยนสีของ กิจกรรม
// ดังนั้น $(this) คือแถบของกิจกรรม ที่เราคลิก
$(this).css('border-color', 'red');
}
}
});
});
ดังนั้นในขั้นตอนที่ 1 เราจะใช้ dayClick จะได้เป็น
$(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
events: {
url: 'data_events.php',
error: function() {
}
},
eventLimit:true,
lang: 'th',
dayClick: function(date, jsEvent, view) { // เมื่อคลิกที่วันที่ใดๆ ในปฏิทิน
// เราจะใช้แค่เมื่อคลิกในหน้า view month เท่านั้น
if(view.name=="month"){ // ให้ทำงานต่อเมื่อ หน้า view ขณะนั้นเป็น month
}
}
});
});
2. เมื่อคลิกแล้วให้เปลี่ยนหน้า view จาก month ไปเป็น basicDay หรือ agendaDay
ในที่นี้เราจะใช้ basicDay เพื่อเป็นตัวอย่าง
โดยเราจะใช้ changeView (method)
รูปแบบคือ
$('#ปฏิทิน').fullCalendar('changeView','ชื่อ view');
ตัวอย่าง
$('#calendar').fullCalendar('changeView','basicDay');
3. เปลี่ยนข้อมูลเป็นวันที่ตามวันที่ที่ถูกคลิกเข้ามา เพื่อที่จะแสดงเฉพาะ
กิจกรรมของวันที่นั้นๆ
โดยเราจะใช้งาน gotoDate (method)
รูปแบบคือ
$('#ปฏิทิน').fullCalendar('gotoDate',วันที่รับค่าจาก date ของ moment object);
ตัวอย่าง
$('#calendar').fullCalendar('gotoDate',date.format());
ดังนั้นไฟล์ script.js สุดท้าย คือ
$(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
events: {
url: 'data_events.php',
error: function() {
}
},
eventLimit:true,
lang: 'th',
dayClick: function(date, jsEvent, view) { // เมื่อคลิกที่วันที่ใดๆ ในปฏิทิน
// เราจะใช้แค่เมื่อคลิกในหน้า view month เท่านั้น
if(view.name=="month"){ // ให้ทำงานต่อเมื่อ หน้า view ขณะนั้นเป็น month
$('#calendar').fullCalendar('changeView','basicDay');
$('#calendar').fullCalendar('gotoDate',date.format());
}
}
});
});
ตัวอย่างปฏิทิน และการใช้งาน ให้ทดสอบโดยคลิกที่วันที่ที่มีกิจกรรม คลิกในช่องว่าง
ในวันที่นั้นๆ ไม่ต้องคลิกที่ กิจกรรม เพราะจะไม่เข้าเงื่อนไขการทำงาน
เนื้อหาที่เกี่ยวข้อง