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

Posted 2021-05-04

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

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

另一答案

您可以尝试使用eventAfterRender回调。检查documentation。

这样，您将获得“整体”事件，并根据随机选择操纵其颜色。

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

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

另一答案

事件列表对象，其中包含start，end，overlap等属性，渲染还有一个名为color的属性，您可以在其中指定事件的颜色。

请看下面使用color属性的演示代码：

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