change the color of a cell in a full calendar

Question

I need to change the color of a cell of a arshaw full calendar.

My requirement is :There should be a same color for a td cell for list of holidays provided by a company. There should be a same color for a td cell for list of holidays taken by an employee.

How we can achieve this.I am able to change the color of events but not the cell.

Also If we can change the color of a day inside a cell according to holidays and leave .

Answer 1

If you are using Jquery-Ui theme you need to remove ui-widget-content class and apply your own class. In the code below i'm using a 40x100 image with purple flat color.

CSS

.holiday
{
    border:1px solid #69196c;
    background: #764ead url(holiday.png) 50% top repeat-x; 
    color: white;   
}

JS FULLCALENDAR

dayRender: function (date, cell) {

    if ($.inArray(date, holidays) >= 0) {

        // if you aren't using ui theme, just remove this line
        $(cell).removeClass('ui-widget-content');                            
        $(cell).addClass('holiday');

    }
}

Answer 2

The cells in fullCalendar are table-cells - events are rendered as floating divs on top on these cells. So let's say in the month-view, each day-cell has a class associated with it. Like "fc-sun" for Sundays, "fc-mon" for Mondays and so on. Each cell also has the day-number class associated - like "fc-day1", "fc-day2".

So, let's say you want to change the background-color of all Sundays:

.fc-sun {
  background-color: #FF0000;
  color: #FFFFFF;
}

And so on. Hope this helps.

Answer 3

eventRender: function (event, element, monthView) 
{
    if (event.title == "HOLIDAY") 
    { 
        var one_day = 1000 * 60 * 60 * 24;
        var _Diff = Math.ceil((event.start.getTime() - monthView.visStart.getTime())/(one_day));
        var dayClass = ".fc-day" + _Diff; 
        $(dayClass).addClass('holiday-color');
    }
}

Also, remember that you would need to clear these class names on month change or else they will stay the same background color for all the months.

Therefore, you might want/need to manage the navigation of the calendar manually using gotodate and then using jquery’s removeClass() selector to clear out the class names.

What you need to do is bind the click event of your fullcalendar's next and previous month buttons and do something like

$("#nextMonthBtn").click(function () {
    // current year and month should be maintained, can be a`enter code here`enter code here`ccessed on loading attribute of the fullcalendar
    //manually manage navigation`enter code here`
    $('td').removeClass('holiday-color');
    calRef.fullCalendar('gotoDate', _currentYear, _currentMonth, 1) 
});

For aditional information please refer: http://vishaljadhav.net/coloring-certain-days-when-using-full-calendar/

Answer 4

Since they've updated fullcalendar I'm posting a new solution, I know few years passed from question but I guess is better late than never :)

eventRender: function(event, element, monthView) {
     if (event.className == "holiday") {
           var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
                $('td[data-date="' + dateString + '"]').addClass('fully_colored_holiday');
           }
     }

and here is the class:

.fully_colored_holiday,
.fully_colored_holidaydiv,
.fully_colored_holidayspan{
     background:#FF8C8C !important;
}