aboutsummaryrefslogtreecommitdiffstats
path: root/library/fullcalendar/demos/external-dragging-builtin.html
diff options
context:
space:
mode:
Diffstat (limited to 'library/fullcalendar/demos/external-dragging-builtin.html')
-rw-r--r--library/fullcalendar/demos/external-dragging-builtin.html149
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>