---
title: "React Agenda Printing the View Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/agenda/printing-the-view"
---

# Printing the View - React Agenda demo

Print only the agenda — not the full page — using the React print add-on, with PDF export via the browser print dialog. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/agenda/printing-the-view)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/agenda/printing-the-view)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/agenda/printing-the-view)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/agenda/printing-the-view.md), [jQuery](https://demo.mobiscroll.com/jquery/agenda/printing-the-view.md), [Angular](https://demo.mobiscroll.com/angular/agenda/printing-the-view.md), [Vue](https://demo.mobiscroll.com/vue/agenda/printing-the-view.md)

## Description

The agenda includes print optimized styling through the print add-on. This needs to be added to the download package or installed separately from a dedicated NPM package.

Print styling is applied when print is called on a page that contains the agenda. In addition to that, you can call the `print` method on the instance which grabs only the markup of the agenda places it onto a temporary page and calls the browsers printing function. This is especially useful when you want to add a button to only print the agenda rather than the whole page.

Besides printing, PDF export is possible through the print dialog of the browser.

The **print module** is not available in the trial. You can try the live demo to see how it looks.

## What this demo shows

- Shows a monthly agenda view with events listed and grouped by date.
- **Printing** A `Print the agenda` button is displayed next to the month view on the left side and opens the browser print dialog, applying print styling so the agenda can be printed or exported to PDF.
- **Header navigation** The month and year label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between months and jump back to the current date.
- **Agenda list:** The area below the header lists events for the selected month. Events in the agenda are grouped by date.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Events:** Events appear as agenda cards with a colored strip on the left and the event title next to it. Start and end times are stacked on the right side of timed events. All-day events show the all-day label on the right.
- **Event interaction:** Hovering an event highlights it.
- **Event selection:** Clicking an event selects and highlights it.

## Best for

- **Printable agendas** Creating printable agenda that can be shared or posted.
- **Schedules and planning** Preparing printed schedules, planning overviews, and event-based agendas for review or distribution.
- **Archiving and reporting** Printing or exporting agenda views for record-keeping, handouts, or browser-based PDF generation.

## Tutorial

By calling the `print` method, the agenda will open a new window and print its content.

```jsx
const MY_MODULES = [print];
const [inst, setInst] = React.useState(null);
const printView = () => {
    inst.print();
};
                                
<Button onClick={printView}>Print agenda</Button>
<Eventcalendar
    view={{
        agenda: {
            type: 'month'
        }
    }}
    ref={setInst}
    modules={MY_MODULES}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option

## Code

### JSX

```jsx
import { print } from '@mobiscroll/print';
import { Button, Eventcalendar, getJson, Page, setOptions } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

const MY_MODULES = [print];

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [inst, setInst] = useState(null);
  const [myEvents, setEvents] = useState([]);

  const myView = useMemo(() => ({ agenda: { type: 'month' } }), []);

  const printView = useCallback(() => {
    inst.print();
  }, [inst]);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <Page className="mds-full-height">
      <div className="mds-full-height mbsc-flex-col">
        <div className="mbsc-flex-none">
          <Button onClick={printView} startIcon="print">
            Print agenda
          </Button>
        </div>
        <div className="mds-overflow-hidden mbsc-flex-1-1">
          <Eventcalendar data={myEvents} modules={MY_MODULES} ref={setInst} view={myView} />
        </div>
      </div>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { print } from '@mobiscroll/print';
import {
  Button,
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscEventcalendarView,
  Page,
  setOptions,
} from '@mobiscroll/react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';

const MY_MODULES = [print];

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => {
  const [inst, setInst] = useState<Eventcalendar | null>(null);
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);

  const myView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'month' } }), []);

  const printView = useCallback(() => {
    inst!.print();
  }, [inst]);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events: MbscCalendarEvent[]) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <Page className="mds-full-height">
      <div className="mds-full-height mbsc-flex-col">
        <div className="mbsc-flex-none">
          <Button onClick={printView} startIcon="print">
            Print agenda
          </Button>
        </div>
        <div className="mds-overflow-hidden mbsc-flex-1-1">
          <Eventcalendar data={myEvents} modules={MY_MODULES} ref={setInst} view={myView} />
        </div>
      </div>
    </Page>
  );
};
export default App;
```

### CSS

```css
.mds-full-height {
  height: 100%;
}

.mds-overflow-hidden {
  overflow: hidden;
}
```

## Implementation notes

- Install `@mobiscroll/print` as a separate package. Import `print` from it and pass it to the Eventcalendar via the `modules` option: `modules: [print]`.
- Use `view: { agenda: { type: 'month' } }`. Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. For the imperative API, call `inst.setEvents(events)` in the callback.
- Get a reference to the component instance (Angular: use `@ViewChild` to get the `MbscEventcalendar` reference). Calling `inst.print()` extracts the calendar markup into a temporary page and invokes the browser print dialog.
- Wrap the layout in a `Page` component with a flex column: Button in a fixed-height top row, Eventcalendar filling the remaining height (`mbsc-flex-1-1`).

## Run it in your project

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Show Empty Days](https://demo.mobiscroll.com/react/agenda/show-empty-days.md) - Display day headers for all dates in the React Agenda, including days without events — keep the full month visible in the agenda list.