Month
Dense calendar planning
Month view handles all-day spans, timed summaries, continuation markers, per-day overflow, more popovers, range selection, and custom day cells.
PrimeUI
Scheduler.
A compound scheduling system for Vue applications. Month, week, day, agenda, year, timeline, resource grouping, availability, recurrence, international calendars, and fully replaceable UI parts in one package.
Loading scheduler…
A real Vue Scheduler running in the page. Switch between launch planning, field dispatch, appointment booking, and a localized calendar to see the same compound structure handle different scheduling products.
Views
Every calendar view from one component tree.
Start with a compact month grid, a full timed week, a year planner, agenda rows, or horizontal timelines. The view changes, while event data, UI parts, overlays, selection, drag, and resize stay on the same contract.
Week & Day
Timed schedules with overlap
Day and week views support business hours, all-day rows, working-day filters, overlapping timed events, current-time indicators, drag, resize, and horizontal scroll on small screens.
Timeline
Horizontal time at scale
Timeline day, week, month, and year views keep headers, event spans, and long ranges readable with horizontal scrolling and optional virtualized ranges.
Agenda & Year
Scan the schedule quickly
Agenda view groups events by date with customizable date headers. Year view renders twelve mini-months with indicators, disabled dates, today, selected, and range states.
Resources
Model people, rooms, teams, equipment, and locations.
Resource views are not a separate component. The same Scheduler handles flat resources, nested groups, date grouping, horizontal resource columns, adaptive selectors, and timeline lanes.
Hierarchy
Groups, leaves, and summaries
Parent resources can collapse into aggregate rows. Child resources keep their event colors, availability, blocked intervals, and natural row height.
Date Grouping
Date first, resources second
Group by date when capacity needs to be compared inside each day, or use resource-first layouts when each lane owns the full visible range.
Adaptive
Mobile resource selection
Adaptive grouping switches large resource grids into a contained selector. Parent selections keep grouped columns, leaf selections focus one resource.
Scheduling
Real scheduling workflows, not just static dates.
Create, edit, move, resize, select, inspect, and export schedules. The event model stays plain JavaScript dates while the UI adds the interaction layer your product needs.
Event UI
Semantic event surfaces
Use PrimeOne event parts for month, timed, all-day, timeline, and agenda events, or replace each surface independently through compound child outlets.
Overlays
Details stay close to the event
Quick info, hover popovers, context menus, and month more-popovers are explicit parts. Keep the interaction behavior and swap the visual body.
Availability
Slots and blocked intervals
Show appointment slots as overlays, grid cells, or indicators. Block time ranges and prevent creates or drops into unavailable periods.
Recurrence
Repeat from one source event
Recurring events expand into the visible range while the source event keeps its RRULE, exceptions, and recurrence identity.
Customization
Compose the scheduler like product UI.
Scheduler is built from explicit parts. Start with PrimeOne UI pieces, then replace only the toolbar, event cards, month cells, resource rows, overlays, or scoped view surfaces that your product needs.
Compound API
Explicit structure
Use Root, Header, Content, Popover, QuickInfo, MorePopover, ContextMenu, and child outlets directly in your template. The page structure stays readable.
Scoped Outlets
Different UI per view
Declare global event UI, then override only Scheduler.Month, Scheduler.Week, Scheduler.ResourceTimeline, or Scheduler.DateMonth when a view needs custom UI.
Part Context
No prop drilling required
PrimeOne UI parts can read the context provided by Header, Event, Overlay, Resource, Selection, Category, and Agenda header outlets.
Data Attributes
Stable styling hooks
Public data-slot values and state attributes let teams theme or test the scheduler without relying on private DOM depth or generated class order.
International
Locale, calendar, timezone, and RTL are first-class.
Localize the display layer without changing event storage. JavaScript Date values stay stable while the UI renders alternate calendars, numbering systems, time formats, timezones, and right-to-left layouts.
Calendars
Gregorian, Japanese, Persian, Islamic, Indian
Month, year, day, week, agenda, timeline, and grouped views can render alternate calendar labels while event values stay in JavaScript Date form.
Timezone
Display timezone conversion
Render events in the user timezone or the business timezone. Cross-midnight labels and popover summaries follow the same display configuration.
RTL
Right-to-left interaction
RTL affects layout, scroll math, timeline movement, keyboard direction, and overlay placement, not only text alignment.
Operations
Built for product-scale scheduling.
Scheduler is designed for the operational edges that usually appear after launch: responsive scroll ownership, virtualization, accessibility, print, import/export, and controlled state.
Responsive
Scroll instead of crushing columns
Narrow screens keep readable day and resource columns by giving the calendar its own horizontal and vertical scroll surfaces.
Performance
Virtual timeline and bounded layout
Timeline virtualization, fixed or auto row heights, visible-range rendering, and grouped-resource sizing keep large schedules responsive.
Data Export
Print, CSV, ICS, and labels
Keep machine-safe fields for CSV, ICS, and backend payloads while showing localized labels in the UI. Print uses the same calendar display configuration.
Accessibility
Keyboard and screen reader contracts
Scheduler provides ARIA relationships, keyboard activation, overlay dismissal, selected and disabled states, and labels that custom UI can preserve.
Controlled State
Your app owns the source of truth
Drive view, date, events, resources, filters, and selection from parent state. Scheduler emits payloads for validation, persistence, undo, and backend sync.
Ready to build your scheduler?
Install the Vue package, import the Scheduler styles and PrimeOne UI parts, then assemble the views and workflows your product needs.