external-dragging-2cals.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <script src='../dist/index.global.js'></script>
  6. <script>
  7. document.addEventListener('DOMContentLoaded', function() {
  8. var srcCalendarEl = document.getElementById('source-calendar');
  9. var destCalendarEl = document.getElementById('destination-calendar');
  10. var srcCalendar = new FullCalendar.Calendar(srcCalendarEl, {
  11. editable: true,
  12. initialDate: '2023-01-12',
  13. events: [
  14. {
  15. title: 'event1',
  16. start: '2023-01-11T10:00:00',
  17. end: '2023-01-11T16:00:00'
  18. },
  19. {
  20. title: 'event2',
  21. start: '2023-01-13T10:00:00',
  22. end: '2023-01-13T16:00:00'
  23. }
  24. ],
  25. eventLeave: function(info) {
  26. console.log('event left!', info.event);
  27. }
  28. });
  29. var destCalendar = new FullCalendar.Calendar(destCalendarEl, {
  30. initialDate: '2023-01-12',
  31. editable: true,
  32. droppable: true, // will let it receive events!
  33. eventReceive: function(info) {
  34. console.log('event received!', info.event);
  35. }
  36. });
  37. srcCalendar.render();
  38. destCalendar.render();
  39. });
  40. </script>
  41. <style>
  42. body {
  43. margin: 20px 0 0 20px;
  44. font-size: 14px;
  45. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  46. }
  47. #source-calendar,
  48. #destination-calendar {
  49. float: left;
  50. width: 600px;
  51. margin: 0 20px 20px 0;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div id='source-calendar'></div>
  57. <div id='destination-calendar'></div>
  58. </body>
  59. </html>