Scheduler - Month View

Show a month grid with spanning events, dense days, custom cells, and more popovers.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root view="month" :max-events-visible="4" show-more-popover>
    <Scheduler.Header />
    <Scheduler.Content>
        <Scheduler.Month>
            <Scheduler.MonthHeaderCell />
            <Scheduler.MonthCellNumber />
            <Scheduler.MonthEvent />
        </Scheduler.Month>
    </Scheduler.Content>
    <Scheduler.MorePopover />
</Scheduler.Root>

Month view uses the month header, day number, month event, and more-popover parts. Use it when date-level planning matters more than exact hour placement, while still keeping timed events reachable inside each day cell.

#Basic View

Month view combines a date grid, PrimeOne event cards, and the more popover.

Loading Demo...

#Dense Month

Dense month cells show overflow thresholds and more-popover behavior.

Loading Demo...

#Spanning Events

All-day and multi-day events continue across month cells and rows.

Loading Demo...

#More Popover

Lower visible row counts expose the more trigger and overflow overlay controlled by maxEventsVisible and showMorePopover.

Loading Demo...

#Scoped Event UI

A month-scoped event component can replace month cards without changing timed, timeline, or agenda event rendering.

Loading Demo...

#Customization

Customize month headers, date numbers, and event cards together when the calendar needs a stronger product surface. Month view still owns range generation, event placement, overflow state, and focus behavior.

Loading Demo...

#API

Month-focused props include view="month", maxEventsVisible, showMorePopover, event-shell, Scheduler.MonthEvent, Scheduler.MonthCellNumber, Scheduler.MonthHeaderCell, and Scheduler.MorePopover.