Monday, 3 March 2014

How to change event cell color in jquery fullcalendar (arshaw fullcalendar) 1

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}

1 comment:

  1. Hi greath post! how can i disable cell without event?