Scheduler - Setup

#Installation

Install the Vue Scheduler runtime package.

npm install @primeui/vue-scheduler

#Dependencies

@primeui/vue-scheduler is the only package to install. It brings the Scheduler runtime helpers, shared types, and style package through its package dependencies, so the setup flow is to install the Vue package, import Scheduler, then load the style files your app will use.

Scheduler does not require an external calendar, date, drag and drop, timeline, or recurrence library.

PrimeOne and Tailwind UI parts are optional application-owned components. Add one UI layer when you want maintained toolbar, event, resource, overlay, month, agenda, category, or selection visuals without writing every surface from scratch.

#Import

Import the Scheduler namespace from the Vue package.

import { Scheduler } from '@primeui/vue-scheduler';

#Styles

Load the base structural stylesheet once in the app entry. Add the PrimeOne Scheduler theme when the runtime shell should follow PrimeUI design tokens.

import '@primeui/scheduler-style/style.css';
import '@primeui/scheduler-style/themes/primeone.css';

The base file owns grid layout, scroll containers, focus rings, positioning, interaction states, print mode, and view structure. The theme file maps Scheduler variables to PrimeOne tokens. Neither file installs toolbar buttons, event cards, resource rows, or overlay bodies.

Use Theming for the complete style import, CSS variable, color-mode, and style-class reference.

#UI Parts

The Scheduler runtime is intentionally headless. It exposes compound parts such as Scheduler.Header, Scheduler.TimeGridEvent, Scheduler.MonthEvent, Scheduler.ResourceRow, Scheduler.MorePopover, and Scheduler.QuickInfo. Each part renders the Scheduler-owned surface and lets the app provide the visible UI.

UI parts are copied into the project, so teams can edit, restyle, or replace them.

#PrimeOne UI Parts

Run the CLI from the project root to copy the PrimeOne parts. --output-dir sets their parent directory, so this command writes to src/components/primeui/scheduler.

npx -y @primeui/cli add scheduler --framework vue --ui primeone --output-dir ./src/components/primeui

Import the copied components from that directory. These examples use @/ as an alias for src/.

import { SchedulerToolbarUI, SchedulerTimeGridEventUI, SchedulerAllDayEventUI, SchedulerMorePopoverUI } from '@/components/primeui/scheduler';

Add the copied component stylesheet after the Scheduler runtime styles.

import '@primeui/scheduler-style/style.css';
import '@primeui/scheduler-style/themes/primeone.css';
import '@/components/primeui/scheduler/assets/style/components.css';

#Tailwind UI Parts

If the project already uses Tailwind, copy the utility-class variant instead.

npx -y @primeui/cli add scheduler --framework vue --ui tailwind --output-dir ./src/components/primeui

The Tailwind parts use the same component names, so the imports do not change.

import { SchedulerToolbarUI, SchedulerTimeGridEventUI, SchedulerMorePopoverUI } from '@/components/primeui/scheduler';

Load the Scheduler structural stylesheet. The copied Tailwind parts use Tailwind utility classes and Scheduler CSS variables such as --p-primary-color and --p-content-background. Keep primeone.css when the app already uses PrimeUI tokens, or define equivalent variables in the app theme.

import '@primeui/scheduler-style/style.css';
import '@primeui/scheduler-style/themes/primeone.css';

#Manual Parts

Teams that do not use the CLI can create the same application-owned parts manually. Keep them in a local folder such as src/components/scheduler and place each component inside the matching Scheduler outlet.

import SchedulerToolbar from '@/components/scheduler/SchedulerToolbar.vue';
import SchedulerEventCard from '@/components/scheduler/SchedulerEventCard.vue';

Manual parts usually read Scheduler context through composables such as useSchedulerEventContext(), useSchedulerHeaderContext(), resource context helpers, and overlay context helpers from @primeui/vue-scheduler. Manual parts should not reimplement date math, placement, focus, drag, resize, or overlay dismissal. Keep those responsibilities in Scheduler and draw only the visible surface.

#Runtime, Styles, and UI Parts

#Part Groups

PrimeOne and Tailwind currently expose the same Vue component names. Import only the UI components rendered by the page. Explicit imports make the visual contract visible in the SFC.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';

<Scheduler.Root>
    <Scheduler.Header />
    <Scheduler.Content>
        <Scheduler.Week>
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGridEvent />
        </Scheduler.Week>
    </Scheduler.Content>
</Scheduler.Root>

Start with the headless Scheduler structure, then add style imports and UI parts from the setup steps around it. The runtime compound parts stay the same whether the visible UI comes from PrimeOne parts or app-owned components.

#Installed Scheduler

Load the runtime styles, theme styles, and UI part styles before rendering the small week schedule.

#PrimeOne Parts

PrimeOne toolbar, timed event, all-day event, category legend, quick info, and overlay parts render inside Scheduler-owned surfaces.

#Custom Parts

After setup, customization starts by declaring explicit child parts inside the same Scheduler root. The runtime still handles range calculation, placement, interaction, and accessibility; the app owns the visible UI.

#Resource Parts

Resource rows, resource headers, and aggregate badges can use PrimeOne parts first, then move to custom children when a product needs richer labels or operational metadata.

#Quickstarts

Explore the runnable projects in the Scheduler examples repository. Each quickstart includes Month, Week, and Resource Timeline views.

• Vite - Vue and Vite with PrimeOne UI parts and PrimeVue controls.
• Nuxt - Nuxt with PrimeOne UI parts and PrimeVue controls.
• Vite + Tailwind - Vue and Vite with Tailwind UI parts and native controls.
• Nuxt + Tailwind - Nuxt with Tailwind UI parts and native controls.

#Next Steps

• Architecture
• LLMs
• Style
• Theming
• API