Нет описания

external-dragging-2cals.html 1.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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. <script src='../packages/core/main.js'></script>
  8. <script src='../packages/interaction/main.js'></script>
  9. <script src='../packages/daygrid/main.js'></script>
  10. <script>
  11. document.addEventListener('DOMContentLoaded', function() {
  12. var srcCalendarEl = document.getElementById('source-calendar');
  13. var destCalendarEl = document.getElementById('destination-calendar');
  14. var srcCalendar = new FullCalendar.Calendar(srcCalendarEl, {
  15. plugins: [ 'interaction', 'dayGrid' ],
  16. editable: true,
  17. defaultDate: '2019-08-12',
  18. events: [
  19. {
  20. title: 'event1',
  21. start: '2019-08-11T10:00:00',
  22. end: '2019-08-11T16:00:00'
  23. },
  24. {
  25. title: 'event2',
  26. start: '2019-08-13T10:00:00',
  27. end: '2019-08-13T16:00:00'
  28. }
  29. ],
  30. eventLeave: function(info) {
  31. console.log('event left!', info.event);
  32. }
  33. });
  34. var destCalendar = new FullCalendar.Calendar(destCalendarEl, {
  35. plugins: [ 'interaction', 'dayGrid' ],
  36. defaultDate: '2019-08-12',
  37. editable: true,
  38. droppable: true, // will let it receive events!
  39. eventReceive: function(info) {
  40. console.log('event received!', info.event);
  41. }
  42. });
  43. srcCalendar.render();
  44. destCalendar.render();
  45. });
  46. </script>
  47. <style>
  48. body {
  49. margin: 20px 0 0 20px;
  50. font-size: 14px;
  51. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  52. }
  53. #source-calendar,
  54. #destination-calendar {
  55. float: left;
  56. width: 600px;
  57. margin: 0 20px 20px 0;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div id='source-calendar'></div>
  63. <div id='destination-calendar'></div>
  64. </body>
  65. </html>