Komponent

FCalendar , FCalendarDay

Status

Produktionsklar

Kalendern används när en användare behöver välja flera dagar, välja dagar och fylla i information om dem, se mer information om en dag eller få en överblick över en månad.

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

<script>
import { defineComponent } from "vue";
import { FDate } from "@fkui/date";
import { FCalendar, FCalendarDay } from "@fkui/vue";

export default defineComponent({
    name: "FCalendarDefault",
    components: {
        FCalendar,
        FCalendarDay,
    },
    data() {
        return {
            month: FDate.fromIso("2022-10-01"),
            min: FDate.fromIso("2020-01-01"),
            max: FDate.fromIso("2029-01-30"),
        };
    },
});
</script>

Varje dag i kalendern är en knapp och det går att styra vad som ska hända när användaren väljer en dag.

Till exempel kan ett klick på en dag i kalendern användas för att:

• Visa information om dagen
• Visa formulärsfält för att fylla i uppgifter om dagen
• Välja dagen (som en av flera)

Valbara dagar

Det går att styra vilka dagar som är valbara genom att:

• Sätt en period för inom vilken det ska finnas valbara dagar
• Ange enskilda dagar som inte är valbara
• Ange veckodagar som inte är valbara.

Användaren kan klicka på en dag som inte är valbar, därmed kan du välja att visa ett felmeddelande på ett lämpligt sätt.

För att sätta det lägsta och högsta möjliga datumet att välja skickar du in en FDate till minDate respektive maxDate.

<f-calendar v-model="month" :min-date="min" :max-date="max"></f-calendar>

Storlek

Kalendern är 100% i bredd. För att ändra bredden placeras kalendern i en container som hanterar komponentens bredd.

Kolumnen med veckonummer visas inte på skärmar som är under 325px breda.

Månad som visas

För att hantera vilken månad som visas används v-model. Den tar en FDate och visar aktuell månad för datumet oavsett vilken dag som skickas in.

Tabindex

När användare går till kalendern med tab så får första dagen i månaden fokus. För att ändra detta beteende skickar du in en FDate med den dag som ska få fokus till tabDate. Då hamnar fokus på den dagen om den finns i den aktuella månaden.

 <f-calendar
     v-model="model"
     :min-date="min"
     :max-date="max"
+    :tab-date="tabDay"
 ></f-calendar>

Egen dagkomponent

Kalendern använder en dagkomponent, antingen <f-calendar-day> eller en egen komponent.

I följande exempel av kalendern har en egen dagkomponent använts för att skapa en kalender med olika schemalagda händelser.

<template>
    <f-calendar
        v-model="month"
        :min-date="min"
        :max-date="max"
        :tab-date="tabDay"
        @click="onSelectDay"
    >
        <template #default="{ date }">
            <span :class="dayClasses(date)">
                <span class="date"> {{ date.day }} </span>
                <span :class="eventClasses(date)"> {{ getEvents(date) }} </span>
            </span>
        </template>
    </f-calendar>
</template>

<script>
import { defineComponent } from "vue";
import { FDate } from "@fkui/date";
import { FCalendar } from "@fkui/vue";

const holidays = [
    {
        date: "12-24",
        text: "Julafton",
    },
    {
        date: "12-25",
        text: "Juldagen",
    },
    {
        date: "12-26",
        text: "Annandag jul",
    },
];

const events = [
    "Standup",
    "Tillgänglighetsmöte",
    "Mötesfri dag",
    "",
    "Fikadags",
    "Förfining",
    "Långlunch",
    "Gymdag",
    "Tandläkare",
    "PR Review",
    "Möte med FKUI",
    "Bidra till FKUI",
    "Födelsedag",
    "Designmöte",
];

const randomEvents = [];

for (let i = 0; i < 31; i++) {
    const randomIndex = Math.floor(Math.random() * events.length);
    const randomEvent = events[randomIndex];

    randomEvents.push(randomEvent);
}

