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