FullCalendar: Change agendaDay background-color

Question

While I have seen this question asked, I haven\'t seen the answer. I just want to be able to color the background-color of the TD from a certain ra

Answer 1

I wrote some simple annotation support to do this kind of feature, it can be found from

https://github.com/elhigu/fullcalendar

Hopefully it gets to be merged to official branch at some point

Annotations can be added like this:

    $('#calendar').fullCalendar({
        ....
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            }
        ],
        annotations: [{
                start: new Date(y, m, d, 13, 0),
                end: new Date(y, m, d, 15, 30),
                title: 'My 1st annotation', // optional
                cls: 'open', // optional
                color: '#777777', // optional
                background: '#eeeeff' // optional
            }, { next annotation }, ...]        
    });

})

Full example how to use the annotations can be found here: https://github.com/elhigu/fullcalendar/blob/master/demos/annotations.html

Answer 2

Here is a quick and dirty proof-of-concept that works on the latest version 'agenda-views.html' demo file in week view. It requires datejs with time.js (for TimeSpan) and does not currently work with scrolling, but could easily be tweaked. Also see the full page gist: https://gist.github.com/3005635

var resAvail = [
    {
        DayOfWeek: 0,
        Start: new Date(y, m, d, 10, 0),
        End: new Date(y, m, d, 17, 30)
    },
    {
        DayOfWeek: 1,
        Start: new Date(y, m, d, 9, 0),
        End: new Date(y, m, d, 19, 30)
    },
    {
        DayOfWeek: 4,
        Start: new Date(y, m, d, 12, 0),
        End: new Date(y, m, d, 20, 00)
    }
]

var view = calendar.fullCalendar('getView');
var slotHeight = view.getSlotHeight();
var slotMins = calendar.fullCalendar('option', 'slotMinutes');
var minTime = calendar.fullCalendar('option', 'minTime');
var slotTop = $('.fc-agenda-slots').offset().top - $('.fc-agenda-days').offset().top;

// rip through days of week
for (i = 0; i < 7; i++) {
    for (r = 0; r < resAvail.length; r++) {
        var currentRes = resAvail[r];
        if (currentRes.DayOfWeek == i) {
            addAvailBlock(currentRes);
        }
    }
}

function addAvailBlock(currentRes) {
    var dayColumn = getDayColumn(i);
    var $availBlock = $('<div class="avail-block"></div>');
    dayColumn.append($availBlock);
    $availBlock.css('width', $availBlock.parent().css('width'));

    // Where we start the availability block
    var dayStart = Date.parse(currentRes.Start.toString('MM/dd/yyyy') + ' ' + minTime);
    var startOffsetSpan = new TimeSpan(currentRes.Start - dayStart);
    var startOffsetMins = startOffsetSpan.getMinutes() + (startOffsetSpan.getHours() * 60);
    var startOffsetSlots = startOffsetMins / slotMins;
    var startOffsetHeight = startOffsetSlots * slotHeight;

    var blockSpan = new TimeSpan(currentRes.End - currentRes.Start);
    var blockMins = blockSpan.getMinutes() + (blockSpan.getHours() * 60);
    var blockSlots = blockMins / slotMins;
    var blockHeight = blockSlots * slotHeight;
    $availBlock.css('top', slotTop + startOffsetHeight).css('height', blockHeight);
}

function getDayColumn(dayOfWeek) {
    switch (dayOfWeek) {
        case 0:
            return $('.fc-sun');
        case 1:
            return $('.fc-mon');
        case 2:
            return $('.fc-tue');
        case 3:
            return $('.fc-wed');
        case 4:
            return $('.fc-thu');
        case 5:
            return $('.fc-fri');
        case 6:
            return $('.fc-sat');
    }
}

Answer 3

I took the solution of @Jegatheesh and changed it to not access a global variable and use the built-in formatting. This is against 1.5.3

--- i/fullcalendar.js
+++ w/fullcalendar.js
@@ -29,6 +29,7 @@ var defaults = {
                right: 'today prev,next'
        },
        weekends: true,
+       holidays: [],

        // editing
        //editable: false,
@@ -2301,8 +2302,11 @@ function BasicView(element, calendar, viewName) {
                        }
                        if (+date == +today) {
                                cell.addClass(tm + '-state-highlight fc-today');
+                               cell.removeClass(tm + '-holiday');
+                       }else if ($.inArray(formatDate(date, 'yyyy-MM-dd'), calendar.options.holidays) != -1) {
+                               cell.addClass(tm + '-holiday');
                        }else{
-                               cell.removeClass(tm + '-state-highlight fc-today');
+                               cell.removeClass(tm + '-state-highlight fc-today ' + tm + '-holiday');
                        }
                        cell.find('div.fc-day-number').text(date.getDate());
                        if (dowDirty) {

It introduces the fc-holiday css class on the td element.

Performanced could be improved if we format the holidays array items into a timestamp and then call $.inArray(+date, calendar.options.holidays) instead.

Answer 4

here is the feature request for your first question: http://code.google.com/p/fullcalendar/issues/detail?id=144 make sure to star it to receive updates. thanks

Answer 5

I need this feature in a project I am working now. This is a school project where I have to highlight the background with a red color if that day is a holiday event + the weekends. Please note that here all Saturdays are not holidays. Some school have holidays only on 2nd Saturday or in some schools a random Saturdays will be chosen as a working day.

Somehow I overcame this problem even though it is not an elegant solution.

On version 1.5.1 at line number 2291 add this line

var refDate = typeof(window.holidays)!='undefined'?window.holidays:[]; //Quick and dirty fix

From 2300 to 2304 replace the lines with the following code

if (+date == +today) {
    cell.addClass(tm + '-state-highlight fc-today');
}else if($.inArray(+date, refDate)!=-1){ //Added by me
    cell.addClass(tm + '-state-error');  //Added by me
}else{
    cell.removeClass(tm + '-state-highlight fc-today');
    cell.removeClass(tm + '-state-error'); //Added by me
}

Before calling the full calender, you need to create an array of dates converted into js date objects then converted into long integer by adding a + symbol in front of it, like this

var holidayArray = ['2011-06-26','2011-07-03','2011-07-10','2011-07-17','2011-07-24','2011-07-31'];
    window.holidays = [];
    for(var i=0; i<holidayArray.length;i++){
        holidays.push(+(mysqlDateToJSDate(holidayArray[i])));
    }

Finally I found a js function which converts mysql dates into js date objects.

function mysqlDateToJSDate(date) {
    var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9])$/;
    var parts=date.replace(regex,"$1 $2 $3").split(' ');
    return new Date(parts[0],parts[1]-1,parts[2],0,0,0);
}

After calling the full calendar, don't forget to delete the global variable.

I know that creating a global variable is not a nice thing. But considering the full calendar is very active with frequent bug fixing and new features, I dont want to meddle too much into the code. I don't know how to pass the variable in as an option and easily get it where I want.

This has been done only on month view. We need to do the same on other views too...

Can't post the preview but you can see it here.

Answer 6

since version 2.2, you can use Background Events

$('#calendar').fullCalendar({
    defaultDate: '2014-11-10',
    defaultView: 'agendaWeek',
    events: [
        {
            start: '2014-11-10T10:00:00',
            end: '2014-11-10T16:00:00',
            rendering: 'background'
        }
    ]
});