diff options
Diffstat (limited to 'library/fullcalendar/demos/external-dragging-builtin.html')
-rw-r--r-- | library/fullcalendar/demos/external-dragging-builtin.html | 149 |
1 files changed, 0 insertions, 149 deletions
diff --git a/library/fullcalendar/demos/external-dragging-builtin.html b/library/fullcalendar/demos/external-dragging-builtin.html deleted file mode 100644 index f9471b0ef..000000000 --- a/library/fullcalendar/demos/external-dragging-builtin.html +++ /dev/null @@ -1,149 +0,0 @@ -<!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> |