123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset='utf-8' />
- <link href='../packages/core/main.css' rel='stylesheet' />
- <link href='../packages/daygrid/main.css' rel='stylesheet' />
- <link href='../packages/timegrid/main.css' rel='stylesheet' />
- <link href='../packages/list/main.css' rel='stylesheet' />
- <script src='../packages/core/main.js'></script>
- <script src='../packages/interaction/main.js'></script>
- <script src='../packages/daygrid/main.js'></script>
- <script src='../packages/timegrid/main.js'></script>
- <script src='../packages/list/main.js'></script>
- <script>
-
- document.addEventListener('DOMContentLoaded', function() {
- var Calendar = FullCalendar.Calendar;
- var Draggable = FullCalendarInteraction.Draggable
-
- /* initialize the external events
- -----------------------------------------------------------------*/
-
- var containerEl = document.getElementById('external-events-list');
- new Draggable(containerEl, {
- itemSelector: '.fc-event',
- eventData: function(eventEl) {
- return {
- title: eventEl.innerText.trim()
- }
- }
- });
-
- //// the individual way to do it
- // var containerEl = document.getElementById('external-events-list');
- // var eventEls = Array.prototype.slice.call(
- // containerEl.querySelectorAll('.fc-event')
- // );
- // eventEls.forEach(function(eventEl) {
- // new Draggable(eventEl, {
- // eventData: {
- // title: eventEl.innerText.trim(),
- // }
- // });
- // });
-
- /* initialize the calendar
- -----------------------------------------------------------------*/
-
- var calendarEl = document.getElementById('calendar');
- var calendar = new Calendar(calendarEl, {
- plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
- header: {
- left: 'prev,next today',
- center: 'title',
- right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
- },
- editable: true,
- droppable: true, // this allows things to be dropped onto the calendar
- drop: function(arg) {
- // is the "remove after drop" checkbox checked?
- if (document.getElementById('drop-remove').checked) {
- // if so, remove the element from the "Draggable Events" list
- arg.draggedEl.parentNode.removeChild(arg.draggedEl);
- }
- }
- });
- calendar.render();
-
- });
-
- </script>
- <style>
-
- body {
- margin-top: 40px;
- font-size: 14px;
- font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
- }
-
- #wrap {
- width: 1100px;
- margin: 0 auto;
- }
-
- #external-events {
- float: left;
- width: 150px;
- padding: 0 10px;
- border: 1px solid #ccc;
- background: #eee;
- text-align: left;
- }
-
- #external-events h4 {
- font-size: 16px;
- margin-top: 0;
- padding-top: 1em;
- }
-
- #external-events .fc-event {
- margin: 10px 0;
- cursor: pointer;
- }
-
- #external-events p {
- margin: 1.5em 0;
- font-size: 11px;
- color: #666;
- }
-
- #external-events p input {
- margin: 0;
- vertical-align: middle;
- }
-
- #calendar {
- float: right;
- width: 900px;
- }
-
- </style>
- </head>
- <body>
- <div id='wrap'>
-
- <div id='external-events'>
- <h4>Draggable Events</h4>
-
- <div id='external-events-list'>
- <div class='fc-event'>My Event 1</div>
- <div class='fc-event'>My Event 2</div>
- <div class='fc-event'>My Event 3</div>
- <div class='fc-event'>My Event 4</div>
- <div class='fc-event'>My Event 5</div>
- </div>
-
- <p>
- <input type='checkbox' id='drop-remove' />
- <label for='drop-remove'>remove after drop</label>
- </p>
- </div>
-
- <div id='calendar'></div>
-
- <div style='clear:both'></div>
-
- </div>
- </body>
- </html>
|