mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 16:00:39 +01:00
feat(Calendar): implement component (#2618)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { CalendarDate } from '@internationalized/date'
|
||||
|
||||
const modelValue = shallowRef(new CalendarDate(2022, 1, 10))
|
||||
|
||||
function getColorByDate(date: Date) {
|
||||
const isWeekend = date.getDay() % 6 == 0
|
||||
const isDayMeeting = date.getDay() % 3 == 0
|
||||
|
||||
if (isWeekend) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
if (isDayMeeting) {
|
||||
return 'error'
|
||||
}
|
||||
|
||||
return 'success'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCalendar v-model="modelValue">
|
||||
<template #day="{ day }">
|
||||
<UChip :show="!!getColorByDate(day.toDate('UTC'))" :color="getColorByDate(day.toDate('UTC'))" size="2xs">
|
||||
{{ day.day }}
|
||||
</UChip>
|
||||
</template>
|
||||
</UCalendar>
|
||||
</template>
|
||||
Reference in New Issue
Block a user