Hi Guys,

I'm using the excellent fullcalender plugin. Rather than using js prompt in my script, I'd like to use content in a div that I style up with css and use some nice graphics.

I'm trying to use the fancybox plugin, can anyone please tell me how to the fancybox working and how to pass the value from fancybox to the if statment below it?



Code:
	$(document).ready(function() {
	
        var liveDate = new Date(); // current Date
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		var calendar = $('#calendar').fullCalendar({
		disableDragging: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'year'
			},
			
			selectable: true,
			selectHelper: true,

			select: function(start, end, allDay) {
			// disable booking dates in the past
			  if (liveDate > start) {
                alert('This date has been passed');
                return false;
            } else {

			// call html page in lightbox

   var fancyContent = ('<div class="header">Book the following days off</div>Start Time: </b></label>' + start + '<br>' + '<label><b>End Time: </b></label>' + end + '<br>' + '<label><a href="#">yes<a href="#">No</a></div>');
        $.fancybox({
            'content': fancyContent
        })
	
// how to get yes/ no from links to use below?
				
				if (yes) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
				} // end of if
			} // end of else
				calendar.fullCalendar('unselect');
			},
			editable: true,
			events: 'json-events.php'
			
		});
		
	});
Currently get error:

Timestamp: 07/12/2012 14:49:51
Error: TypeError: $.fancybox is not a function
Line: 39

Many thanks