in react-scheduler demo, showcase printing

fullcalendar · Jul 12, 2024 · 1a0228c · 1a0228c
1 parent f01fd7d
commit 1a0228c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/examples/react-scheduler/package.json b/examples/react-scheduler/package.json
@@ -11,6 +11,7 @@
     "start": "webpack serve"
   },
   "dependencies": {
+    "@fullcalendar/adaptive": "^6.1.10",
     "@fullcalendar/core": "^6.1.10",
     "@fullcalendar/daygrid": "^6.1.10",
     "@fullcalendar/interaction": "^6.1.10",

diff --git a/examples/react-scheduler/src/DemoApp.jsx b/examples/react-scheduler/src/DemoApp.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { formatDate } from '@fullcalendar/core'
 import FullCalendar from '@fullcalendar/react'
+import adaptivePlugin from '@fullcalendar/adaptive'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import timeGridPlugin from '@fullcalendar/timegrid'
 import interactionPlugin from '@fullcalendar/interaction'
@@ -26,7 +27,13 @@ export default class DemoApp extends React.Component {
         {this.renderSidebar()}
         <div className='demo-app-main'>
           <FullCalendar
-            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, resourceTimelinePlugin]}
+            plugins={[
+              adaptivePlugin,
+              dayGridPlugin,
+              timeGridPlugin,
+              interactionPlugin,
+              resourceTimelinePlugin,
+            ]}
             headerToolbar={{
               left: 'prev,next today',
               center: 'title',
@@ -76,6 +83,9 @@ export default class DemoApp extends React.Component {
             toggle weekends
           </label>
         </div>
+        <div className='demo-app-sidebar-section'>
+          <button onClick={this.handlePrint}>Print</button>
+        </div>
         <div className='demo-app-sidebar-section'>
           <h2>All Events ({this.state.currentEvents.length})</h2>
           <ul>
@@ -121,6 +131,10 @@ export default class DemoApp extends React.Component {
     })
   }
 
+  handlePrint = () => {
+    window.print()
+  }
+
 }
 
 function renderEventContent(eventInfo) {

diff --git a/examples/react-scheduler/src/index.css b/examples/react-scheduler/src/index.css
@@ -40,6 +40,12 @@ b { /* used for event dates/times */
   border-right: 1px solid #d3e2e8;
 }
 
+@media print {
+  .demo-app-sidebar {
+    display: none;
+  }
+}
+
 .demo-app-sidebar-section {
   padding: 2em;
 }