basic.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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. #calendar {
  12. width: 900px;
  13. margin: 0 auto;
  14. }
  15. </style>
  16. <link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
  17. <script type='text/javascript' src='../jquery/jquery.js'></script>
  18. <script type='text/javascript' src='../jquery/ui.core.js'></script>
  19. <script type='text/javascript' src='../jquery/ui.draggable.js'></script>
  20. <script type='text/javascript' src='../fullcalendar.js'></script>
  21. <script type='text/javascript'>
  22. $(document).ready(function() {
  23. $('input').click(function() {
  24. /*$('#calendar').fullCalendar("addEvent", {
  25. id: 999,
  26. title: "Adam Shaw",
  27. start: "2009-05-18"
  28. });*/
  29. //$('#calendar').fullCalendar("removeEvent", 3);
  30. var events = $('#calendar').fullCalendar('getEventsById', 2);
  31. var ev1 = events[0];
  32. ev1.title = "yo";
  33. ev1.start = '2009-05-14';
  34. ev1.end = '2009-05-16';
  35. $('#calendar').fullCalendar('updateEvent', ev1);
  36. });
  37. var d = new Date();
  38. var y = d.getFullYear();
  39. var m = d.getMonth();
  40. $('#calendar').fullCalendar({
  41. draggable: true,
  42. events: [
  43. {
  44. id: 1,
  45. title: "Long Event",
  46. start: new Date(y, m, 6, 14, 0),
  47. end: new Date(y, m, 11)
  48. },
  49. {
  50. id: 2,
  51. title: "Repeating Event",
  52. start: new Date(y, m, 2)
  53. },
  54. {
  55. id: 2,
  56. title: "Repeating Event",
  57. start: new Date(y, m, 9)
  58. },
  59. {
  60. id: 3,
  61. title: "Meeting",
  62. start: new Date(y, m, 20, 9, 0)
  63. },
  64. {
  65. id: 4,
  66. title: "Click for Facebook",
  67. start: new Date(y, m, 27, 16),
  68. end: new Date(y, m, 29),
  69. url: "http://facebook.com/"
  70. }
  71. ]
  72. });
  73. });
  74. </script>
  75. </head>
  76. <body>
  77. <input type='button' />
  78. <div id='calendar'></div>
  79. </body>
  80. </html>