Sin descripción

rrule.html 1.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../packages/core/main.css' rel='stylesheet' />
  6. <link href='../packages/daygrid/main.css' rel='stylesheet' />
  7. <link href='../packages/timegrid/main.css' rel='stylesheet' />
  8. <link href='../packages/list/main.css' rel='stylesheet' />
  9. <script src='../vendor/rrule.js'></script>
  10. <script src='../packages/core/main.js'></script>
  11. <script src='../packages/interaction/main.js'></script>
  12. <script src='../packages/daygrid/main.js'></script>
  13. <script src='../packages/timegrid/main.js'></script>
  14. <script src='../packages/list/main.js'></script>
  15. <script src='../packages/rrule/main.js'></script>
  16. <script>
  17. document.addEventListener('DOMContentLoaded', function() {
  18. var calendarEl = document.getElementById('calendar');
  19. var calendar = new FullCalendar.Calendar(calendarEl, {
  20. plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'rrule' ],
  21. header: {
  22. left: 'prev,next today',
  23. center: 'title',
  24. right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
  25. },
  26. defaultDate: '2019-08-12',
  27. editable: true,
  28. events: [
  29. {
  30. title: 'rrule event',
  31. rrule: {
  32. dtstart: '2019-08-09T13:00:00',
  33. // until: '2019-08-01',
  34. freq: 'weekly'
  35. },
  36. duration: '02:00'
  37. }
  38. ],
  39. eventClick: function(arg) {
  40. if (confirm('delete event?')) {
  41. arg.event.remove()
  42. }
  43. }
  44. });
  45. calendar.render();
  46. });
  47. </script>
  48. <style>
  49. body {
  50. margin: 40px 10px;
  51. padding: 0;
  52. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  53. font-size: 14px;
  54. }
  55. #calendar {
  56. max-width: 900px;
  57. margin: 0 auto;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div id='calendar'></div>
  63. </body>
  64. </html>