_global-rrule.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../packages/common/main.css' rel='stylesheet' />
  6. <link href='../packages/daygrid/main.css' rel='stylesheet' />
  7. <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/es5/rrule.js'></script>
  8. <script src='../packages/core/main.global.js'></script>
  9. <script src='../packages/daygrid/main.global.js'></script>
  10. <script src='../packages/rrule/main.global.js'></script>
  11. <script>
  12. document.addEventListener('DOMContentLoaded', function() {
  13. var calendarEl = document.getElementById('calendar');
  14. var calendar = new FullCalendar.Calendar(calendarEl, {
  15. initialDate: '2020-09-12',
  16. editable: true,
  17. events: [
  18. {
  19. title: 'rrule event',
  20. rrule: {
  21. dtstart: '2020-09-09T13:00:00',
  22. // until: '2020-09-01',
  23. freq: 'weekly'
  24. },
  25. duration: '02:00'
  26. }
  27. ],
  28. eventClick: function(arg) {
  29. if (confirm('delete event?')) {
  30. arg.event.remove()
  31. }
  32. }
  33. });
  34. calendar.render();
  35. });
  36. </script>
  37. <style>
  38. body {
  39. margin: 40px 10px;
  40. padding: 0;
  41. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  42. font-size: 14px;
  43. }
  44. #calendar {
  45. max-width: 900px;
  46. margin: 0 auto;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <div id='calendar'></div>
  52. </body>
  53. </html>