fullCalendar

HTML

<script src="http://www.kula.org.uk/publicscripts/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://www.kula.org.uk/publicscripts/fullcalendar/fullcalendar.css">
<div id="calendar"></div>

JavaScript

$('#calendar').fullCalendar(
            {
             header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                    },
                eventRender: function(event, element, view)
                  {
                  element.bind('click', function()
                         {
                         var day = ($.fullCalendar.formatDate( event.start, 'dd' ));
                         var month = ($.fullCalendar.formatDate( event.start, 'MM' ));
                         var year = ($.fullCalendar.formatDate( event.start, 'yyyy' ));
                          alert(year+'-'+month+'-'+day);
                         });
                   },
             editable: true,        
              events: [
                        {
                            title  : 'event1',
                            start  : '2011-05-07'
                        },
                        {
                            title  : 'event2',
                            start  : '2011-05-10',
                            end    : '2011-05-15'
                        },
                        {
                            title  : 'event3',
                            start  : '2011-05-07 12:30:00',
                            allDay : false // will make the time show
                        }
                    ]

            });