fullcalendar v.2.1.1 แสดงกิจกรรม ในแต่ละวัน แบบ basicDay และ agendaDay
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeeปฏิทิน กิจกรรม fullcalendar
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ปฏิทิน กิจกรรม fullcalendar
ไปที่
Copy
โค้ดการะประยุกต์ต่อไปนี้ อยู่ในเงื่อนไข ที่เราต้องการแสดง กิจกรรมทั้งหมด
แบบเป็นลิสรายการ แบบ basicDay และ agendaDay โดยที่เรากำหนดเมื่อคลิก
วันที่ใดๆ ในปฏิทิน ซึ่งแสดงใน views แบบ month แล้วให้ทำการเปลี่ยน ไปที่
basicDay หรือ agendaDay ตามแต่กำหนด จากนั้น ให้ทำการแสดงกิจกรรมของวันที่
ที่เราคลิกเลือก
การใช้งาน จะแนะนำต่อจากบทความก่อนหน้า ดูได้ที่
การใช้งาน fullcalendar v.2.1.1 กับฐานข้อมูล สร้างปฏิทินกิจกรรม
http://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()); } } }); });
ตัวอย่างปฏิทิน และการใช้งาน ให้ทดสอบโดยคลิกที่วันที่ที่มีกิจกรรม คลิกในช่องว่าง
ในวันที่นั้นๆ ไม่ต้องคลิกที่ กิจกรรม เพราะจะไม่เข้าเงื่อนไขการทำงาน
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 27-10-2017
แจกโค้ดตัวอย่าง fullcalendar เวอร์ชั่น 3.6.2 ฉบับปรับแต่ง รองรับภาษาไทย และปี พ.ศ.
ดาวน์โหลดได้ที่ https://goo.gl/426JGS
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาที่เกี่ยวข้อง
-
12 Oct2014การใช้งาน fullcalendar v.2.1.1 กับฐานข้อมูล สร้างปฏิทินกิจกรรม อ่าน 58,341
บทความเกี่ยวกับ fullcalendar เวอร์ชั่น 2.1.1 นี้ จะมีบทความมากกว่าหนึ่งบทความ
-
กำลังอ่านเนื้อหานี้อยู่15 Oct2014fullcalendar v.2.1.1 แสดงกิจกรรม ในแต่ละวัน แบบ basicDay และ agendaDay อ่าน 12,550
โค้ดการะประยุกต์ต่อไปนี้ อยู่ในเงื่อนไข ที่เราต้องการแสดง กิจกรรมทั้งหมด
-
17 Oct2014ดึงข้อมูลกิจกรรม จากหลายๆ แหล่งข้อมูลมาใช้งาน ใน fullcalendar v.2.1.1 อ่าน 8,882
จากการเรียกใช้งานข้อมูล ตามหัวข้อบทความแรก เกี่ยวกับ fullcalendar v 2.1.1
-
29 Oct2014การกำหนด วันที เวลา ของ Event Object ใน fullcalendar v.2.1.1 อ่าน 12,231
การสร้างไฟล์ data_events.php จากฐานข้อมูล เพื่อกำหนด event object สำหรับใช้งา
-
10 May2016แนวทางการปรับปีเป็น พ.ศ. ใน fullcalendar อย่างง่าย อ่าน 10,795
เนื้อหาต่อไปนี้เป็นแวทางการปรับปีของ fullcalendar ให้เป็นปี พ.ศ. โดยจะมี 2 แน
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()