jQuery FullCalendar Example using jQueryUI Themes

First I need to say what a great plugin this is! If you are like me, you first wanted to create a custom calendar that you can have total control over, but then when you look at all the work put into this one, there is no need!

Check out the jQuery Full Calendar Plugin by Adam Shaw

Some things were not as easy as I would have liked, but that’s what makes web development fun!

How To Change the Background of the Parent Table Cell

I am building a custom WordPress theme for a client at the moment and part of the design is incorporating a calendar. Here are some of the options I need on the calendar;

  • The calendar needs to be simple to understand
  • All Events are full day events that may span over a couple days
  • There are event statuses (reserved, confirmed, open)
  • The site uses jQueryUI so the calendar needs to support this

I will show you how to change the default background color of the calendar to green (open status) and then if there is an event on that given day change the color appropriately, i.e. red if the status is confirmed and orange if the status is reserved.

The problem here is that there is no documentation on the plugins site for the callback we need to use (viewDisplay). I eventually found issue 74 from the project site hosted by Google Code. The only problem with the code in this issue is that is doesn’t show you how to change the background color if you are using the jQueryUI themeroller option.

Enough talk, let’s get to the code… You need to download the plugin and make sure to call jQuery, jQueryUI (using whatever theme you like) and the full calendar files. JS/CSS and images.

function isEmpty(obj) {
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
return false;
}

return true;
}
var dateArr = [];
$(document).ready(function() {
$('#calendar').fullCalendar({
theme: true,
viewDisplay: function(view){
dateArr = [];
var today = view.start;
var viewData = $('#calendar').fullCalendar('getView');
cMonth = today.getMonth();
cYear = today.getFullYear();
$('td.ui-widget-content').each(function(){ // NEED TO MAKE SURE TO use ui-widget-content
if( $(this).hasClass('fc-today') ) {
// Let's not change anything... leave the default color for Today
} else {
$(this).css({ 'background':'none', 'background-color' : '#99FF66' }); // making default green notice that I need to make the background:none to remove the jQueryUI image bg
}
});
$('.fc-day-number').each(function(){
lDay = parseInt($(this).text());
//check if it is another month date
if($(this).parents('td').hasClass('fc-other-month'))
{
lYear = parseInt(cYear);
//if it is belong to the previous month
if(lDay>15)
{
lMonth = parseInt(cMonth) - 1;
lDate = new Date(lYear,lMonth,lDay);
dateArr.push(lDate);
}
else //belong to the next month
{
lMonth = parseInt(cMonth) + 1;
lDate = new Date(lYear,lMonth,lDay);
dateArr.push(lDate);
}
}
else
{
lMonth = parseInt(cMonth);
lDate = new Date(lYear,lMonth,lDay);
dateArr.push(lDate);
}

});
var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
// using m_names to allow us to add text in the header based on month
var thisMonthText = m_names[cMonth];
var h2Text;
if( thisMonthText == 'March' ) {
h2Text = 'March Specials Here, and Best Fishing Species for this Month';
} else {
h2Text = 'Other Specials Here, and Best Fishing Species for this Month';
}
var cTD = $('<h2>').attr('id','h2added').css('color','red').text( h2Text );
$('#h2added').remove();
$('#calendar').before(cTD);
},
lazyFetching: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
eventRender: function(event,element){
//rendering q-TIP WE can
qtipContent = '<span class="qtipDesc">'+event.description+'</span>';

//rendering color
//foreach event check each day on the calendar
for(var i in dateArr) {
if(event.end == null) {
event.end = event.start;
}
if( (dateArr[i].getTime() >= event.start.getTime())&&(dateArr[i].getTime() <= event.end.getTime()) ) {
$('.fc-day'+i).css({ 'background':'none', 'background-color' : '#FFCCCC' }).addClass('red');
// I'm adding the class of red so that we can use the event click option..
}
}
},
editable: false,
dayClick: function(date, allDay, jsEvent, view) {
if( $(this).hasClass('red') ) {
alert('Sorry this date is already taken.. :( ');
} else {
alert('Sweet, now we can take your info... :) ');
}
},
eventClick: function(calEvent, jsEvent, view) {

alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);

// change the border color just for fun
$(this).css('border-color', 'red');

},
events: "json-events.php"
});

});

Check the notes… I hope this saves you time. :D

Comments

  1. Zakir Sajib says

    Do you need full code to display just background color? or I just use following code inside the eventRender:

    //rendering color082            //foreach event check each day on the calendar
    083            for(var i in dateArr) {
    084                if(event.end == null) {
    085                    event.end = event.start;
    086                }
    087                if( (dateArr[i].getTime() >= event.start.getTime())&&(dateArr[i].getTime() <= event.end.getTime()) ) {
    088                    $('.fc-day'+i).css({ 'background':'none', 'background-color' : '#FFCCCC' }).addClass('red');
    089                    // I'm adding the class of red so that we can use the event click option..
    090                }
    091            }

  2. says

    There is two main problems
    1) in your demo Second Friday is registered with an event, now if I go to next month and click on Second Friday ( means same location on next month ) , then it display alert message ( sorry this date is already taken)
    2) if I add one event on a day then its background become changed, now if i delete that event , then it’s  background does not change back to the original and iif i click on that day to add event then it keep alerting that (sorry this date is already taken)

  3. Rizvan Bhimani says

    i want to do background color change only for event date. can any body give the code please.

  4. CJ Ramki says

    @Rizvan Bhimani,

    To do this, you need to change for this element .fc-day[data-date="Y-m-d"] ..

    In this fullcalendar plugin it will show the event date in timestamp format. So, you should get the current event date in “Y-m-d” format.

    this javascript function would return the Y-m-d formatted date of your argument date.

    function getEventDate(event) { var dateobj = event.start;
    date = dateobj.getFullYear()+'-'+dateobj.getMonth()+1+'-'+dateobj.getDate();
    return date;
    }

    then in eventRender function you can change the 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.
    for example in css,
    . orange {box-shadow:inset 0 0 10px orange}
    you can use like this.

Leave a Reply

Your email address will not be published.