How to change event cell color in jquery fullcalendar (arshaw fullcalendar) andrey понедельник, 3 марта 2014 г. No Comment

To do this, we need to use .fc-day[data-date="Y-m-d"]

In arshaw fullcalendar they used .fc-day class for date cells. they used data attributes to store date in cell.

In this plugin event dates are stored in time stamp format. So, all we need is, change the timestamp formatted date into Y-m-d format and assign that date to .fc-day class element's data-date attribute.

don't go anywhere to find timestamp to Y-m-d format converter code.

Here I placed that code for you. You just need to enter your event in function argument. It will return date in Y-m-d format.

function getEventDate(event) { var dateobj = event.start;
date = dateobj.getFullYear()+'-'+dateobj.getMonth()+1+'-'+dateobj.getDate();
return date;
}

Then in eventRender function we can change the cell color of the event date.

eventRender: function (event, element, view) {
//to change color of the event with respect to response
$('.fc-day[data-date="' + getEventDate(event) + '"]').addClass("orange");

from the above code, you can add the class to the selected event date.

In CSS style

. orange {box-shadow:inset 0 0 10px orange}

To do this, we need to use .fc-day[data-date="Y-m-d"]

In arshaw fullcalendar they used .fc-day class for date cells. they used data attributes to store date in cell.

In this plugin event dates are stored in time stamp format. So, all we need is, change the timestamp formatted date into Y-m-d format and assign that date to .fc-day class element's data-date attribute.

don't go anywhere to find timestamp to Y-m-d format converter code.

Here I placed that code for you. You just need to enter your event in function argument. It will return date in Y-m-d format.

function getEventDate(event) { var dateobj = event.start;
date = dateobj.getFullYear()+'-'+dateobj.getMonth()+1+'-'+dateobj.getDate();
return date;
}

Then in eventRender function we can change the cell color of the event date.

eventRender: function (event, element, view) {
//to change color of the event with respect to response
$('.fc-day[data-date="' + getEventDate(event) + '"]').addClass("orange");

from the above code, you can add the class to the selected event date.

In CSS style

. orange {box-shadow:inset 0 0 10px orange}

Tweet

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: Без рубрики