---
title: "Angular Timeline Print and PDF Export Example | Mobiscroll"
component: "Timeline"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/timeline/printing-the-view"
---

# Print and PDF Export - Angular Timeline demo

Use the Angular Timeline print add-on to print just the timeline view — apply print-optimized styles and export to PDF through the browser. For Angular 22 and Ionic 8.

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

## Description

The timeline 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 someone prints the page that contains the timeline. In addition to that, you can call the `print` method on the instance which grabs only the markup of the timeline, 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 timeline 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

- A desktop weekly timeline for Monday through Friday, with days arranged horizontally and resources arranged vertically on the left.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header shows the selected work week from Monday to Friday, with the current date highlighted.
- **Resources** Shows multiple resources vertically on the left side of the timeline as individual rows.
- **Event labels** Renders events as colored labels inside the day cells with event title shown in bold.
- **Date positioning** Positions events according to both their assigned resource and exact date range.
- **Event interaction** Highlights events on hover and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Selects and highlights an event when it is clicked.
- **Event creation** Creates a new event by double-clicking the timeline or by clicking and dragging on it.
- **Printing** A `Print the calendar` button is displayed next to the timeline view on the left side and opens the browser print dialog, applying print styling so the timeline can be printed or exported to PDF.

## Best for

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

## Tutorial

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

```html
<mbsc-eventcalendar #mycal
    [view]="calView"
    [modules]="calendarModules">
</mbsc-eventcalendar>
<mbsc-button (click)="printCal()">
    Print timeline
</mbsc-button>
```

```ts
import { print } from '@mobiscroll/print';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    @ViewChild('mycal', { static: false })
    inst!: MbscEventcalendar;
    calendarModules = [print];
    calView = {
        timeline: {
            type: 'week',
            startDay: 1,
            endDay: 5,
            eventDisplay: 'fill'
        }
    };
    printCal(): void {
        this.inst.print();
    }
}
```

## API used in this demo

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

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendar,
  MbscEventcalendarView,
  MbscModule,
  MbscResource,
  setOptions,
} from '@mobiscroll/angular';
import { print } from '@mobiscroll/print';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}

  @ViewChild('mycal', { static: false })
  inst!: MbscEventcalendar;

  calendarModules = [print];

  myEvents: MbscCalendarEvent[] = [];
  myResources: MbscResource[] = [
    {
      id: 1,
      name: 'Flatiron Room',
      color: '#fdf500',
    },
    {
      id: 2,
      name: 'The Capital City',
      color: '#ff0101',
    },
    {
      id: 3,
      name: 'Heroes Square',
      color: '#01adff',
    },
    {
      id: 4,
      name: 'Thunderdome',
      color: '#ff4600',
    },
    {
      id: 5,
      name: 'King’s Landing',
      color: '#239a21',
    },
    {
      id: 6,
      name: 'Gathering Field',
      color: '#8f1ed6',
    },
  ];

  calView: MbscEventcalendarView = {
    timeline: {
      type: 'week',
      startDay: 1,
      endDay: 5,
      eventDisplay: 'fill',
    },
  };

  printView(): void {
    this.inst.print();
  }

  ngOnInit(): void {
    this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/daily-weekly-events/', 'callback').subscribe((resp) => {
      this.myEvents = resp;
    });
  }
}
```

### Template

```html
<mbsc-page>
  <mbsc-button (click)="printView()">Print timeline</mbsc-button>
  <mbsc-eventcalendar #mycal [data]="myEvents" [resources]="myResources" [view]="calView" [modules]="calendarModules"></mbsc-eventcalendar>
</mbsc-page>
```

## Implementation notes

- Install `@mobiscroll/print` as a separate npm package (not included in the trial). Import `print` from it and pass it to the `modules` prop on the `Eventcalendar` component (Angular: `modules` input).
- Capture the calendar instance via a ref (Angular: use `@ViewChild`) and call `inst.print()`.
- Calling `inst.print()` extracts the calendar markup into a temporary page and invokes the browser's print function - only the timeline is printed, not the surrounding page.
- Configure `timeline: { type: 'week', startDay: 1, endDay: 5, eventDisplay: 'fill' }` so the printed view shows a compact Monday-Friday work week with events filling the full height of their cell.
- Define room or venue resources with `id`, `name`, and `color`. Load events from a remote endpoint using `getJson` and pass them to `data`.
- PDF export requires no extra configuration - users can choose "Save as PDF" from the browser's print dialog.

## 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/angular/getting-started/installation

## Related demos

- Previous: [Time Grid and Timeline Layout](https://demo.mobiscroll.com/angular/timeline/timeline-time-grid.md) - Switch between a vertical time grid and a horizontal resource timeline in a Angular scheduler — set responsive to show each layout by screen size.