jQuery FullCalendar Example using jQueryUI Themes

JG Software and Consulting - IT Consulting, WordPress Support, Web Development, Web Design and SEO by Jim Gaudet

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.

View Demo Download

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"
	});

});