basic-views.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../fullcalendar.css' rel='stylesheet' />
  6. <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
  7. <script src='../lib/moment.min.js'></script>
  8. <script src='../lib/jquery.min.js'></script>
  9. <script src='../lib/jquery-ui.custom.min.js'></script>
  10. <script src='../fullcalendar.min.js'></script>
  11. <script>
  12. $(document).ready(function() {
  13. $('#calendar').fullCalendar({
  14. header: {
  15. left: 'prev,next today',
  16. center: 'title',
  17. right: 'month,basicWeek,basicDay'
  18. },
  19. defaultDate: '2014-06-12',
  20. editable: true,
  21. events: [
  22. {
  23. title: 'All Day Event',
  24. start: '2014-06-01'
  25. },
  26. {
  27. title: 'Long Event',
  28. start: '2014-06-07',
  29. end: '2014-06-10'
  30. },
  31. {
  32. id: 999,
  33. title: 'Repeating Event',
  34. start: '2014-06-09T16:00:00'
  35. },
  36. {
  37. id: 999,
  38. title: 'Repeating Event',
  39. start: '2014-06-16T16:00:00'
  40. },
  41. {
  42. title: 'Meeting',
  43. start: '2014-06-12T10:30:00',
  44. end: '2014-06-12T12:30:00'
  45. },
  46. {
  47. title: 'Lunch',
  48. start: '2014-06-12T12:00:00'
  49. },
  50. {
  51. title: 'Birthday Party',
  52. start: '2014-06-13T07:00:00'
  53. },
  54. {
  55. title: 'Click for Google',
  56. url: 'http://google.com/',
  57. start: '2014-06-28'
  58. }
  59. ]
  60. });
  61. });
  62. </script>
  63. <style>
  64. body {
  65. margin: 0;
  66. padding: 0;
  67. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  68. font-size: 14px;
  69. }
  70. #calendar {
  71. width: 900px;
  72. margin: 40px auto;
  73. }
  74. </style>
  75. </head>
  76. <body>
  77. <div id='calendar'></div>
  78. </body>
  79. </html>