Scheduler - More Popover

Open overflow events from dense month cells.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root view="month" :max-events-visible="maxEventsVisible" show-more-popover @more-click="onMoreClick">
    <Scheduler.Content>
        <Scheduler.Month>
            <Scheduler.MonthMoreLink />
        </Scheduler.Month>
    </Scheduler.Content>
    <Scheduler.MorePopover />
</Scheduler.Root>

The more popover is intentionally view-scoped because the overflow link is owned by dense month cells. Keep the snippet on the month overflow link, root overflow props, and Scheduler.MorePopover surface.

#Overflow Options

maxEventsVisible is a number that sets how many events stay visible before the month cell switches to the overflow link.

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

const maxEventsVisible: NonNullable<SchedulerProps['maxEventsVisible']> = 3;

Keep the month view literal in this snippet because the overflow link is the documented month-owned surface.

#Month Overflow

Month overflow opens a popover when a day has more events than the visible row limit.

Loading Demo...

#Drag Hidden Events

Overflow rows in month-style views stay connected to Scheduler drag and drop. In a custom child rendered by Scheduler.MorePopover, bind getEventDragProps(event) to the row that should act as the drag handle. Use canDragEvent(event) when the row needs a drag-only affordance.

<Scheduler.MorePopover>
    <OverflowRows />
</Scheduler.MorePopover>
<script setup lang="ts">
import { useSchedulerMorePopoverContext } from '@primeui/vue-scheduler';

const morePopover = useSchedulerMorePopoverContext();
</script>

<template>
    <div>
        <div v-for="event in morePopover.events" :key="event.id" v-bind="morePopover.getEventDragProps(event)">
            {{ event.title }}
        </div>
    </div>
</template>

#Customization

Customize overflow rows and month event cards together so hidden events match the visible event language. The month cell supplies overflow counts, anchors, and popover state.

Loading Demo...

#API

Key APIs are maxEventsVisible, showMorePopover, Scheduler.MorePopover, @more-click, Scheduler.MonthEvent, canDragEvent, and getEventDragProps.