You can try to set event background color. Something like this:
event.backgroundColor = 'cccccc#';
Or for cell background:
$('.fc-day[data-date="' + date + '"]').css('background', color);
date must be date string equivalent to php Y-m-d date format.
Style need change when calendar was rendered.
That question you referenced isn't the same. He was looking to change the background color of any day that has an event, not the event itself. What you are trying to do is supported by the library. You can set the color of the event by passing in a color property with the event data.
All examples can be found on the FullCalendar Event Source Object page. As noted on that example page, you can set it in the array of events:
{
events: [
{
title: 'Event1',
start: '2011-04-04'
},
{
title: 'Event2',
start: '2011-05-05'
}
// etc...
],
eventColor: 'yellow', // an option!
textColor: 'black' // an option!
}
or in JSON:
{
url: '/myfeed.php',
color: 'yellow', // an option!
textColor: 'black' // an option!
}
Now, those are setting the background for every event in the source, but you can do it per event as well, the same way, like:
[
{
"title": "Free Pizza",
"allday": "false",
"borderColor": "#5173DA",
"color": "#99ABEA",
"textColor": "#000000",
"description": "Fake description for the Free Pizza",
"start": "2014-11-15T16:30:28",
"end": "2014-11-15T17:30:28",
"url": "some url"
},
{
"title": "CSS Meetup",
"allday": "false",
"borderColor": "#820F20",
"color": "#A6113C",
"textColor": "#ffffff",
"description": "Fake description",
"start": "2014-11-19T16:30:28",
"end": "2014-11-19T18:30:28",
"url": "someUrl
}
]
You can use eventColor and eventTextColor (src) to set the background for all events on the calendar, like
$('#fullCal').fullCalendar({
events: [...],
eventColor: 'yellow',
eventTextColor: 'black'
});
After further clarification it appears you want certain time slots to have colors but not be a "real" event. You can do this in FullCalendar 2.2 using the Background Events by adding rendering: 'background' to the event (documentation).
$('#fullCal').fullCalendar({
events: [{
title: 'Main Event 1',
start: moment().add(-4, 'h'),
end: moment().add(-2, 'h'),
color: '#ff0000',
allDay: false
}, {
start: moment().add(2, 'h'),
end: moment().add(5, 'h'),
rendering: 'background'
}, {
title: 'Main Event 2',
start: moment().add(5, 'h'),
end: moment().add(7, 'h'),
color: '#00cc00',
allDay: false,
fakeEvent: false
}],
header: {
left: '',
center: 'prev title next',
right: ''
},
timezone: 'local',
defaultView: 'agendaWeek'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.js"></script>
<div id="fullCal"></div>
Best Answer
Yes, you can do it with
eventRender. You'll have to find thetdthat contains that event. If you inspect the fullCalendar, you'll note thetdshave adata-dateattribute for that particular day. That is how we will find thetdthat has an event in it so we can change the background color to red, specifically using:In this example, the first line in
eventRenderuses moment to format the event start date into the format needed to match thedata-dateattribute value. The second line finds atdwith thedata-dateattribute having a value ofdataToFindand then adds a class we make up calledactiveDay, assuming you add something like this to your head/stylesheet: