fullCalendar hide event titles, but set cell/day background

2
votes

Using: 

* FullCalendar 2.1.1
* month view

I would like to display a mini calendar - all it shows is the day of the month - no event titles. But, on days that have events - i would like that cell to have a background color. (Sample below)

I guess via CSS i can manually hide all events using .fc-event-container {display: none;} but what code would i use to change the cell background, if an event exists? something for dayRender?

Thanks

enter image description here

2
fullcalendar
Does this help? stackoverflow.com/questions/26681896/… – Richard Löwenström
kinda. i saw that. there they are looking for a specific event/date. What i am stuck on, is how to check if a date has an event in it. – kneidels
Just go through all the events and check what events they are on.. – Richard Löwenström
got it! - pls answer this as the answer, and i will check it off. – kneidels
Meant "what day they are on". Try it yourself first, if you're still having trouble post your attempt here and I'll help you – Richard Löwenström

2 Answers

4
votes

With thanks to @Richard Hermanson, this is how to solve the issue

First we use this eventRender function to locate all events that start on a specific day, then we apply a class to the cell with that date.

eventRender: function (event, element) {
    var dataToFind = moment(event.start).format('YYYY-MM-DD');
    $("td[data-date='"+dataToFind+"']").addClass('dayWithEvent');
}

Now, we use this CSS, to hide the event titles, and to highlight the day cells - 

.dayWithEvent { background: #AB6D86; cursor: pointer;}
.fc-event-container {display: none;}
0
votes

The answer of @Kniedels does not work if you have events on multiple days.

If you have multiple days use this javascript:

eventRender: function (event, element) {
    var start = moment(event.start);
    var end = moment(event.end);
    while( start.format('YYYY-MM-DD') != end.format('YYYY-MM-DD') ){
        var dataToFind = start.format('YYYY-MM-DD');
        $("td[data-date='"+dataToFind+"']").addClass('dayWithEvent');
        start.add(1, 'd');
    }

}

It uses the same principle as Kniedels', so you must use the same css.