stacking.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel='stylesheet' href='../build/out/fullcalendar/fullcalendar.css' />
  5. <link rel='stylesheet' href='../build/out/fullcalendar/fullcalendar.print.css' media='print' />
  6. <script src='../build/deps.js'></script>
  7. <script src='../build/out/fullcalendar/fullcalendar.js'></script>
  8. <script>
  9. $(document).ready(function() {
  10. var date = new Date();
  11. var d = date.getDate();
  12. var m = date.getMonth();
  13. var y = date.getFullYear();
  14. $('#calendar').fullCalendar({
  15. header: {
  16. left: 'prev,next today',
  17. center: 'title',
  18. right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
  19. },
  20. editable: true,
  21. isRTL: false,
  22. year: 2010,
  23. month: 10,
  24. date: 14,
  25. events: [
  26. {
  27. title: 'event1',
  28. start: '2010-11-15',
  29. end: '2010-11-19'
  30. },
  31. {
  32. title: 'event2 with a really long title that wraps',
  33. start: '2010-11-15'
  34. },
  35. {
  36. title: 'event3',
  37. start: '2010-11-17'
  38. },
  39. {
  40. title: 'event4',
  41. start: '2010-11-18',
  42. end: '2010-11-19'
  43. },
  44. {
  45. title: 'event5',
  46. start: '2010-11-18'
  47. }
  48. ]
  49. });
  50. });
  51. </script>
  52. <style>
  53. body {
  54. margin-top: 40px;
  55. text-align: center;
  56. font-size: 13px;
  57. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  58. }
  59. #calendar {
  60. width: 900px;
  61. margin: 0 auto;
  62. }
  63. </style>
  64. </head>
  65. <body>
  66. <div id='calendar'></div>
  67. </body>
  68. </html>