<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type='text/css'> body { margin-top: 50px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #loading { position: absolute; top: 5px; right: 5px; } #calendar { width: 900px; margin: 0 auto; } </style> <link rel='stylesheet' type='text/css' href='../fullcalendar.css' /> <script type='text/javascript' src='../jquery/jquery.js'></script> <script type='text/javascript' src='../jquery/ui.core.js'></script> <script type='text/javascript' src='../jquery/ui.draggable.js'></script> <script type='text/javascript' src='../fullcalendar.js'></script> <script type='text/javascript'> $(document).ready(function() { $('#calendar').fullCalendar({ draggable: true, events: "json_events.php", eventDrop: function(event, delta) { alert(event.title + ' was moved ' + delta + ' days\n' + '(should probably update your database)'); }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); } }); }); </script> </head> <body> <div id='loading' style='display:none'>loading...</div> <div id='calendar'></div> <p>json_events.php needs to be running in the same directory.</p> </body> </html>