1 files changed, 22 insertions, 30 deletions
diff --git a/library/fullcalendar/examples/background-events.html b/library/fullcalendar/examples/background-events.html
index 307966dcc..fd36fde4c 100644
--- a/library/fullcalendar/examples/background-events.html
+++ b/library/fullcalendar/examples/background-events.html
@@ -2,80 +2,72 @@
 <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 calendarEl = document.getElementById('calendar');
 
     var calendar = new FullCalendar.Calendar(calendarEl, {
-      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
-      header: {
+      headerToolbar: {
         left: 'prev,next today',
         center: 'title',
         right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
       },
-      defaultDate: '2020-05-12',
+      initialDate: '2020-09-12',
       navLinks: true, // can click day/week names to navigate views
       businessHours: true, // display business hours
       editable: true,
+      selectable: true,
       events: [
         {
           title: 'Business Lunch',
-          start: '2020-05-03T13:00:00',
+          start: '2020-09-03T13:00:00',
           constraint: 'businessHours'
         },
         {
           title: 'Meeting',
-          start: '2020-05-13T11:00:00',
+          start: '2020-09-13T11:00:00',
           constraint: 'availableForMeeting', // defined below
           color: '#257e4a'
         },
         {
           title: 'Conference',
-          start: '2020-05-18',
-          end: '2020-05-20'
+          start: '2020-09-18',
+          end: '2020-09-20'
         },
         {
           title: 'Party',
-          start: '2020-05-29T20:00:00'
+          start: '2020-09-29T20:00:00'
         },
 
         // areas where "Meeting" must be dropped
         {
           groupId: 'availableForMeeting',
-          start: '2020-05-11T10:00:00',
-          end: '2020-05-11T16:00:00',
-          rendering: 'background'
+          start: '2020-09-11T10:00:00',
+          end: '2020-09-11T16:00:00',
+          display: 'background'
         },
         {
           groupId: 'availableForMeeting',
-          start: '2020-05-13T10:00:00',
-          end: '2020-05-13T16:00:00',
-          rendering: 'background'
+          start: '2020-09-13T10:00:00',
+          end: '2020-09-13T16:00:00',
+          display: 'background'
         },
 
         // red areas where no events can be dropped
         {
-          start: '2020-05-24',
-          end: '2020-05-28',
+          start: '2020-09-24',
+          end: '2020-09-28',
           overlap: false,
-          rendering: 'background',
+          display: 'background',
           color: '#ff9f89'
         },
         {
-          start: '2020-05-06',
-          end: '2020-05-08',
+          start: '2020-09-06',
+          end: '2020-09-08',
           overlap: false,
-          rendering: 'background',
+          display: 'background',
           color: '#ff9f89'
         }
       ]
@@ -95,7 +87,7 @@
   }
 
   #calendar {
-    max-width: 900px;
+    max-width: 1100px;
     margin: 0 auto;
   }