calendar

1<script lang="ts" setup>
2import type { CalendarRootEmits, CalendarRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import { CalendarRoot, useForwardPropsEmits } from "reka-ui"
6import { cn } from "@/lib/utils"
7import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
8 
9const props = defineProps<CalendarRootProps & { class?: HTMLAttributes["class"] }>()
10 
11const emits = defineEmits<CalendarRootEmits>()
12 
13const delegatedProps = reactiveOmit(props, "class")
14 
15const forwarded = useForwardPropsEmits(delegatedProps, emits)
16</script>
17 
18<template>
19  <CalendarRoot
20    v-slot="{ grid, weekDays }"
21    :class="cn('p-3', props.class)"
22    v-bind="forwarded"
23  >
24    <CalendarHeader>
25      <CalendarPrevButton />
26      <CalendarHeading />
27      <CalendarNextButton />
28    </CalendarHeader>
29 
30    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
31      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
32        <CalendarGridHead>
33          <CalendarGridRow>
34            <CalendarHeadCell
35              v-for="day in weekDays" :key="day"
36            >
37              {{ day }}
38            </CalendarHeadCell>
39          </CalendarGridRow>
40        </CalendarGridHead>
41        <CalendarGridBody>
42          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
43            <CalendarCell
44              v-for="weekDate in weekDates"
45              :key="weekDate.toString()"
46              :date="weekDate"
47            >
48              <CalendarCellTrigger
49                :day="weekDate"
50                :month="month.value"
51              />
52            </CalendarCell>
53          </CalendarGridRow>
54        </CalendarGridBody>
55      </CalendarGrid>
56    </div>
57  </CalendarRoot>
58</template>