CODEWITHSUNDEEP
fullcalendar
kneidels
kneidels

Reputation: 914

fullCalendar hide event titles, but set cell/day background

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

Upvotes: 2

Views: 5030

Answers (2)

Alexej
Alexej

Reputation: 630

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.

Upvotes: 0

kneidels
kneidels

Reputation: 914

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

Upvotes: 4

Related Questions