jquery đầy đủ lịch: thiết lập một màu khác nhau cho mỗi sự kiện từ front-end

Question

Đây là cách tôi đang sử dụng plugin:

jQuery(document).ready(function() { 
      jQuery('#booking-calendar').fullCalendar({ 
       header: { 
        left: 'prev,next', 
        center: 'title', 
        right: 'month,basicWeek,basicDay' 
       }, 
       editable: true, 
       events: '<?php echo get_template_directory_uri() ?>/bookings-feed.php' 
      }); 

      jQuery('#apartment-selector').change(function() { 
       apartment = jQuery(this).val() 
       jQuery('#booking-calendar').fullCalendar('removeEvents') 
       jQuery('#booking-calendar').fullCalendar('addEventSource', { 
        url: '<?php echo get_template_directory_uri() ?>/bookings-feed.php', 
        type: 'POST', 
        data: { 
         apartment : apartment 
        } 
       }) 
      }) 
     }) 

Và đây là cách có vẻ:

Như bạn có thể thấy hơi khó theo dõi khi một sự kiện bắt đầu và kết thúc, vì vậy tôi đã nghĩ đến việc thay đổi màu sắc của mỗi sự kiện,

Vấn đề ở đây là mỗi sự kiện có thể b e được tách ra trong các tuần khác nhau (như trong ví dụ) và mỗi tuần có sự kiện DOM khác nhau (có ý nghĩa) và họ không có bất kỳ lớp học nào có liên quan,

Bất kỳ ý tưởng nào tôi có thể tô màu cho từng sự kiện khác nhau?

Cảm ơn!

Answer 1

Để tô màu cho từng sự kiện khác nhau, có một vài cách tiếp cận bạn có thể thực hiện để giải quyết vấn đề của mình.

1. Cập nhật các feed sự kiện '/bookings-feed.php' và thêm màu sắc (nền, biên giới), backgroundColor, Format, hoặc borderColor đến đối tượng sự kiện http://arshaw.com/fullcalendar/docs/event_data/Event_Object/.

   events: [{ 
       title : 'event1', 
       start : '2010-01-01', 
       color : '#000' 
   }] 
   

2. Tách biệt và cập nhật nguồn cấp dữ liệu sự kiện để sử dụng eventSources. Cho phép bạn nhóm sự kiện theo màu và màu văn bản. http://arshaw.com/fullcalendar/docs/event_data/events_array/.

   $ ('# lịch'). FullCalendar ({

   eventSources: [ 
   
       // your event source 
       { 
        events: [ // put the array in the `events` property 
         { 
          title : 'event1', 
          start : '2010-01-01' 
         }, 
         { 
          title : 'event2', 
          start : '2010-01-05', 
          end : '2010-01-07' 
         }, 
         { 
          title : 'event3', 
          start : '2010-01-09 12:30:00', 
         } 
        ], 
        color: 'black',  // an option! 
        textColor: 'yellow' // an option! 
       } 
   
       // any other event sources... 
   
   ] 
   

Answer 2

Bạn có thể thử bằng cách sử dụng callback eventAfterRender. Kiểm tra documentation.

Bằng cách này, bạn sẽ nhận được 'toàn bộ' sự kiện và thao tác màu sắc của nó, dựa trên lựa chọn ngẫu nhiên

Chỉ để bạn có thể có ý tưởng, tôi làm việc với cuộc gọi lại này, nhưng màu sắc được thay đổi dựa trên ngày diễn ra sự kiện. ges nếu sự kiện được lên lịch, đang diễn ra hoặc đã xảy ra.

eventAfterRender: function (event, element, view) { 
     var dataHoje = new Date(); 
     if (event.start < dataHoje && event.end > dataHoje) { 
      //event.color = "#FFB347"; //Em andamento 
      element.css('background-color', '#FFB347'); 
     } else if (event.start < dataHoje && event.end < dataHoje) { 
      //event.color = "#77DD77"; //Concluído OK 
      element.css('background-color', '#77DD77'); 
     } else if (event.start > dataHoje && event.end > dataHoje) { 
      //event.color = "#AEC6CF"; //Não iniciado 
      element.css('background-color', '#AEC6CF'); 
     } 
    }, 

Answer 3

Đối tượng danh sách sự kiện trong đó bạn có thuộc tính như bắt đầu, kết thúc, chồng lên nhau, bạn có thể chỉ định màu của sự kiện.

Nhìn vào bên dưới code demo, trong đó sở hữu màu sắc được sử dụng:

 events: [ 
      { 
       start: '2017-11-24', 
       end: '2017-11-28', 
       overlap: false, 
       rendering: 'background', 
       color: '#257e4a' 
      }, 
      { 
       start: '2017-11-06', 
       end: '2017-11-08', 
       overlap: false, 
       rendering: 'background', 
       color: '#ff9f89' 
      }]