Jquery full calendar: установить другой цвет для каждого события из front-end

Вот как я использую плагин:

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 (которое имеет смысл), и у них нет соответствующего класса,

Любая идея, как я могу раскрасить по-разному каждое событие?

Спасибо!

Ответы

Ответ 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'
}]
```

Разделите и обновите фиды событий, чтобы использовать 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...

]

Ответ 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');
        }
    },

Ответ 3

        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'
            }]