是否可以根据标题分配 FullCalendar 事件的背景颜色?

Is it possible to assign the background colour of a FullCalendar event based on its title?

由于 FullCalendar 无法读取分配给 Google 日历中事件的颜色,我需要能够根据各个事件标题的文本内容设置事件显示方式的样式。

阅读了尽可能多的关于此事的帖子后,似乎 FullCalendar 的 'eventRender' 是最有可能采取的路线,但我能找到的最接近我需要的是一些类似的东西的:-

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

我的问题是,(a) 我需要将 eventRender 应用于事件标题而不是它们的描述,并且 (b) 我需要它是 'if the title includes the words blah-blah',而不是 'if the title is an exact match for blah blah'.

希望以上内容不要太乱码和无意义。对于这一切,我仍然非常摸索;因此,我们将不胜感激地收到任何帮助、建议、想法或引导正确的方向! :)

非常感谢您的宝贵时间。

已编辑: 附加信息。我在 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>

你基本上尝试了吗?

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

在 eventRender 回调中

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

会的。

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

#希望对您有所帮助

element.addClass("custom-event-0");

element.addClass("custom-event-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);
    }

});