external-dragging-2cals.html 1.5 KB

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