CODEWITHSUNDEEP
fullcalendar
Adrian Bartholomew
Adrian Bartholomew

Reputation: 2632

FullCalendar event text colour change

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.

Upvotes: 5

Views: 23709

Answers (2)

KaraKaplan
KaraKaplan

Reputation: 798

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

Upvotes: 1

Ravi
Ravi

Reputation: 166

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/

Upvotes: 10

Related Questions