Flux

Appearance

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>