Calendar event

This component is used within the Calendar component and resembles a single calendar event.

Props

date: DateTime | DateTime[]
The date or date range of the event.

label: string
The label of the event.

Emits

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

Slots

tooltip
An optional tooltip for when the event is being hovered.

Snippets

CalendarEvent.vue

<template>
    <FluxCalendarEvent
        :date="DateTime.now()"
        label="Work"/>
</template>

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

CalendarEventTooltip.vue

<template>
    <FluxCalendarEvent
        :date="DateTime.now()"
        label="Work">
        
        <template #tooltip>
            Important meeting today.
        </template>
        
    </FluxCalendarEvent>
</template>

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