stacking.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href='../dist/fullcalendar.css' rel='stylesheet' />
  5. <link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
  6. <script src='../lib/jquery/dist/jquery.js'></script>
  7. <script src='../lib/jquery-ui/ui/jquery-ui.js'></script>
  8. <script src='../lib/moment/moment.js'></script>
  9. <script src='../dist/fullcalendar.js'></script>
  10. <script>
  11. $(document).ready(function() {
  12. var date = new Date();
  13. var d = date.getDate();
  14. var m = date.getMonth();
  15. var y = date.getFullYear();
  16. $('#calendar').fullCalendar({
  17. header: {
  18. left: 'prev,next today',
  19. center: 'title',
  20. right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
  21. },
  22. year: 2010,
  23. month: 10,
  24. date: 14,
  25. editable: true,
  26. //isRTL: true,
  27. //hiddenDays: [ 3 ],
  28. /*
  29. // check to make sure there is no empty space where event should be
  30. eventRender: function(event) {
  31. if (event.title == 'event4') {
  32. return false;
  33. }
  34. },
  35. */
  36. /*
  37. // KNOWN BUG: there shoulnd't be an empty space
  38. eventRender: function(event) {
  39. if (event.title == 'timed event 1') {
  40. return false;
  41. }
  42. },
  43. */
  44. events: [
  45. {
  46. title: 'event1',
  47. start: '2010-11-15',
  48. end: '2010-11-19'
  49. },
  50. {
  51. title: 'event2 with a really long title that wraps',
  52. start: '2010-11-15'
  53. },
  54. {
  55. title: 'event3',
  56. start: '2010-11-17'
  57. },
  58. {
  59. title: 'event4',
  60. start: '2010-11-18',
  61. end: '2010-11-19'
  62. },
  63. {
  64. title: 'event5',
  65. start: '2010-11-18'
  66. },
  67. {
  68. title: 'event6 with a long title dude',
  69. start: '2010-11-25'
  70. },
  71. {
  72. title: 'event7',
  73. start: '2010-11-26'
  74. },
  75. {
  76. title: 'timed event 1',
  77. start: '2010-11-16T08:30:00',
  78. end: '2010-11-16T16:00:00',
  79. allDay: false
  80. },
  81. {
  82. title: 'timed event 2',
  83. start: '2010-11-16T09:30:00',
  84. end: '2010-11-16T11:30:00',
  85. allDay: false
  86. },
  87. {
  88. title: 'Long Event', // this allday event should be above...
  89. start: '2010-11-22',
  90. end: '2010-11-22'
  91. },
  92. {
  93. title: 'Birthday Party', // ...this timed event
  94. start: '2010-11-22T19:00:00',
  95. end: '2010-11-22T22:30:00',
  96. allDay: false
  97. },
  98. {
  99. title: 'An event', // this should be below the allday event
  100. start: '2010-11-22T00:00:00',
  101. allDay: false
  102. }
  103. ]
  104. });
  105. });
  106. </script>
  107. <style>
  108. body {
  109. margin-top: 40px;
  110. text-align: center;
  111. font-size: 13px;
  112. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  113. }
  114. #calendar {
  115. width: 900px;
  116. margin: 0 auto;
  117. }
  118. </style>
  119. </head>
  120. <body>
  121. <div id='calendar'></div>
  122. </body>
  123. </html>