问题

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.

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');

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.

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>

回答1:

in the eventRender callback

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

will do it.

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

回答2:

Did you basically try ?

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

回答3:

# Hope it'll help you

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);
    }

});

来源：https://stackoverflow.com/questions/28699868/is-it-possible-to-assign-the-background-colour-of-a-fullcalendar-event-based-on

标签

javascript