jquery full calendar：对前端的每个事件设置不同的颜色 [英] jquery full calendar: set a different color to each event from front-end

问题描述

这是我使用插件的方式：

  jQuery $ b jQuery（'＃booking-calendar'）。fullCalendar（{
 head：{
 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 -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. 更新事件feed'/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. 分开并更新事件Feed以使用eventSources。它允许您按颜色和文本颜色对活动进行分组。 http://arshaw.com/fullcalendar/docs/event_data/events_array/ 。

   
   
   

   $（'＃calendar'）。fullCalendar（{

     eventSources：[
    
    //你的事件源
    {
    events：[//将数组放入`events`属性
    {
    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'，//一个选项！
    textColor：'yellow'//一个选项！
   } 
    
    //任何其他事件源... 
    
   ] 
     

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,

Any idea how can i colorize differently each event?

Thanks!

解决方案

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

这篇关于jquery full calendar：对前端的每个事件设置不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！