export default defineComponent({
    name: "FCalendarCustom",
    components: {
        FCalendar,
    },
    data() {
        return {
            month: FDate.fromIso("2022-12-24"),
            min: FDate.fromIso("2020-01-01"),
            max: FDate.fromIso("2029-01-30"),
            tabDay: FDate.fromIso("2022-12-24"),
            selectedDay: undefined,
        };
    },
    methods: {
        getEvents(date) {
            const dayOfYear = `${date.month}-${date.day}`;

            const match = holidays.find((it) => it.date === dayOfYear);
            if (match) {
                return match.text;
            }

            const eventIndex = date.day - 1;
            return randomEvents[eventIndex];
        },
        eventClasses(date) {
            const classes = ["event"];
            const dayOfYear = `${date.month}-${date.day}`;

            const match = holidays.find((it) => it.date === dayOfYear);
            if (match) {
                classes.push("holiday");
            }

            return classes;
        },
        dayClasses(date) {
            const classes = ["my-custom-day"];

            if (this.selectedDay && date.equals(this.selectedDay)) {
                classes.push("selected");
            }

            return classes;
        },
        onSelectDay(date) {
            this.selectedDay = date;
        },
    },
});
</script>

<style>
.my-custom-day {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 4rem;
    font-size: 12px;
    text-align: left;
    color: black;
    border: 1px solid black;
}
.selected {
    border: 3px solid green;
}
.event {
    width: 100%;
    color: black;
    background-color: #c6e0ff;
}
.holiday {
    color: white;
    background-color: #640000;
}
</style>

Välja flera dagar

I följande exempel av kalendern kan man välja flera dagar och visuellt se vilka dagar som är valda. Alla valda dagar sparas ner till en array.

 <f-calendar
     v-model="month"
     :min-date="min"
     :max-date="max"
+    @click="onSelectDay"
 >
     <template #default="{ date, isFocused }">
         <f-calendar-day
             data-test="multiple-days"
             :day="date"
             :focused="isFocused"
+            :selected="isSelected(date)"
         ></f-calendar-day>
     </template>
 </f-calendar>

Metoden onSelectDay kommer i exemplet lägga till den dagen du klickar på i en array för alla dagar. Finns redan dagen i arrayen kommer den valda dagen tas bort från arrayen. Metoden isSelected(date) kommer loopa igenom vår array där dagarna sparas och kolla om den valda dagen finns. Finns den markeras den, finns den inte avmarkeras den.

Exemplet lagrar dagarna som string i arrayen.

<template>
    <div>
        <f-calendar v-model="month" :min-date="min" :max-date="max" @click="onSelectDay">
            <template #default="{ date, isFocused }">
                <f-calendar-day
                    data-test="multiple-days"
                    :day="date"
                    :focused="isFocused"
                    :selected="isSelected(date)"
                >
                </f-calendar-day>
            </template>
        </f-calendar>
        <span data-test="days-array"> Valda dagar: {{ selected }} </span>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FDate } from "@fkui/date";
import { FCalendar, FCalendarDay } from "@fkui/vue";

export default defineComponent({
    name: "FCalendarDefault",
    components: {
        FCalendar,
        FCalendarDay,
    },
    data() {
        return {
            month: FDate.fromIso("2022-10-01"),
            min: FDate.fromIso("2020-10-01"),
            max: FDate.fromIso("2029-12-31"),
            selected: [],
        };
    },
    methods: {
        onSelectDay(date) {
            const dateString = date.toString();
            if (this.selected.includes(dateString)) {
                this.selected.splice(this.selected.indexOf(dateString), 1);
            } else {
                this.selected.push(dateString);
            }
        },
        isSelected(date) {
            return this.selected.find((it) => date.equals(it)) !== undefined;
        },
    },
});
</script>

Props, Events & Slots

FCalendar

Props

v-model: FDate

Active month.

tabDate: FDate | undefined Optional

Date to set tabindex 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. Emitted when a calendar day is clicked.

Arguments:

• <anonymous>: FDate

update:modelValue

v-model event. Emitted when changing to a different month in the calendar.

Arguments:

• <anonymous>: FDate

Slots

default

Slot for calendar day.

Bindings:

• date: unknown
• is-focused: unknown

FCalendarDay

Props

day: FDate

Day to render.

enabled: boolean Optional

Set to true if day is enabled.

Default: true

focused: boolean Optional

Set to true if day is focused.

Default: false

selected: boolean Optional

Set to true if day is selected.

Default: false

highlight: boolean Optional

Set to true if day should be highlighted.

Default: false