stacking.html 1.4 KB

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