json.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
  5. <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
  6. <script type='text/javascript' src='../jquery/jquery-1.7.1.min.js'></script>
  7. <script type='text/javascript' src='../jquery/jquery-ui-1.8.17.custom.min.js'></script>
  8. <script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>
  9. <script type='text/javascript'>
  10. $(document).ready(function() {
  11. $('#calendar').fullCalendar({
  12. editable: true,
  13. events: "json-events.php",
  14. eventDrop: function(event, delta) {
  15. alert(event.title + ' was moved ' + delta + ' days\n' +
  16. '(should probably update your database)');
  17. },
  18. loading: function(bool) {
  19. if (bool) $('#loading').show();
  20. else $('#loading').hide();
  21. }
  22. });
  23. });
  24. </script>
  25. <style type='text/css'>
  26. body {
  27. margin-top: 40px;
  28. text-align: center;
  29. font-size: 14px;
  30. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  31. }
  32. #loading {
  33. position: absolute;
  34. top: 5px;
  35. right: 5px;
  36. }
  37. #calendar {
  38. width: 900px;
  39. margin: 0 auto;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div id='loading' style='display:none'>loading...</div>
  45. <div id='calendar'></div>
  46. <p>json-events.php needs to be running in the same directory.</p>
  47. </body>
  48. </html>