Question

我正在使用jQuery Fullcalendar来显示由catergories和标签选择的事件。我想根据事件的类别更改事件颜色，例如成人将是一种颜色，机场将是另一种颜色等....

我真的不知道从哪里开始。我尝试过使用

eventAfterRender function (event, element, view){
    var categoryName = new categoryName();
    if (event.categoryName < ) {
       element.css('background-color', '#FFB347');
    } else if 
     etc......

以下是我的代码示例：

$(document).ready(function () {
    $('#calendar').fullCalendar({
        weekends: false,
        header: {
            left: "prev,next",
            center: "title",
            right: "today"
        },

        eventRender: function (event, data, element) {
            element.qtip({
                content: '<h3>'+ event.title +'</h3>' + 
                '<p><b>Start:</b> '+ data.start +'<br />' + 
                (data.end && '<p><b>End:</b> ' + data.end + '</p>' || ''),               
            });
        },

        editable: false,
        eventLimit: 3,
        events: function (start, end, timezone, callback) {
            $.ajax({
                type: "POST",
                url: '/colapi/COLCalendarEvents/Mauro',
                dataType: 'json',
                data: {
                    tagValue: $('#Tags').val(),
                    categoryValue: $('#Cat').val(),
                    start: start.format("l"),
                    end: end.format("l"),
                    categoryName: "category",
                    tagName: "tags",
                },
                success: function (doc) {
                    callback(doc);
                }               
            });

        },        
        eventClick: function openPopup(event) {
            var oManager = GetRadWindowManager();
            var oRW = oManager.open($('#ModalPopupURL').val() + event.url, null);
            return false;
        },        

    });

});

Answer 1

请查看FullCalendar＆＃39; Coloring Events。完整日历提供eventBackgroundColor，eventBorderColor和eventTextColor，您可以使用它们来区分不同类别的活动。

您可以在事件中添加这些属性JSON和fullCalendar将负责这一点。看看this question也是如此。

使用带有类别标记的动态数据更改fullcalendar中的事件颜色

1 个答案: