readme.md

#jquery-monthly-ical

Is a dynamic jquery implementation of Stefano Verna's ical jquery month calendar.

http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery

##Examples:

##Basic: Only highlights today's date. And takes today as the starting point to show the calendar.

$(document).ready(function()
{	
	$("#ical").ical();
});

##Non default startdate: Take another date as the startdate.

$(document).ready(function()
{	
	$("#ical").ical({
		startdate: new Date(2009, 11, 25) //month starts at 0 so 11 is december
	});
});

##Events: Get a coda bubble showing some event.

$(document).ready(function()
{	
	$("#ical").ical({
	
		eventdates: [{"date": "2009-03-21", "title": "My birthday", "desc": "Its my birthday!"},
				 	 {"date": "yyyy-01-01", "title": "New Year", "desc": "Its a new year!"},
				 	 {"date": "2009-mm-01", "title": "New Month", "desc": "First day of the new month!"},
				 	 {"date": "2010-mm-01", "title": "New Month", "desc": "First day of the new month!"},
				 	 {"date": "2010-09-01", "title": "Convention", "desc": "September convention."}, 
				 	 {"date": "2010-09-02", "title": "Convention", "desc": "September convention day two."}, 
				 	 {"date": "2010-mm-01", "title": "Towl", "desc": "Dont forget to bring a towl."}	
					]					
	});
});

Eventdates take a date in yyyy-mm-dd format. You can also add wildcards if you want every date to be special you can add {"date": "yyyy-mm-dd", "title": "Its allways someones birthday!", "desc": "Party"}

Hooks:

beforeDay(date) //Gets executed before each day is added to the calendar. beforeMonth(date) //Gets executed before each month is rendered. beforeYear(date)// Gets executed before the new year is rendered.

##Ajax: If you have many eventdates you may want to use ajax to load them more efficiently. Will use beforeMonth in this example, and action.php to change the eventdates.

$(document).ready(function()
{	
	$("#ical").ical({
		beforeMonth:function(date)
		{
			$.ajax({
				type: "GET",
				url: "action.php",
				dataType: "json",
				data: "date="+date,
				async: false, //stop rendering the calender until eventdates is changed.
				success: function(json){
				    $.fn.ical.changeEventDates(json); //this function changes the eventdates
				}   
			})
		}	
	});
});

##Sunday You can also set the start of the week on Sunday:

$(document).ready(function()
{	
	$("#ical").ical({
		startOnSunday: true,
		daynames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
	});
});

##More options You can also use some other options. daynames and monthnames could be used for translations.

$(document).ready(function(){
    $('#ical').ical({
        daynames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'], //default short names for the days of the week
        monthnames: ['January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        displayDaysInLastRow: true, // Boolean. Display or not the week days in the last row
    });
});