jQuery全日历：从前端为每个事件设置不同的颜色

Posted 2023-02-23

【中文标题】jQuery全日历：从前端为每个事件设置不同的颜色

【英文标题】：jQuery full calendar: set a different color to each event from front-end

【发布时间】：2013-09-08 07:38:33

【问题描述】：

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

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”并为事件对象http://arshaw.com/fullcalendar/docs/event_data/Event_Object/添加颜色（背景和边框）、背景颜色、文本颜色或边框颜色。

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

分离和更新事件源以使用事件源。它允许您按颜色和文本颜色对事件进行分组。 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...
    ]
);

【讨论】：

我的问题是我没有访问后端实现的权限，所以我正在寻找一个仅前端的实现...这就是为什么我需要选择 DOM 元素...谢谢无论如何！有什么想法吗？

例如，在上面跨越 3 周的事件中，您希望同一事件在 3 周中的每一周都有不同的颜色？还是您只想为每个事件使用一种颜色？您想要特定事件类型的颜色还是随机的？如果您没有任何后端访问权限，您可以解析事件提要并手动添加颜色？

我希望同一事件的每个实例都具有随机颜色（是的，事件持续的 3 周）。

【参考方案2】：

您可以尝试使用 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');
        
    ,

【讨论】：

谢谢！有趣但是当我应用（缓存的）随机颜色（ element.css('color',mycachedrandomcolor); ）时，每一行（即使来自同一个事件）都会获得不同的颜色；知道为什么吗？

这很奇怪...也许可以试试 eventRender 回调link

【参考方案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'
            ]

【参考方案4】：

你可以这样做。 eventsArr [id...other..color..,,]

           var SelectedData = eventsArr.filter(function (arr) 
                return arr.id === id;
            )[0];

设置颜色后，将颜色更新为与该 ID 关联的事件。在您的情况下，只需为通过这些 id 的每个循环分配不同的颜色。

var color = SelectedData.color;
$("#YourElementID").find("#ElementIDtoBeChanged").val(color);