mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
31 lines
662 B
Vue
31 lines
662 B
Vue
<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>
|