jquery完整日历:为前端的每个事件设置不同的颜色

Question

这就是我使用插件的方式:

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
                    }
                })
            })
        })

这就是它的样子:

正如您所看到的,当事件开始和结束时跟踪有点困难,所以我想改变每个事件的颜色,

这里的问题是每个事件可能在不同的星期分裂(如示例中所示),并且每个星期都有不同的DOM事件(这是有意义的),并且它们没有任何相关的类,

我知道如何以不同的方式为每个事件着色？

谢谢!

Answer 1

要以不同方式着色每个事件,您可以采取几种方法来解决您的问题.

1. 更新事件源'/bookings-feed.php'并将颜色(背景和边框),backgroundColor,textColor或borderColor添加到事件对象http://arshaw.com/fullcalendar/docs/event_data/Event_Object/.

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

2. 分离并更新事件订阅源以使用eventSources.这允许您按颜色和文本颜色对事件进行分组.http://arshaw.com/fullcalendar/docs/event_data/events_array/.

   $( '#日历').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

您可以尝试使用eventAfterRender回调.检查文档.

这样,您将获得"整体"事件,并根据随机选择操纵其颜色.

这样你就可以得到一个想法,我使用这个回调,但颜色会根据事件的日期而改变.如果事件已安排,正在发生或已经发生,则颜色会发生变化.

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');
        }
    },