sticky header example

fullcalendar · Apr 10, 2020 · ba1602d · ba1602d
1 parent bebfa2b
commit ba1602d
Showing 1 changed file with 74 additions and 0 deletions.
diff --git a/examples/list-sticky-header.html b/examples/list-sticky-header.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<link href='../packages/bundle/dist/main.css' rel='stylesheet' />
+<script src='../packages/bundle/dist/main.js'></script>
+<script src='../node_modules/rrule/dist/es5/rrule.js'></script>
+<script src='../packages/bundle/dist/main.js'></script>
+<script src='../packages/bundle/dist/rrule.js'></script>
+<script>
+
+  document.addEventListener('DOMContentLoaded', function() {
+    var calendarEl = document.getElementById('calendar');
+
+    var calendar = new FullCalendar.Calendar(calendarEl, {
+      height: 'auto',
+      // stickyHeaderDates: false, // for disabling
+
+      headerToolbar: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'listDay,listWeek'
+      },
+
+      // customize the button names,
+      // otherwise they'd all just say "list"
+      views: {
+        listDay: { buttonText: 'list day' },
+        listWeek: { buttonText: 'list week' }
+      },
+
+      defaultView: 'listWeek',
+      defaultDate: '2020-02-12',
+      navLinks: true, // can click day/week names to navigate views
+      editable: true,
+      events: [
+        {
+          title: 'repeating event',
+          rrule: {
+            dtstart: '2020-02-09T13:00:00',
+            freq: 'hourly',
+            count: 50
+          },
+          duration: '00:30'
+        }
+      ]
+    });
+
+    calendar.render();
+  });
+
+</script>
+<style>
+
+  body {
+    margin: 40px 10px;
+    padding: 0;
+    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+    font-size: 14px;
+  }
+
+  #calendar {
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+</style>
+</head>
+<body>
+
+  <div id='calendar'></div>
+
+</body>
+</html>