jquery完整日历：为前端的每个事件设置不同的颜色
这就是我使用插件的方式：
jQuery( document ).ready( function() { jQuery('#booking-calendar').fullCalendar({ header: { left: 'prev,next', center: 'title', right: 'month,basicWeek,basicDay' }, editable: true, events: '/bookings-feed.php' }); jQuery( '#apartment-selector' ).change( function() { apartment = jQuery( this ).val() jQuery('#booking-calendar').fullCalendar( 'removeEvents' ) jQuery('#booking-calendar').fullCalendar( 'addEventSource', { url: '/bookings-feed.php', type: 'POST', data: { apartment : apartment } }) }) }) 这就是它的样子：
正如您所看到的，当事件开始和结束时跟踪有点困难，所以我想改变每个事件的颜色，
这里的问题是每个事件可能会在不同的周内分割（如示例中所示），并且每周都有不同的DOM事件（这是有意义的），并且它们没有任何相关的类，
任何想法我怎么能以不同的方式着色每个事件？
谢谢！
要以不同方式着色每个事件，您可以采取几种方法来解决您的问题。
-
更新事件源’/ 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... ]
您可以尝试使用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'); } },
事件列表对象，其中包含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' }]