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

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

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 ${String(date.day)}`);
        },
    },
});
</script>

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

Kalendermånad tillsammans med kalenderdag (FCalendarDay)

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

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 ${String(date.day)}`);
        },
    },
});
</script>

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

API

Models

v-model: FDate

Active month.

Props

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

click

click event.

Arguments:

• <anonymous>: string

Slots

default

Slot for rendering of day content.

Bindings:

• date: FDate — The date object for the current day.
• is-focused: boolean — Indicates whether the current day is focused.