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.html68
1 files changed, 34 insertions, 34 deletions
diff --git a/library/fullcalendar/examples/external-dragging-builtin.html b/library/fullcalendar/examples/external-dragging-builtin.html
index f9471b0ef..78fcd89f9 100644
--- a/library/fullcalendar/examples/external-dragging-builtin.html
+++ b/library/fullcalendar/examples/external-dragging-builtin.html
@@ -2,26 +2,16 @@
<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 src='../dist/index.global.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, {
+ new FullCalendar.Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
@@ -36,7 +26,7 @@
// containerEl.querySelectorAll('.fc-event')
// );
// eventEls.forEach(function(eventEl) {
- // new Draggable(eventEl, {
+ // new FullCalendar.Draggable(eventEl, {
// eventData: {
// title: eventEl.innerText.trim(),
// }
@@ -47,9 +37,8 @@
-----------------------------------------------------------------*/
var calendarEl = document.getElementById('calendar');
- var calendar = new Calendar(calendarEl, {
- plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
- header: {
+ var calendar = new FullCalendar.Calendar(calendarEl, {
+ headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
@@ -77,13 +66,10 @@
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}
- #wrap {
- width: 1100px;
- margin: 0 auto;
- }
-
#external-events {
- float: left;
+ position: fixed;
+ left: 20px;
+ top: 20px;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
@@ -98,8 +84,8 @@
}
#external-events .fc-event {
- margin: 10px 0;
- cursor: pointer;
+ margin: 3px 0;
+ cursor: move;
}
#external-events p {
@@ -113,9 +99,13 @@
vertical-align: middle;
}
+ #calendar-wrap {
+ margin-left: 200px;
+ }
+
#calendar {
- float: right;
- width: 900px;
+ max-width: 1100px;
+ margin: 0 auto;
}
</style>
@@ -127,11 +117,21 @@
<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 class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
+ <div class='fc-event-main'>My Event 1</div>
+ </div>
+ <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
+ <div class='fc-event-main'>My Event 2</div>
+ </div>
+ <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
+ <div class='fc-event-main'>My Event 3</div>
+ </div>
+ <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
+ <div class='fc-event-main'>My Event 4</div>
+ </div>
+ <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
+ <div class='fc-event-main'>My Event 5</div>
+ </div>
</div>
<p>
@@ -140,9 +140,9 @@
</p>
</div>
- <div id='calendar'></div>
-
- <div style='clear:both'></div>
+ <div id='calendar-wrap'>
+ <div id='calendar'></div>
+ </div>
</div>
</body>