Keine Beschreibung

external-dragging-builtin.html 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  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. <link href='../packages/timegrid/main.css' rel='stylesheet' />
  8. <link href='../packages/list/main.css' rel='stylesheet' />
  9. <script src='../packages/core/main.js'></script>
  10. <script src='../packages/interaction/main.js'></script>
  11. <script src='../packages/daygrid/main.js'></script>
  12. <script src='../packages/timegrid/main.js'></script>
  13. <script src='../packages/list/main.js'></script>
  14. <script>
  15. document.addEventListener('DOMContentLoaded', function() {
  16. var Calendar = FullCalendar.Calendar;
  17. var Draggable = FullCalendarInteraction.Draggable
  18. /* initialize the external events
  19. -----------------------------------------------------------------*/
  20. var containerEl = document.getElementById('external-events-list');
  21. new Draggable(containerEl, {
  22. itemSelector: '.fc-event',
  23. eventData: function(eventEl) {
  24. return {
  25. title: eventEl.innerText.trim()
  26. }
  27. }
  28. });
  29. //// the individual way to do it
  30. // var containerEl = document.getElementById('external-events-list');
  31. // var eventEls = Array.prototype.slice.call(
  32. // containerEl.querySelectorAll('.fc-event')
  33. // );
  34. // eventEls.forEach(function(eventEl) {
  35. // new Draggable(eventEl, {
  36. // eventData: {
  37. // title: eventEl.innerText.trim(),
  38. // }
  39. // });
  40. // });
  41. /* initialize the calendar
  42. -----------------------------------------------------------------*/
  43. var calendarEl = document.getElementById('calendar');
  44. var calendar = new Calendar(calendarEl, {
  45. plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
  46. header: {
  47. left: 'prev,next today',
  48. center: 'title',
  49. right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  50. },
  51. editable: true,
  52. droppable: true, // this allows things to be dropped onto the calendar
  53. drop: function(arg) {
  54. // is the "remove after drop" checkbox checked?
  55. if (document.getElementById('drop-remove').checked) {
  56. // if so, remove the element from the "Draggable Events" list
  57. arg.draggedEl.parentNode.removeChild(arg.draggedEl);
  58. }
  59. }
  60. });
  61. calendar.render();
  62. });
  63. </script>
  64. <style>
  65. body {
  66. margin-top: 40px;
  67. font-size: 14px;
  68. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  69. }
  70. #wrap {
  71. width: 1100px;
  72. margin: 0 auto;
  73. }
  74. #external-events {
  75. float: left;
  76. width: 150px;
  77. padding: 0 10px;
  78. border: 1px solid #ccc;
  79. background: #eee;
  80. text-align: left;
  81. }
  82. #external-events h4 {
  83. font-size: 16px;
  84. margin-top: 0;
  85. padding-top: 1em;
  86. }
  87. #external-events .fc-event {
  88. margin: 10px 0;
  89. cursor: pointer;
  90. }
  91. #external-events p {
  92. margin: 1.5em 0;
  93. font-size: 11px;
  94. color: #666;
  95. }
  96. #external-events p input {
  97. margin: 0;
  98. vertical-align: middle;
  99. }
  100. #calendar {
  101. float: right;
  102. width: 900px;
  103. }
  104. </style>
  105. </head>
  106. <body>
  107. <div id='wrap'>
  108. <div id='external-events'>
  109. <h4>Draggable Events</h4>
  110. <div id='external-events-list'>
  111. <div class='fc-event'>My Event 1</div>
  112. <div class='fc-event'>My Event 2</div>
  113. <div class='fc-event'>My Event 3</div>
  114. <div class='fc-event'>My Event 4</div>
  115. <div class='fc-event'>My Event 5</div>
  116. </div>
  117. <p>
  118. <input type='checkbox' id='drop-remove' />
  119. <label for='drop-remove'>remove after drop</label>
  120. </p>
  121. </div>
  122. <div id='calendar'></div>
  123. <div style='clear:both'></div>
  124. </div>
  125. </body>
  126. </html>