是否可以根据FullCalendar事件的标题指定其背景颜色

Question

由于FullCalendar无法读取谷歌日历中分配给事件的颜色，我需要能够根据单个事件标题的文本内容来设计事件的显示方式。

在阅读了我能找到的关于这件事的尽可能多的帖子后，FullCalendar的"eventRender"似乎是最有可能的途径，但我能找到最接近我需要的东西是：-

eventRender: function(event, element) {
                if(event.description == "blah blah") {
                    element.css('background-color', '#ff000');

我的问题是，（a）我需要eventRender应用于事件标题，而不是它们的描述，（b）如果标题包含单词"布拉"，我需要它是的情况，而不是，如果标题是"布拉"的完全匹配。

我希望以上的一切不要太混乱和荒谬。我仍然对这一切感同身受；因此，任何帮助、建议、想法或正确方向的指引都将不胜感激！：）

非常感谢您的光临。

编辑时间：其他信息。我在FullCalendar html页面上使用的脚本（无API密钥和Google ID）

<script>
        $(document).ready(function() {
        $('#calendar').fullCalendar({
            height: 'auto',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaDay,month',
            },
            eventRender: function(event, element) {
                if(event.description == "blah blah") {
                    element.css('background-color', '#ff000');
                }
            },
            // Google API key
            googleCalendarApiKey: 'xxxxxxxxx',
            // Diary Dates
            events: 'xxxxxxxxx',

            eventClick: function(event) {
                // opens events in a popup window
                window.open(event.url, 'gcalevent', 'width=700,height=600');
                return false;
            },
            loading: function(bool) {
                $('#loading').toggle(bool);
            }
        });
    });
    </script>

Answer 1

在eventRender回调中

if(-1 != event.title.indexOf("blah blah")) {
    element.find('.fc-title').css('background-color', '#ff000'); 
}

或者更好的是，应用样式element.addClass("event-bg-class");

Answer 2

你基本上试过了吗？

if(-1 != event.title.indexOf("blah blah")) {
    element.css('background-color', '#ff000');
}

Answer 3

#希望它能帮助你

element.addClass（"customizedevent-0"）

element.addClass（"customizedevent-1"）

$(document).ready(function() {
var eventsdata = [];
var i = 0;
$('#calendar').fullCalendar({
    height: 'auto',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,month',
    },
    eventRender: function(event, element) {
        if(event.description == "blah blah") {
            element.css('background-color', '#ff000');
        }
    },
    // Google API key
    googleCalendarApiKey: 'xxxxxxxxx',
    // Diary Dates
    events: 'xxxxxxxxx',
    eventRender: function(event, element) {
        if(eventsdata.length == 0){
            eventsdata.push(event.title);
            i++;
        }else{
            var tmp = eventsdata.indexOf(event.title);
            if(tmp == -1){
                eventsdata.push(event.title);
                i++;
            }
        }
        element.addClass("custom-event-"+eventsdata.indexOf(event.title));
    },
    eventClick: function(event) {
        // opens events in a popup window
        window.open(event.url, 'gcalevent', 'width=700,height=600');
        return false;
    },
    loading: function(bool) {
        $('#loading').toggle(bool);
    }
});