quickstart

PrimeUI Pro Scheduler Angular Quickstart

A minimal Angular application showing PrimeUI Pro Scheduler with PrimeNG and editable PrimeOne UI parts.

The toolbar switches between Month, Week, and Resource Timeline Week views. Events can be added, edited, deleted, dragged, and resized. The app shell, demo fixtures, and Scheduler UI parts are kept separate so users can quickly identify what to replace in their own application.

Run

pnpm install
pnpm dev

Add your PrimeUI Pro license key to src/environments/environment.ts:

export const environment = {
    primeuiLicense: 'your-license-key'
};

Keep your key out of version control.

Project Map

• src/main.ts registers the license and bootstraps the application.
• src/app/app.config.ts registers PrimeNG and the Aura theme preset.
• angular.json registers the Scheduler styles from @primeui/scheduler-style and the copied component styles.
• src/app/demo/scheduler/SchedulerDemo.ts contains the Scheduler integration and enabled views.
• src/app/demo/scheduler/EventEditorDialog.ts contains the disposable add/edit form.
• src/app/demo/scheduler/data.ts contains disposable example events and resources.
• src/app/components/primeui/scheduler contains the editable PrimeOne UI parts and their assets/style bundle.
• src/app/components/shell contains the minimal quickstart header and footer.

Remove or replace src/app/demo/scheduler when connecting your own data. Keep the Scheduler package imports and the UI parts your selected views render.

Each UI part is attached with its structural definition directive on the part element, such as <p-scheduler-time-grid-event *pSchedulerTimeGridEventDef>, inside the matching view scope.

Documentation

• Scheduler documentation
• Scheduler setup and UI parts
• PrimeNG