list-view.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../../dist/fullcalendar.css' rel='stylesheet' />
  6. <link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
  7. <script src='../../node_modules/moment/moment.js'></script>
  8. <script src='../../node_modules/jquery/dist/jquery.js'></script>
  9. <script src='../../dist/fullcalendar.js'></script>
  10. <script>
  11. $(document).ready(function() {
  12. $('#calendar').fullCalendar({
  13. headerToolbar: {
  14. left: 'prev,next today',
  15. center: 'title',
  16. right: 'listMonth,month,week'
  17. },
  18. initialView: 'listMonth',
  19. initialDate: '2014-06-12',
  20. editable: true,
  21. eventSources: [
  22. {
  23. color: 'green',
  24. events: [
  25. {
  26. title: 'Click for Google',
  27. url: 'http://google.com/',
  28. start: '2014-06-01'
  29. },
  30. {
  31. id: 'goog-window-1',
  32. title: 'Click for Google, new window 1',
  33. url: 'http://google.com/',
  34. start: '2014-06-01'
  35. },
  36. {
  37. id: 'goog-window-2',
  38. title: 'Click for Google, new window 2',
  39. url: 'http://google.com/',
  40. start: '2014-06-01'
  41. }
  42. ]
  43. },
  44. {
  45. events: [
  46. {
  47. title: 'Event With Color',
  48. color: 'red',
  49. start: '2014-06-02'
  50. },
  51. {
  52. title: 'All Day Event',
  53. start: '2014-06-02'
  54. },
  55. {
  56. title: 'Long Event',
  57. start: '2014-06-07',
  58. end: '2014-06-10'
  59. },
  60. {
  61. groupId: 999,
  62. title: 'Repeating Event',
  63. start: '2014-06-09T16:00:00'
  64. },
  65. {
  66. groupId: 999,
  67. title: 'Repeating Event',
  68. start: '2014-06-16T16:00:00'
  69. },
  70. {
  71. title: 'Meeting',
  72. start: '2014-06-12T10:30:00',
  73. end: '2014-06-12T12:30:00'
  74. },
  75. {
  76. title: 'Lunch',
  77. start: '2014-06-12T12:00:00'
  78. },
  79. {
  80. title: 'Birthday Party',
  81. start: '2014-06-13T07:00:00'
  82. }
  83. ]
  84. }
  85. ],
  86. eventClick: function(event, jsEvent) {
  87. console.log('eventClick', event.title);
  88. if (event.id === 'goog-window-1') {
  89. window.open(event.url);
  90. return false;
  91. }
  92. else if (event.id === 'goog-window-2') {
  93. jsEvent.preventDefault();
  94. window.open(event.url);
  95. }
  96. },
  97. eventMouseEnter: function(arg) {
  98. console.log('eventMouseEnter', arg.event.title);
  99. },
  100. eventMouseLeave: function(arg) {
  101. console.log('eventMouseLeave', arg.event.title);
  102. }
  103. });
  104. });
  105. </script>
  106. <style>
  107. body {
  108. margin: 0;
  109. padding: 0;
  110. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  111. font-size: 14px;
  112. }
  113. #calendar {
  114. width: 900px;
  115. margin: 40px auto;
  116. }
  117. </style>
  118. </head>
  119. <body>
  120. <div id='calendar'></div>
  121. </body>
  122. </html>