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 ).
<template >
<i-calendar-month v-model ="month" :min-date ="minDate" :max-date ="maxDate" @click ="onClick" >
<template #default ="{ date }" > {{ date.day }}</template >
</i-calendar-month >
</template >
<script lang ="ts" >
import { defineComponent, shallowRef } from "vue" ;
import { ICalendarMonth } from "@fkui/vue" ;
import { FDate } from "@fkui/date" ;
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 ${date.day} ` );
},
},
});
</script >
<template >
<i-calendar-month v-model ="month" :min-date ="minDate" :max-date ="maxDate" @click ="onClick" >
<template #default ="{ date, isFocused }" >
<f-calendar-day :day ="date" :focused ="isFocused" > </f-calendar-day >
</template >
</i-calendar-month >
</template >
<script lang ="ts" >
import { defineComponent, shallowRef } from "vue" ;
import { ICalendarMonth , FCalendarDay } from "@fkui/vue" ;
import { FDate } from "@fkui/date" ;
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 ${date.day} ` );
},
},
});
</script >
Props Name Description Type Required Default v-model
Active month.
FDate
true
‐
tabDate
Date to focus on when component gains focus.
Consumers can update this related to active month.
FDate | undefined
false
undefined
minDate
Min date.
FDate
true
‐
maxDate
Max date.
FDate
true
‐
Events Name Description Properties change
Vue2 v-model event.
<anonymous>: string
click
click event.
<anonymous>: string
update:modelValue
v-model event.
<anonymous>: string
Slots Name Description Bindings default
Slot for rendering of day content.
date