是否可以根据标题指定FullCalendar事件的背景颜色? [英] Is it possible to assign the background colour of a FullCalendar event based on its title?

问题描述

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

As FullCalendar isn't able to read the colours that are assigned to events in Google Calendar I need to be able to style the way events are displayed based on the text content of the individual event titles.

已经阅读了很多关于此事的文章，似乎FullCalendar的'eventRender'是最可能采用的途径，但我能找到的最接近我需要的途径是:-

Having read as many posts as I can find on the matter, it would seem that FullCalendar's 'eventRender' is the most likely route to take but the closest I can find to what I need is something along the lines of:-

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

我的问题是，(a)我需要将eventRender应用于事件标题而不是其描述，并且(b)如果标题包括' >单词blah-blah'，而不是'如果标题是 blah blah的完全匹配 .

My problem is, (a) I need eventRender to apply to the event titles rather than their descriptions, and (b) I need it to be a case of 'if the title includes the words blah-blah', rather than 'if the title is an exact match for blah blah'.

我希望以上所有内容不要太乱码和荒谬.我仍然对所有这些感到自己的方式.因此，非常感谢您在正确方向上提供的任何帮助，建议，想法或指导！ :)

I hope all the above isn't too garbled and nonsensical. I'm still very much feeling my way with all this; so any help, advice, thoughts, or steers in the right direction would be most gratefully received! :)

在此先感谢您的宝贵时间.

Many thanks, in advance, for your time.

附加信息.我在FullCalendar html页面上使用的脚本(没有API密钥和Google ID)

Edited: Additional info. The script that I'm using on the FullCalendar html page (sans API key and 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>

推荐答案

在eventRender回调中

in the eventRender callback

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

会做到的.

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

or better yet, apply a style element.addClass("event-bg-class");

这篇关于是否可以根据标题指定FullCalendar事件的背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！