rrule.html 1.3 KB

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