<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type='text/javascript' src='loader.js'></script> <script type='text/javascript'> var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $(document).ready(function() { $('#calendar').fullCalendar({ //weekends: false, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,basicWeek,agendaDay,basicDay' }, editable: true, weekMode: 'variable', viewDisplay: function(view) { console.log('viewDisplay'); console.log(view.start + ' - ' + view.end); console.log(view.visStart + ' - ' + view.visEnd); //console.log(view); //console.log(this); }, //loading: // see sources.html windowResize: function(view) { console.log('windowResize - ' + view.title); //console.log(this); }, minTime: '5', maxTime: '21:30', dayClick: function(dayDate, allDay, ev, view) { alert(dayDate); //console.log('dayClick - ' + dayDate + ', allDay:' + allDay + ' - ' + view.title); //console.log(ev); //console.log(this); }, eventRender: function(event, element, view) { if (event.id == 888) { return false; } else if (event.id == 777) { return $("<div style='background:green'/>").text(event.title); } else if (event.id == 999) { element.css('border-color', 'red'); //console.log('renderEvent (' + event.title + ') - ' + view.title); } }, eventAfterRender: function(event, element, view) { //console.log('after render for "' + event.title + '":'); //console.log(element); }, eventClick: function(event, jsEvent, view) { console.log('EVENT CLICK ' + event.title); //console.log(jsEvent); //console.log(view); //console.log(this); //return false; }, /* eventMouseover: function(event, jsEvent, view) { console.log('MOUSEOVER ' + event.title); console.log(jsEvent); console.log(view); console.log(this); }, eventMouseout: function(event, jsEvent, view) { console.log('MOUSEOUT ' + event.title); console.log(jsEvent); console.log(view); console.log(this); }, */ eventDragStart: function(event, jsEvent, ui, view) { console.log('DRAG START ' + event.title); //console.log(this); }, eventDragStop: function(event, jsEvent, ui, view) { console.log('DRAG STOP ' + event.title); //console.log(this); }, eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) { console.log('DROP ' + event.title); console.log(dayDelta + ' days'); console.log(minuteDelta + ' minutes'); console.log('allday: ' + allDay); /*setTimeout(function() { revertFunc(); }, 2000);*/ //console.log(jsEvent); //console.log(ui); //console.log(view.title); //console.log(this); }, eventResizeStart: function(event, jsEvent, ui, view) { console.log('RESIZE START ' + event.title); //console.log(this); }, eventResizeStop: function(event, jsEvent, ui, view) { console.log('RESIZE STOP ' + event.title); //console.log(this); }, eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) { console.log('RESIZE!! ' + event.title); console.log(dayDelta + ' days'); console.log(minuteDelta + ' minutes'); /*setTimeout(function() { revertFunc(); }, 2000);*/ //console.log(jsEvent); //console.log(ui); //console.log(view.title); //console.log(this); }, events: [ { title: 'All Day Event', start: new Date(y, m, 1) }, { title: 'Long Event', start: new Date(y, m, d-5), end: new Date(y, m, d-2) }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d-3, 16, 0), allDay: false }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d+4, 16, 0), allDay: false }, { id: 888, title: 'Meeting', start: new Date(y, m, d, 10, 30), allDay: false }, { id: 777, title: 'Lunch', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: false }, { title: 'Birthday Party', start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false }, { title: 'Click for Google', start: new Date(y, m, 28), end: new Date(y, m, 29), url: 'http://google.com/' } ] }); }); </script> </head> <body style='font-size:12px'> <div id='calendar' style='width:75%;margin:20px auto 0;font-family:arial'></div> </body> </html>