Flux

Appearance

Calendar ​

This component shows a month calendar. Events can be added to the calendar by filling the default slot of the component.

Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11

Props

initial-date?: DateTime
The initial visible date.
Default: DateTime.now()

is-loading: boolean
Indicates that the calendar is loading.

Emits

navigate: [DateTime, DateTime, DateTime]
Triggered when the calendar is being navigated. The first parameter is the view date, the second the start date of the visible range and the third the end date of the visible range.

Slots

default
The calendar events that should be visible.

Snippet ​

vue
<template>
    <FluxCalendar>
        <template v-for="event of events">
            <FluxCalendarEvent
                :date="event.date"
                :label="event.label"/>
        </template>
    </FluxCalendar>
</template>

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

    const events = [
        {date: DateTime.now(), label: 'Work'}
    ];
</script>

Used components ​