FullCalendar

Adam Shaw

Coloring Events

You can change the color of all events on the calendar using the eventColor option like so:

$('#calendar').fullCalendar({
    events: [
        // my event data
    ],
    eventColor: '#378006'
});

The eventBackgroundColor, eventBorderColor, and eventTextColor options can also be used for coloring events.

If you want to change the color for events in a specific Event Source, please look at the Event Source options documentation.

If you want to change the color for individual events, please look at the Event Object color options.

[deprecated] Coloring Events prior to version 1.5

You can modify the default color that affects all events by adding some css in the following form:

.fc-event,
.fc-agenda .fc-event-time,
.fc-event a {
    background-color: black; /* background color */
    border-color: black;     /* border color */
    color: red;              /* text color */
    }

You can also change the color for certain events by using the className property of each Event Object. Here is an example of the CSS you would write if your className was "holiday":

.holiday,
.fc-agenda .holiday .fc-event-time,
.holiday a {
    background-color: green; /* background color */
    border-color: green;     /* border color */
    color: yellow;           /* text color */
    }

If you are using the "default" and "className" techniques together, make sure the CSS for the default technique comes first.

Versions prior to 1.3 had different ways of setting colors through CSS. Check your version's fullcalendar.css for an example.

 

Support FullCalendar's
Development!