Komponent

ICalendarMonthGrid

Kalenderrutnät är en ramverkskomponent avsedd att användas i kalendermånad (ICalendarMonth) för att modellera och rita rutnätet av dagar. Den används i förlängning av kalender (FCalendar) och datumväljare (FDatepickerField).

Kalenderrutnät utan innehåll

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

export default defineComponent({
    name: "ICalendarMonthDefaultExample",
    components: { ICalendarMonthGrid },
    data() {
        return {
            month: shallowRef(FDate.fromIso("2022-10-01")),
        };
    },
});
</script>

<template>
    <i-calendar-month-grid :value="month"> </i-calendar-month-grid>
</template>

Kalenderrutnät med dagnumrering

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

export default defineComponent({
    name: "ICalendarMonthDefaultExample",
    components: { ICalendarMonthGrid },
    data() {
        return {
            month: shallowRef(FDate.fromIso("2022-10-01")),
        };
    },
});
</script>

<template>
    <i-calendar-month-grid :value="month">
        <template #default="{ date }">{{ date.day }}</template>
    </i-calendar-month-grid>
</template>

API

Props

v-model: FDate

Focused month.

hideWeekNumbers: boolean Optional

Hide week numbers.

Default: false

Slots

default

Slot for rendering of day content. Slot scope is available through v-slot="{ <propertyName> }", e.g. v-slot="{ date, focused }".

Bindings:

• date: FDate — Date of day.
• focused: bool — If month component is focused or not.