Kalenderrutnät

Komponent: ICalendarMonthGrid

Innehåll

Kalenderrutnät utan innehåll
Kalenderrutnät med dagnumrering
API

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

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

<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>

Kalenderrutnät med dagnumrering

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

<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>

API

Props
Name	Description	Type	Required	Default
v-model	Focused month.	FDate	true	‐
hideWeekNumbers	Hide week numbers.	boolean	false	false

Slots
Name	Description	Bindings
default	Slot for rendering of day content.	date focused

Kakor på webbplatsen

Kalenderrutnät

Kalenderrutnät utan innehåll

Kalenderrutnät med dagnumrering

API