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>