Komponent

ICalendarMonth

Kalendermånad är en ramverkskomponent avsedd att användas i kalender (FCalendar) för att integrera kalenderrutnät (ICalendarMonthGrid) med daginnehåll. Den används i förlängning av komponent datumväljare (FDatepickerField).

Kalendermånad tillsammans med datumnummer

<template>
    <i-calendar-month v-model="month" :min-date="minDate" :max-date="maxDate" @click="onClick">
        <template #default="{ date }">{{ date.day }}</template>
    </i-calendar-month>
</template>

<script lang="ts">
import { defineComponent, shallowRef } from "vue";
import { ICalendarMonth } from "@fkui/vue";
import { FDate } from "@fkui/date";

export default defineComponent({
    name: "ICalendarMonthDefaultExample",
    components: { ICalendarMonth },
    data() {
        return {
            month: shallowRef(FDate.fromIso("2022-10-01")),
            minDate: shallowRef(FDate.fromIso("2020-01-01")),
            maxDate: shallowRef(FDate.fromIso("2029-01-30")),
        };
    },
    methods: {
        onClick(date: FDate) {
            alert(`Du klickade på dag ${date.day}`);
        },
    },
});
</script>

Kalendermånad tillsammans med kalenderdag (FCalendarDay)

<template>
    <i-calendar-month v-model="month" :min-date="minDate" :max-date="maxDate" @click="onClick">
        <template #default="{ date, isFocused }">
            <f-calendar-day :day="date" :focused="isFocused"> </f-calendar-day>
        </template>
    </i-calendar-month>
</template>

<script lang="ts">
import { defineComponent, shallowRef } from "vue";
import { ICalendarMonth, FCalendarDay } from "@fkui/vue";
import { FDate } from "@fkui/date";

export default defineComponent({
    name: "ICalendarMonthWithFCalendarDayExample",
    components: {
        ICalendarMonth,
        FCalendarDay,
    },
    data() {
        return {
            month: shallowRef(FDate.fromIso("2022-10-01")),
            minDate: shallowRef(FDate.fromIso("2020-01-01")),
            maxDate: shallowRef(FDate.fromIso("2029-01-30")),
        };
    },
    methods: {
        onClick(date: FDate) {
            alert(`Du klickade på dag ${date.day}`);
        },
    },
});
</script>

API

Props

v-model: FDate

Active month.

tabDate: FDate | undefined Optional

Date to focus on when component gains focus.

Consumers can update this related to active month. If undefined, the first day of the month will gain focus.

Default: undefined

minDate: FDate

Min date.

maxDate: FDate

Max date.

Events

change

‐

click

click event.

Arguments:

• <anonymous>: string

update:modelValue

v-model event.

Arguments:

• <anonymous>: string

Slots

default

Slot for rendering of day content.

Bindings:

• date: unknown
• is-focused: unknown