FullCalendar: Change agendaDay background-color

Asked 2010-05-24T06:08:30.703

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 range..

Say I have my calendar that has slot minutes every 15 minutes and from 9am to 9pm, I would like to only color differently 10am to 3pm.

This information would be coming from a feed but that is not an issue. I haven't found the TDs relating to a set time inside the calendar. Perhaps I missed something? :) I am rather new to jQuery and fullCalendar.

Also, another quick question that is unrelated to the main one:

Is it possible from an event handler to get the id of the calendar that launched it? I have multiple calendars on my page to simulate something like a Gantt view. This will let me be able to fetch the right feed and populate the right events.

javascript jquery fullcalendar

Edit Report

2 Answers

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.

answered 2012-05-27T12:52:22.160

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)


                        
                        
                            answered 2012-06-27T17:50:19.153



        
        
            Your Answer