Flux

Calendar item ​

This component is used within the Calendar component to render a single calendar entry. The default slot is yours to fill. Render any content (icons, labels, badges, copy) you like. When the parent calendar has draggable enabled, items with an id can be dragged between day-cells (in month view) or between day-cells and time-slots (in time-grid views).

To add a tooltip, wrap your slot content in a Tooltip component.

Props

date: DateTime
The date (and optionally time) of the item. In time-grid views the time component sets the start time.

id?: string | number
A unique identifier for the item. Required when the parent FluxCalendar has `draggable` enabled.

duration?: number
Length of the item in minutes. Only used in time-grid views (`week`, `two-days`, `day`). Ignored in `month`.
Default: 60

all-day?: boolean
Force the item to render in the all-day section of time-grid views. Ignored in `month`.
Default: false

Emits

click: [MouseEvent]
Triggered when the item is clicked.

Slots

default
The visual content of the item. Render any content (icons, labels, badges, copy) you like.

Snippets ​

vue
<template>
    <FluxCalendarItem
        :date="DateTime.now()"
        :id="1">
        <div class="my-card">
            Work
        </div>
    </FluxCalendarItem>
</template>

<script
    setup
    lang="ts">
    import { FluxCalendarItem } from '@flux-ui/components';
    import { DateTime } from 'luxon';
</script>
vue
<template>
    <FluxCalendarItem
        :date="DateTime.now().set({hour: 10})"
        :duration="90"
        :id="2">
        <div class="my-card">
            Design review
        </div>
    </FluxCalendarItem>
</template>

<script
    setup
    lang="ts">
    import { FluxCalendarItem } from '@flux-ui/components';
    import { DateTime } from 'luxon';
</script>
vue
<template>
    <FluxCalendarItem
        :date="DateTime.now()"
        :all-day="true"
        :id="3">
        <div class="my-card">
            On call
        </div>
    </FluxCalendarItem>
</template>

<script
    setup
    lang="ts">
    import { FluxCalendarItem } from '@flux-ui/components';
    import { DateTime } from 'luxon';
</script>
vue
<template>
    <FluxCalendarItem
        :date="DateTime.now()"
        :id="4">
        <FluxTooltip content="Important meeting today.">
            <div class="my-card">
                Meeting
            </div>
        </FluxTooltip>
    </FluxCalendarItem>
</template>

<script
    setup
    lang="ts">
    import { FluxCalendarItem, FluxTooltip } from '@flux-ui/components';
    import { DateTime } from 'luxon';
</script>