json.html 1.4 KB

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