stacking.html 3.0 KB

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