Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FullCalendar: Change agendaDay background-color

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.
like image 824
Nick-ACNB Avatar asked May 24 '10 06:05

Nick-ACNB


2 Answers

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

like image 120
arshaw Avatar answered Oct 21 '22 22:10

arshaw


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

enter image description here

like image 42
Mikael Lepistö Avatar answered Oct 21 '22 21:10

Mikael Lepistö