basic.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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='../examples/redmond/theme.css' />
  5. <script type='text/javascript' src='loader.js'></script>
  6. <script type='text/javascript'>
  7. $(document).ready(function() {
  8. var d = new Date();
  9. var y = d.getFullYear();
  10. var m = d.getMonth();
  11. $('#calendar').fullCalendar({
  12. slotMinutes: 30,
  13. //allDayHeader: false,
  14. //weekMode: 'variable',
  15. //theme: true,
  16. //firstDay: 1,
  17. //isRTL: true,
  18. editable: true,
  19. //dragOpacity: .5,
  20. defaultView: 'agendaWeek',
  21. header: {
  22. left: 'prev,next today',
  23. center: 'title',
  24. right: 'month,agendaWeek,agendaDay'
  25. },
  26. events: [
  27. {
  28. id: 1,
  29. title: "Long Event",
  30. start: new Date(y, m, 6, 14, 0),
  31. end: new Date(y, m, 11)
  32. //allDay: false
  33. },
  34. {
  35. id: 2,
  36. title: "Repeating Event111",
  37. start: new Date(y, m, 8),
  38. allDay: true
  39. },
  40. {
  41. id: 2,
  42. title: "Repeating Event222",
  43. start: new Date(y, m, 9, 5, 0),
  44. allDay: false
  45. },
  46. {
  47. id: 345,
  48. title: "Hey Hey",
  49. start: new Date(y, m, 9, 4, 0),
  50. allDay: false
  51. },
  52. {
  53. id: 3,
  54. title: "Meeting",
  55. start: new Date(y, m, 20, 9, 0),
  56. allDay: false
  57. },
  58. {
  59. id: 4,
  60. title: "Click for Facebook",
  61. start: new Date(y, m, 27, 16),
  62. end: new Date(y, m, 29),
  63. url: "http://facebook.com/",
  64. allDay: false
  65. }
  66. ],
  67. dayClick: function(date, allDay) {
  68. alert(date + ' allDay:' + allDay);
  69. }
  70. });
  71. });
  72. </script>
  73. <style type='text/css'>
  74. body {
  75. margin-top: 40px;
  76. text-align: center;
  77. font-size: 13px;
  78. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  79. }
  80. #calendar {
  81. width: 80%;
  82. margin: 0 auto;
  83. }
  84. </style>
  85. </head>
  86. <body>
  87. <div id='calendar'></div>
  88. </body>
  89. </html>