fullcalendar v.2.1.1 แสดงกิจกรรม ในแต่ละวัน แบบ basicDay และ agendaDay

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
fullcalendar ปฏิทิน กิจกรรม

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ fullcalendar ปฏิทิน กิจกรรม

ดูแล้ว 13,116 ครั้ง


โค้ดการะประยุกต์ต่อไปนี้ อยู่ในเงื่อนไข ที่เราต้องการแสดง กิจกรรมทั้งหมด
แบบเป็นลิสรายการ แบบ basicDay และ agendaDay โดยที่เรากำหนดเมื่อคลิก
วันที่ใดๆ ในปฏิทิน ซึ่งแสดงใน views แบบ month  แล้วให้ทำการเปลี่ยน ไปที่
basicDay หรือ agendaDay ตามแต่กำหนด จากนั้น ให้ทำการแสดงกิจกรรมของวันที่
ที่เราคลิกเลือก
 
การใช้งาน จะแนะนำต่อจากบทความก่อนหน้า ดูได้ที่
การใช้งาน fullcalendar v.2.1.1 กับฐานข้อมูล สร้างปฏิทินกิจกรรม  
 
มาดูรูปแบบการประยุกต์ตามขั้นตอน
 
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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