issue_2048.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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/jquery/dist/jquery.js'></script>
  8. <script src='../../node_modules/moment/moment.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: 'month,week,dayGridWeek,day,dayGridDay'
  17. },
  18. initialView: 'week',
  19. initialDate: '2013-08-01',
  20. scrollTime: '00:00',
  21. editable: true,
  22. events: [
  23. {
  24. title: 'All Day Event',
  25. start: '2013-08-01'
  26. }
  27. ],
  28. eventDrop: function(event, delta, revertFunc) {
  29. if (!confirm('Move event?')) {
  30. revertFunc();
  31. }
  32. else {
  33. alert(
  34. 'delta (days/hours/minutes) is ' +
  35. Math.floor(delta.asDays()) + '/' +
  36. delta.hours() + '/' +
  37. delta.minutes()
  38. );
  39. alert('allDay is ' + event.allDay);
  40. }
  41. }
  42. });
  43. });
  44. </script>
  45. <style>
  46. body {
  47. margin-top: 40px;
  48. text-align: center;
  49. font-size: 13px;
  50. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  51. }
  52. #calendar {
  53. width: 900px;
  54. margin: 0 auto;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <div id='calendar'></div>
  60. </body>
  61. </html>