FullCalendar event text colour change

Question

I added className fc-selected to [any selected day] which took care of my background colour changes for that selected cell. Thinking that I was home free and only needed to change color for the text next, I forcefully removed a few locks of hair when, only way later, did I realize that the date events are not even in the date cell but absolutely positioned above and outside of it.

How can I target the DOM of the events for a selected date in the calendar?

PS: Basically the background color for a date cell goes dark red on selection and I need the title text to temporarily change to white.

Answer 1

You can set an event's

textColor: white or #FFF

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

You can also set eventTextColor while redering event

http://arshaw.com/fullcalendar/docs/event_rendering/eventTextColor/

Answer 2

Actually, I tried many times and any variations of textColor or eventTextColor didn't worked at all. So, I tried changing color attributes manually;

.portlet.calendar .fc-event .fc-time {
    color: white;
}

.portlet.calendar .fc-event .fc-title {
    color: white;
}

By using simple javascript like this you can also set font-color of fullcalendar;

var colorStyle = document.getElementsByClassName('fc-title');

for (var i=0; i<colorStyle.length; i++) {
    colorStyle[i].style.color = 'white';
}