jquery full calendar：从前端为每个事件设置不同的颜色

jquery full calendar: set a different color to each event from front-end

提问by Toni Michel Caubet

This is how I'm using the plugin:

这是我使用插件的方式：

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

And this is how it looks:

这是它的外观：

As you can see it's a bit difficult to track when an event starts and ends, so I was thinking of changing the color of each event,

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

The problem here is that each event might be splitted in different weeks (like in the example) and each week has a different DOM event (wich makes sense) and they don't have any related class,

这里的问题是，每个事件可能会在不同的周内拆分（如示例中所示），并且每周都有一个不同的 DOM 事件（这是有道理的），并且它们没有任何相关的类，

Any idea how can i colorize differently each event?

知道如何为每个事件着色不同吗？

Thanks!

谢谢！

回答by MarCrazyness

To colorize each event differently there are a couple approaches you can take to tackle your problem.

要对每个事件进行不同的着色，您可以采用几种方法来解决您的问题。

1. Update the event feed '/bookings-feed.php' and add color(background and border), backgroundColor, textColor, or borderColor to the event object http://arshaw.com/fullcalendar/docs/event_data/Event_Object/.

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

2. Separate and update the event feeds to use eventSources. Which allows you to group events by color and text color. 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...
   
   ]
   

1. 更新事件提要“/bookings-feed.php”并将颜色（背景和边框）、背景颜色、文本颜色或边框颜色添加到事件对象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...
   
   ]
   

回答by Boga

You could try using the eventAfterRender callback. Check documentation.

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

This way, you will get the 'whole' event, and manipulate its color, based on a random choice.

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

Just so you could get an idea, i work with this callback, but the color is changed based on the day of the event. The color changes if the event is scheduled, is happening, or had already happened.

只是为了让您有个想法，我使用此回调，但颜色会根据事件当天发生变化。如果事件已安排、正在发生或已经发生，则颜色会发生变化。

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

回答by yeisonherbert

Events list object in which you have properties like start, end, overlap,, rendering you also have a property called color in which you can specify color of the event.

事件列表对象，您在其中拥有开始、结束、重叠、渲染等属性，您还有一个名为 color 的属性，您可以在其中指定事件的颜色。

Look at below demo code in which color property is used:

看看下面使用 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'
            }]