Kalender

Komponent: FCalendar , FCalendarDay
Status: Preliminär

Innehåll

Valbara dagar
Storlek
Månad som visas
Tabindex
Egen dagkomponent
Välja flera dagar
Props, Events & Slots

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.

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
Name	Description	Type	Required	Default
v-model	Active month.	FDate	true	‐
tabDate	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.	FDate \| undefined	false	undefined
minDate	Min date.	FDate	true	‐
maxDate	Max date.	FDate	true	‐

Events
Name	Description	Properties
click	`click` event. Emitted when a calendar day is clicked.	<anonymous>: FDate
change	Vue2 `v-model` event. Emitted when changing to a different month in the calendar.	<anonymous>: FDate
update:modelValue	`v-model` event. Emitted when changing to a different month in the calendar.	<anonymous>: FDate

Slots
Name	Description	Bindings
default	Slot for calendar day.	date is-focused

FCalendarDay

Props
Name	Description	Type	Required	Default
day	Day to render.	FDate	true	‐
enabled	Set to `true` if day is enabled.	boolean	false	true
focused	Set to `true` if day is focused.	boolean	false	false
selected	Set to `true` if day is selected.	boolean	false	false
highlight	Set to `true` if day should be highlighted.	boolean	false	false

Kakor på webbplatsen

Kalender