Import / export
Three lazy secondary entries keep the main bundle small: /export-ical (RFC 5545, no dependencies), /export-pdf (the jspdf peer, with the same Unicode font registry as every other OGE PDF export) and /export-excel (the exceljs peer). Each reads the scheduler's getExportData() model, so a custom pipeline can start from the same rows. print() prints the current view itself.
.ics export .ics import PDF Excel print()
iCalendar
Download the calendar as .ics — the recurring series export as RRULE with their skipped dates as EXDATE — or import a sample file: a weekly retro with one moved occurrence and an all-day holiday. Every imported event runs through the cancelable appointmentAdding pipeline.
exportToICalendar importICalendar RECURRENCE-ID
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { OgeScheduler } from '@oge-ui/scheduler';
@Component({
selector: 'demo-root',
imports: [OgeScheduler],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- /export-ical has no dependencies: series stay series (RRULE, RDATE,
EXDATE), all-day events use VALUE=DATE, and the import folds moved
occurrences (RECURRENCE-ID) back into their series. -->
<div class="mb-3 flex flex-wrap gap-2">
<button type="button" (click)="exportIcs()">Download .ics</button>
<button type="button" (click)="importIcs()">Import sample .ics</button>
</div>
<oge-scheduler
#cal
[dataSource]="appointments"
[currentDate]="date"
currentView="month"
[views]="['week', 'month', 'agenda']"
style="height: 560px"
/>
`,
})
export class Demo {
protected readonly scheduler = viewChild.required<OgeScheduler<Record<string, unknown>>>('cal');
protected readonly date = new Date(2026, 7, 6);
protected readonly appointments: Record<string, unknown>[] = [
{
id: 1,
text: 'Weekly sync',
startDate: new Date(2026, 7, 3, 10, 0),
endDate: new Date(2026, 7, 3, 11, 0),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO',
},
];
protected async exportIcs(): Promise<void> {
const { exportToICalendar } = await import('@oge-ui/scheduler/export-ical');
exportToICalendar(this.scheduler(), { filename: 'team.ics', calendarName: 'Team' });
}
protected async importIcs(): Promise<void> {
const { importICalendar } = await import('@oge-ui/scheduler/export-ical');
// a file input would pass await file.text() here
const text = await fetch('/team.ics').then((response) => response.text());
importICalendar(this.scheduler(), text, { uidField: 'uid' });
}
}PDF, Excel & print
The list exports write the visible period's appointments in chronological order — grouped by day in the PDF, one typed row per occurrence in Excel, with a column per resource kind. print() clones the view with the page's styles into a hidden frame and opens the print dialog.
exportSchedulerToPdf exportSchedulerToExcel print()
Sunday, August 2, 2026
Monday, August 3, 2026
Tuesday, August 4, 2026
Wednesday, August 5, 2026
Thursday, August 6, 2026
Friday, August 7, 2026
Saturday, August 8, 2026
import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { OgeScheduler } from '@oge-ui/scheduler';
@Component({
selector: 'demo-root',
imports: [OgeScheduler],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- PDF and Excel are lazy entries (jspdf / exceljs peers) exporting the
visible period as a chronological list; print() prints the view itself. -->
<div class="mb-3 flex flex-wrap gap-2">
<button type="button" (click)="exportPdf()">PDF</button>
<button type="button" (click)="exportExcel()">Excel</button>
<button type="button" (click)="scheduler().print({ title: 'Team week' })">Print</button>
</div>
<oge-scheduler
#cal
[dataSource]="appointments"
[currentDate]="date"
currentView="week"
[dayStartHour]="8"
[dayEndHour]="18"
style="height: 560px"
/>
`,
})
export class Demo {
protected readonly scheduler = viewChild.required<OgeScheduler<Record<string, unknown>>>('cal');
protected readonly date = new Date(2026, 7, 6);
protected readonly appointments: Record<string, unknown>[] = [
{
id: 1,
text: 'Design pairing',
startDate: new Date(2026, 7, 6, 10, 0),
endDate: new Date(2026, 7, 6, 12, 0),
},
{
id: 2,
text: 'Customer visit',
startDate: new Date(2026, 7, 4),
endDate: new Date(2026, 7, 6),
allDay: true,
},
];
protected async exportPdf(): Promise<void> {
const { exportSchedulerToPdf } = await import('@oge-ui/scheduler/export-pdf');
// text outside WinAnsi needs a Unicode font: setOgePdfDefaultFont() from @oge-ui/behavior
await exportSchedulerToPdf(this.scheduler(), { filename: 'week.pdf' });
}
protected async exportExcel(): Promise<void> {
const { exportSchedulerToExcel } = await import('@oge-ui/scheduler/export-excel');
await exportSchedulerToExcel(this.scheduler(), { filename: 'week.xlsx' });
}
}