javascript - jQuery 完整日历 : set a different color to each event from front-end

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/ .

 $('#calendar').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...
    ]
});