json.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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. <style type='text/css'>
  5. body {
  6. margin-top: 40px;
  7. text-align: center;
  8. font-size: 14px;
  9. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  10. }
  11. #loading {
  12. position: absolute;
  13. top: 5px;
  14. right: 5px;
  15. }
  16. #calendar {
  17. width: 900px;
  18. margin: 0 auto;
  19. }
  20. </style>
  21. <link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
  22. <script type='text/javascript' src='../jquery/jquery.js'></script>
  23. <script type='text/javascript' src='../jquery/ui.core.js'></script>
  24. <script type='text/javascript' src='../jquery/ui.draggable.js'></script>
  25. <script type='text/javascript' src='../fullcalendar.js'></script>
  26. <script type='text/javascript'>
  27. $(document).ready(function() {
  28. $('#calendar').fullCalendar({
  29. draggable: true,
  30. events: "json_events.php",
  31. eventDrop: function(event, delta) {
  32. alert(event.title + ' was moved ' + delta + ' days\n' +
  33. '(should probably update your database)');
  34. },
  35. loading: function(bool) {
  36. if (bool) $('#loading').show();
  37. else $('#loading').hide();
  38. }
  39. });
  40. });
  41. </script>
  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>