Scheduler provides enterprise event planning, responsive multi-view calendar grids, resource timelines, recurrence handling, and appointment booking.
Scheduler is available under the @bdspark/sparkng/scheduler entry point. You can import SchedulerModule for all scheduler components or import individual standalone components like SchedulerRoot, SchedulerHeader, and view scopes.
import { Component } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root [events]="events">
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
<p-scheduler-view-selector></p-scheduler-view-selector>
</p-scheduler-header>
<p-scheduler-content>
<p-scheduler-month></p-scheduler-month>
</p-scheduler-content>
</p-scheduler-root>
`
})
export class MySchedulerComponent {
events = [
{ id: 1, title: 'Sprint Review', start: new Date(), allDay: true }
];
} Scheduler receives events with the [events] property as a collection of SchedulerEvent objects. The compound component architecture provides modular headers, responsive view selectors, and rich date navigation in a balanced single-line toolbar.
import { Component, signal } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
import type { SchedulerEvent } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root [events]="events()" [view]="'month'" [height]="650">
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
<p-scheduler-view-selector></p-scheduler-view-selector>
</p-scheduler-header>
<p-scheduler-content>
<p-scheduler-month></p-scheduler-month>
<p-scheduler-week></p-scheduler-week>
<p-scheduler-day></p-scheduler-day>
<p-scheduler-agenda></p-scheduler-agenda>
<p-scheduler-timeline></p-scheduler-timeline>
</p-scheduler-content>
<p-scheduler-quick-info></p-scheduler-quick-info>
<p-scheduler-more-popover></p-scheduler-more-popover>
</p-scheduler-root>
`
})
export class BasicSchedulerDemo {
events = signal<SchedulerEvent[]>([
{ id: 1, title: 'Q4 Product Roadmap', start: new Date(), end: new Date() }
]);
} Scheduler supports standard view modes: Month, Week, Day, Agenda, and Timeline. Switch views in real time using the right-hand view switcher buttons in the single-line header toolbar or programmatically with [(view)].
import { Component, signal } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
import type { SchedulerResource, SchedulerEvent, SchedulerViewType } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root [events]="events()" [resources]="resources()" [(view)]="activeView" [height]="650">
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
<p-scheduler-view-selector></p-scheduler-view-selector>
</p-scheduler-header>
<p-scheduler-content>
<p-scheduler-month></p-scheduler-month>
<p-scheduler-week></p-scheduler-week>
<p-scheduler-day></p-scheduler-day>
<p-scheduler-agenda></p-scheduler-agenda>
<p-scheduler-timeline></p-scheduler-timeline>
</p-scheduler-content>
<p-scheduler-quick-info></p-scheduler-quick-info>
<p-scheduler-more-popover></p-scheduler-more-popover>
</p-scheduler-root>
`
})
export class ViewsSchedulerDemo {
activeView = signal<SchedulerViewType>('week');
resources = signal<SchedulerResource[]>([
{ id: '1', title: 'Frontend Team', eventColor: '#3b82f6' }
]);
events = signal<SchedulerEvent[]>([
{ id: 101, title: 'Design Critique', start: new Date(), end: new Date() }
]);
} Scheduler offers multi-dimensional grouping modes: Resources (hierarchical tree swimlanes and columns), Horizontal Resources, Date Grouping (dates as primary columns with resource sub-lanes), and Adaptive Grouping (automatically switching to a compact dropdown switcher when screen width drops below the [adaptiveBreakpoint]).
import { Component, signal } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
import type { SchedulerResource, SchedulerEvent, SchedulerViewType } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root [resources]="resources()" [events]="events()" [(view)]="activeView" [adaptiveBreakpoint]="768">
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
</p-scheduler-header>
<p-scheduler-content>
<p-scheduler-resource-day></p-scheduler-resource-day>
<p-scheduler-resource-timeline></p-scheduler-resource-timeline>
<p-scheduler-date-day></p-scheduler-date-day>
</p-scheduler-content>
</p-scheduler-root>
`
})
export class GroupingSchedulerDemo {
activeView = signal<SchedulerViewType>('resourceDay');
resources = signal<SchedulerResource[]>([
{ id: 'dev-1', title: 'Alex Rivers', eventColor: '#3b82f6' },
{ id: 'dev-2', title: 'Elena Rostova', eventColor: '#10b981' }
]);
} Scheduling features include Date Selection (click-and-drag cell selection emitting (dateSelect)), Add & Edit Events (fast event generation and updating), and Controlled State with two-way binding on [(date)] and [(view)] alongside programmatic methods like next(), prev(), and today().
import { Component, signal } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
import type { DateClickPayload, DateSelectPayload, SchedulerEvent } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root
#scheduler="pScheduler"
[events]="events()"
[(view)]="activeView"
[(date)]="activeDate"
(dateClick)="onDateClick($event)"
(dateSelect)="onDateSelect($event)"
>
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
<p-scheduler-view-selector></p-scheduler-view-selector>
</p-scheduler-header>
<p-scheduler-content>
<p-scheduler-month></p-scheduler-month>
<p-scheduler-week></p-scheduler-week>
<p-scheduler-day></p-scheduler-day>
</p-scheduler-content>
<p-scheduler-quick-info></p-scheduler-quick-info>
</p-scheduler-root>
`
})
export class SchedulingSchedulerDemo {
activeView = signal('week');
activeDate = signal(new Date());
events = signal<SchedulerEvent[]>([]);
onDateClick(e: DateClickPayload): void {}
onDateSelect(e: DateSelectPayload): void {}
}Manage schedule constraints with availability rules: Business Hours (highlighting operational windows), Working Days (dimming weekends or days off with hatched patterns), Blocked Intervals (locking out reservations with lock badges), and Appointment Slots (interactive bookable slots with capacity indicators).
import { Component, signal } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
import type { AppointmentSlot, BlockedInterval, SlotBookPayload } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root
[businessHours]="businessHours"
[workingDays]="workingDays"
[blockedIntervals]="blockedIntervals()"
[appointmentSlots]="appointmentSlots()"
[view]="'week'"
(slotBook)="onSlotBook($event)"
>
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
<p-scheduler-view-selector></p-scheduler-view-selector>
</p-scheduler-header>
<p-scheduler-content>
<p-scheduler-week></p-scheduler-week>
<p-scheduler-day></p-scheduler-day>
</p-scheduler-content>
</p-scheduler-root>
`
})
export class AvailabilitySchedulerDemo {
businessHours = { daysOfWeek: [1,2,3,4,5], startTime: '09:00', endTime: '17:00' };
workingDays = [1, 2, 3, 4, 5];
blockedIntervals = signal<BlockedInterval[]>([
{ start: new Date(...), end: new Date(...), title: 'Lunch Break' }
]);
appointmentSlots = signal<AppointmentSlot[]>([
{ id: '1', start: new Date(...), end: new Date(...), status: 'available', title: 'Consultation', price: 150 }
]);
onSlotBook(e: SlotBookPayload): void {}
}Configure rich event planning capabilities: Metadata & Categories, All-Day & Multi-Day Spanning Events, Recurring Events (using RFC 5545 RRULE syntax), Custom Styling & Color Badges, Quick Info dialogs, and More Popover overlays for high-density dates.
import { Component, signal } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
import type { EventCategory, SchedulerEvent } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root
[events]="events()"
[categories]="categories()"
[(activeCategoryIds)]="activeCategoryIds"
[view]="'month'"
[maxEventsVisible]="2"
>
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
<p-scheduler-view-selector></p-scheduler-view-selector>
</p-scheduler-header>
<p-scheduler-category-legend></p-scheduler-category-legend>
<p-scheduler-content>
<p-scheduler-month></p-scheduler-month>
<p-scheduler-week></p-scheduler-week>
<p-scheduler-agenda></p-scheduler-agenda>
</p-scheduler-content>
<p-scheduler-quick-info></p-scheduler-quick-info>
<p-scheduler-more-popover></p-scheduler-more-popover>
</p-scheduler-root>
`
})
export class EventsSchedulerDemo {
categories = signal<EventCategory[]>([
{ id: 'cat-eng', name: 'Engineering', color: '#3b82f6' },
{ id: 'cat-des', name: 'Design & UX', color: '#ec4899' }
]);
activeCategoryIds = signal<(string | number)[]>([]);
events = signal<SchedulerEvent[]>([
{ id: 1, title: 'Multi-Day Summit', start: new Date(), end: new Date(), allDay: true },
{ id: 2, title: 'Daily Standup', start: new Date(), rrule: 'FREQ=DAILY;INTERVAL=1' }
]);
} Experience interactive desktop & touch workflows: Drag and Drop (relocate events between time slots or days), Event Resizing (drag top/bottom handles to adjust duration), Multi-Event Selection (hold Ctrl/Cmd to select multiple items), Keyboard Navigation, and Context Menu (right-click on events or open slots for quick operations).
import { Component, signal } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
import type { EventDropPayload, EventResizePayload, SchedulerEvent } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root
[events]="events()"
[editable]="true"
[eventDurationEditable]="true"
[view]="'week'"
(eventDrop)="onEventDrop($event)"
(eventResize)="onEventResize($event)"
>
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
<p-scheduler-view-selector></p-scheduler-view-selector>
</p-scheduler-header>
<p-scheduler-selection-toolbar></p-scheduler-selection-toolbar>
<p-scheduler-content>
<p-scheduler-week></p-scheduler-week>
<p-scheduler-day></p-scheduler-day>
</p-scheduler-content>
<p-scheduler-quick-info></p-scheduler-quick-info>
<p-scheduler-context-menu></p-scheduler-context-menu>
</p-scheduler-root>
`
})
export class InteractionSchedulerDemo {
events = signal<SchedulerEvent[]>([
{ id: 1, title: 'Draggable Event', start: new Date(), end: new Date() }
]);
onEventDrop(e: EventDropPayload): void {}
onEventResize(e: EventResizePayload): void {}
}Scheduler comes with built-in data interchange facilities: export your event schedule directly to industry-standard iCalendar (.ics) files (compatible with Google Calendar, Apple Calendar, and Outlook) or to JSON format.
import { Component, signal, ViewChild } from '@angular/core';
import { SchedulerModule, SchedulerRoot } from '@bdspark/sparkng/scheduler';
import type { SchedulerEvent } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<button (click)="exportIcs()">Download .ics</button>
<button (click)="exportJson()">Export JSON</button>
<p-scheduler-root #scheduler="pScheduler" [events]="events()" [view]="'month'">
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
</p-scheduler-header>
<p-scheduler-content>
<p-scheduler-month></p-scheduler-month>
</p-scheduler-content>
</p-scheduler-root>
`
})
export class ImportExportSchedulerDemo {
@ViewChild('scheduler') scheduler!: SchedulerRoot;
events = signal<SchedulerEvent[]>([]);
exportIcs(): void {
const ics = this.scheduler.exportToIcs();
// Trigger browser file download
}
exportJson(): void {
const json = this.scheduler.exportToJson();
}
} Manage appointments, rooms, and personnel assignments simultaneously by binding [resources] alongside [events]. In timeline and resource views, events are partitioned automatically into individual resource lanes.
import { Component, signal } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
import type { SchedulerEvent, SchedulerResource } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root [resources]="resources()" [events]="events()" [view]="'timeline'">
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
<p-scheduler-view-selector></p-scheduler-view-selector>
</p-scheduler-header>
<p-scheduler-content>
<p-scheduler-timeline></p-scheduler-timeline>
</p-scheduler-content>
</p-scheduler-root>
`
})
export class ResourceSchedulerDemo {
resources = signal<SchedulerResource[]>([
{ id: 'conf-a', title: 'Conference Room A', color: '#3b82f6' },
{ id: 'conf-b', title: 'Innovation Lab', color: '#10b981' }
]);
events = signal<SchedulerEvent[]>([
{ id: 1, title: 'Budget Review', start: new Date(), end: new Date(), resourceId: 'conf-a' }
]);
} The <p-scheduler-quick-info> component renders an accessible overlay dialog when an event is clicked. It presents details including date intervals, descriptions, and action triggers, allowing quick edits and inspections without full-page navigation.
import { Component, signal } from '@angular/core';
import { SchedulerModule } from '@bdspark/sparkng/scheduler';
import type { SchedulerEvent } from '@bdspark/sparkng/types/scheduler';
@Component({
standalone: true,
imports: [SchedulerModule],
template: `
<p-scheduler-root [events]="events()" [view]="'month'">
<p-scheduler-header>
<p-scheduler-navigation></p-scheduler-navigation>
<p-scheduler-title></p-scheduler-title>
<p-scheduler-view-selector></p-scheduler-view-selector>
</p-scheduler-header>
<p-scheduler-content>
<p-scheduler-month></p-scheduler-month>
</p-scheduler-content>
<p-scheduler-quick-info></p-scheduler-quick-info>
</p-scheduler-root>
`
})
export class QuickInfoSchedulerDemo {
events = signal<SchedulerEvent[]>([
{
id: 1,
title: 'Client Onboarding',
start: new Date(),
end: new Date(),
description: 'Discuss project requirements and deliverables.'
}
]);
} Scheduler incorporates the role="application" ARIA pattern with accessible landmark titles and labels. Day headers, calendar cells, and event cards are annotated with aria-label providing spoken date intervals and event titles for screen readers.
| Key | Function |
|---|---|
| Tab | Moves focus through navigation controls, view switcher buttons, date cells, and scheduled event items. |
| Arrow Keys | Navigates between adjacent calendar days and time slots in active view grids. |
| Enter / Space | Selects the focused date cell or opens the quick info dialog for the focused event card. |
| Escape | Dismisses open popovers, context menus, and quick info modals. |
Generated reference for Angular Scheduler inputs, outputs, methods, definitions, and types as specified in the PrimeUI Pro / SparkNG API specifications.
Defines the input properties and configurations of the Scheduler component.
| Name | Type | Default | Description |
|---|
Defines event emitters and callback payloads of the Scheduler component.
| Name | Parameters | Description |
|---|
Defines public methods callable on the Scheduler component reference.
| Name | Parameters | Return | Description |
|---|
Defines custom interfaces and data models used by the Scheduler module.
| Interface | Description |
|---|
Defines custom union and alias types used by the Scheduler module.
| Type | Value | Description |
|---|