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

Question

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

44

这是我使用插件的方式：

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事件（这是有道理的），它们没有任何相关的类别,

我怎么能让每个事件的颜色不同呢？

- Toni Michel Caubet

4个回答

23

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

- Boga

谢谢！很有趣，但是当我应用一个（缓存的）随机颜色（element.css('color',mycachedrandomcolor);）时，每一行（即使来自同一事件）都会得到不同的颜色；你有什么想法吗？ - Toni Michel Caubet

很奇怪...也许尝试使用eventRender回调函数链接 - Boga

4

事件列表对象包含属性如开始时间、结束时间、重叠、渲染，还有一个称为颜色的属性，您可以指定事件的颜色。

请查看下面的演示代码，其中使用了颜色属性：

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

- yeisonherbert

0

您可以这样做。eventsArr [{id...其他..颜色..},{},]

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

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

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

- leyu lin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MarCrazyness · Accepted Answer

为了以不同的颜色对每个事件进行着色，您可以采取一些方法来解决您的问题。

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