Question

177

How to highlight a day which has an event in FullCalendar.js?

rated 0 times [ 181] [ 4] / answers: 1 / hits: 17890 / 11 Years ago, sun, december 22, 2013, 12:00:00

I am using FullCalendar.js in my website. I have set events from backend. I want to change look of the day which has an event. In other words I need some sort of class where I have fc-day and an event in it.

My code looks like and you see it on jsFiddle:

$('#calendar').fullCalendar({

    events: [{

        title: 'event1',

        start: '2013-01-01'

    }, {

        title: 'event2',

        start: '2013-12-05',

        end: '2013-12-07'

    }, {

        title: 'event3',

        start: '2013-12-15'

    }]

})

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brynneg

Add To Favorites

Follow

Total Points: 205

Total Questions: 111

Total Answers: 112

Location: Djibouti

Member since Wed, Dec 8, 2021

3 Years ago

answered 11 Years ago daja · Accepted Answer

I could not find a desired property or method to use in the documentation of Fullcalendar.

I came up with a kind of a messy solution: adding a class by data-attributes:

function addClassByDate(date) {

    var dataAttr = getDataAttr(date);

    $([data-date=' + dataAttr + ']).addClass(hasEvent);

}



function getDataAttr(date) {

    return date.getFullYear() + - + (date.getMonth() + 1) + - + (date.getDate().toString().length === 2 ? date.getDate() : 0 + date.getDate());

};

It works fine for the settings, you've provided in your question.

The working example could be found here: http://jsfiddle.net/6NShN/9/