feat(Calendar): add week numbers

playground/app/pages/components/calendar.vue

@@ -12,13 +12,13 @@ const rangeValue = shallowRef({
 <template>
   <div class="flex gap-4">
     <div class="flex justify-center gap-2">
-      <UCalendar v-model="singleValue" />
+      <UCalendar v-model="singleValue" week-numbers />
     </div>
     <div class="flex justify-center gap-2">
-      <UCalendar v-model="multipleValue" multiple />
+      <UCalendar v-model="multipleValue" multiple week-numbers />
     </div>
     <div class="flex justify-center gap-2">
-      <UCalendar v-model="rangeValue" range />
+      <UCalendar v-model="rangeValue" range week-numbers />
     </div>
   </div>
 </template>

src/runtime/components/Calendar.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui'
+import { getWeekNumber } from 'reka-ui/date'
 import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/calendar'
@@ -90,6 +91,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
   yearControls?: boolean
   defaultValue?: CalendarDefaultValue<R, M>
   modelValue?: CalendarModelValue<R, M>
+  weekNumbers?: boolean
   class?: any
   ui?: Calendar['slots']
 }
@@ -135,7 +137,8 @@ const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === 'rtl'
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })({
   color: props.color,
-  size: props.size
+  size: props.size,
+  weekNumbers: props.weekNumbers
 }))
 
 function paginateYear(date: DateValue, sign: -1 | 1) {
@@ -186,6 +189,9 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
       >
         <Calendar.GridHead>
           <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <th v-if="weekNumbers" :aria-label="t('calendar.week')" :class="ui.headCellWeek({ class: props.ui?.headCellWeek })">
+              {{ t('calendar.weekShort') }}
+            </th>
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
@@ -203,6 +209,9 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
             :key="`weekDate-${index}`"
             :class="ui.gridRow({ class: props.ui?.gridRow })"
           >
+            <td v-if="weekNumbers && weekDates[0]" role="gridcell" :class="ui.cellWeek({ class: props.ui?.cellWeek })">
+              {{ getWeekNumber(weekDates[0], locale) }}
+            </td>
             <Calendar.Cell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"

src/runtime/locale/ar.ts

@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'السنة السابقة',
       nextYear: 'السنة المقبلة',
       prevMonth: 'الشهر السابق',
-      nextMonth: 'الشهر المقبل'
+      nextMonth: 'الشهر المقبل',
+      week: 'أسبوع',
+      weekShort: 'أسب.'
     },
     inputNumber: {
       increment: 'زيادة',

src/runtime/locale/az.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Əvvəlki il',
       nextYear: 'Növbəti il',
       prevMonth: 'Əvvəlki ay',
-      nextMonth: 'Növbəti ay'
+      nextMonth: 'Növbəti ay',
+      week: 'həftə',
+      weekShort: 'həf.'
     },
     inputNumber: {
       increment: 'Artır',

src/runtime/locale/bg.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Предишна година',
       nextYear: 'Следваща година',
       prevMonth: 'Предишен месец',
-      nextMonth: 'Следващ месец'
+      nextMonth: 'Следващ месец',
+      week: 'седмица',
+      weekShort: 'седм.'
     },
     inputNumber: {
       increment: 'Увеличаване',

src/runtime/locale/bn.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'পূর্ববর্তী বছর',
       nextYear: 'পরবর্তী বছর',
       prevMonth: 'পূর্ববর্তী মাস',
-      nextMonth: 'পরবর্তী মাস'
+      nextMonth: 'পরবর্তী মাস',
+      week: 'সপ্তাহ',
+      weekShort: 'সপ্.'
     },
     inputNumber: {
       increment: 'বৃদ্ধি করুন',

src/runtime/locale/ca.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Any anterior',
       nextYear: 'Any següent',
       prevMonth: 'Mes anterior',
-      nextMonth: 'Mes següent'
+      nextMonth: 'Mes següent',
+      week: 'setmana',
+      weekShort: 'setm.'
     },
     inputNumber: {
       increment: 'Incrementar',

src/runtime/locale/ckb.ts

@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'ساڵی پێشوو',
       nextYear: 'ساڵی داهاتوو',
       prevMonth: 'مانگی پێشوو',
-      nextMonth: 'مانگی داهاتوو'
+      nextMonth: 'مانگی داهاتوو',
+      week: 'هەفتە',
+      weekShort: 'هەف.'
     },
     inputNumber: {
       increment: 'زیادکردن',

src/runtime/locale/cs.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Předchozí rok',
       nextYear: 'Další rok',
       prevMonth: 'Předchozí měsíc',
-      nextMonth: 'Další měsíc'
+      nextMonth: 'Další měsíc',
+      week: 'týden',
+      weekShort: 'týd.'
     },
     inputNumber: {
       increment: 'Zvýšit',

src/runtime/locale/da.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Forrige år',
       nextYear: 'Næste år',
       prevMonth: 'Forrige måned',
-      nextMonth: 'Næste måned'
+      nextMonth: 'Næste måned',
+      week: 'uge',
+      weekShort: 'u.'
     },
     inputNumber: {
       increment: 'Øg',

src/runtime/locale/de.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Vorheriges Jahr',
       nextYear: 'Nächstes Jahr',
       prevMonth: 'Vorheriger Monat',
-      nextMonth: 'Nächster Monat'
+      nextMonth: 'Nächster Monat',
+      week: 'Woche',
+      weekShort: 'KW'
     },
     inputNumber: {
       increment: 'Erhöhen',

src/runtime/locale/el.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Προηγούμενο έτος',
       nextYear: 'Επόμενο έτος',
       prevMonth: 'Προηγούμενος μήνας',
-      nextMonth: 'Επόμενος μήνας'
+      nextMonth: 'Επόμενος μήνας',
+      week: 'εβδομάδα',
+      weekShort: 'εβδ.'
     },
     inputNumber: {
       increment: 'Αύξηση',

src/runtime/locale/en.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Previous year',
       nextYear: 'Next year',
       prevMonth: 'Previous month',
-      nextMonth: 'Next month'
+      nextMonth: 'Next month',
+      week: 'week',
+      weekShort: 'wk'
     },
     inputNumber: {
       increment: 'Increment',

src/runtime/locale/es.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Año anterior',
       nextYear: 'Año siguiente',
       prevMonth: 'Mes anterior',
-      nextMonth: 'Mes siguiente'
+      nextMonth: 'Mes siguiente',
+      week: 'semana',
+      weekShort: 'sem.'
     },
     inputNumber: {
       increment: 'Incremento',

src/runtime/locale/et.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Eelmine aasta',
       nextYear: 'Järgmine aasta',
       prevMonth: 'Eelmine kuu',
-      nextMonth: 'Järgmine kuu'
+      nextMonth: 'Järgmine kuu',
+      week: 'nädal',
+      weekShort: 'näd'
     },
     inputNumber: {
       increment: 'Suurenda',

src/runtime/locale/fa_ir.ts

@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'سال گذشته',
       nextYear: 'سال آینده',
       prevMonth: 'ماه گذشته',
-      nextMonth: 'ماه آینده'
+      nextMonth: 'ماه آینده',
+      week: 'هفته',
+      weekShort: 'هف.'
     },
     inputNumber: {
       increment: 'افزایش',

src/runtime/locale/fi.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Edellinen vuosi',
       nextYear: 'Seuraava vuosi',
       prevMonth: 'Edellinen kuukausi',
-      nextMonth: 'Seuraava kuukausi'
+      nextMonth: 'Seuraava kuukausi',
+      week: 'viikko',
+      weekShort: 'vk'
     },
     inputNumber: {
       increment: 'Kasvata',

src/runtime/locale/fr.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Année précédente',
       nextYear: 'Année suivante',
       prevMonth: 'Mois précédent',
-      nextMonth: 'Mois suivant'
+      nextMonth: 'Mois suivant',
+      week: 'semaine',
+      weekShort: 'sem.'
     },
     inputNumber: {
       increment: 'Augmenter',

src/runtime/locale/he.ts

@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'שנה קודמת',
       nextYear: 'שנה הבאה',
       prevMonth: 'חודש קודם',
-      nextMonth: 'חודש הבא'
+      nextMonth: 'חודש הבא',
+      week: 'שבוע',
+      weekShort: 'שב.'
     },
     inputNumber: {
       increment: 'הוסף',

src/runtime/locale/hi.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'पिछला वर्ष',
       nextYear: 'अगला वर्ष',
       prevMonth: 'पिछला महीना',
-      nextMonth: 'अगला महीना'
+      nextMonth: 'अगला महीना',
+      week: 'सप्ताह',
+      weekShort: 'सप्.'
     },
     inputNumber: {
       increment: 'बढ़ाना',

src/runtime/locale/hu.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Előző év',
       nextYear: 'Következő év',
       prevMonth: 'Előző hónap',
-      nextMonth: 'Következő hónap'
+      nextMonth: 'Következő hónap',
+      week: 'hét',
+      weekShort: 'hét'
     },
     inputNumber: {
       increment: 'Növel',

src/runtime/locale/hy.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Նախորդ տարի',
       nextYear: 'Հաջորդ տարի',
       prevMonth: 'Նախորդ ամիս',
-      nextMonth: 'Հաջորդ ամիս'
+      nextMonth: 'Հաջորդ ամիս',
+      week: 'շաբաթ',
+      weekShort: 'շաբ.'
     },
     inputNumber: {
       increment: 'Ավելացնել',

src/runtime/locale/id.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Tahun sebelumnya',
       nextYear: 'Tahun berikutnya',
       prevMonth: 'Bulan sebelumnya',
-      nextMonth: 'Bulan berikutnya'
+      nextMonth: 'Bulan berikutnya',
+      week: 'minggu',
+      weekShort: 'mgg.'
     },
     inputNumber: {
       increment: 'Tambah',

src/runtime/locale/it.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Anno precedente',
       nextYear: 'Anno successivo',
       prevMonth: 'Mese precedente',
-      nextMonth: 'Mese successivo'
+      nextMonth: 'Mese successivo',
+      week: 'settimana',
+      weekShort: 'sett.'
     },
     inputNumber: {
       increment: 'Aumenta',

src/runtime/locale/ja.ts

@@ -12,9 +12,11 @@ export default defineLocale<Messages>({
     },
     calendar: {
       prevYear: '前年',
-      nextYear: '翌年',
+      nextYear: '来年',
       prevMonth: '前月',
-      nextMonth: '翌月'
+      nextMonth: '来月',
+      week: '週',
+      weekShort: '週'
     },
     inputNumber: {
       increment: '増やす',

src/runtime/locale/kk.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Алдыңғы жыл',
       nextYear: 'Келесі жыл',
       prevMonth: 'Алдыңғы ай',
-      nextMonth: 'Келесі ай'
+      nextMonth: 'Келесі ай',
+      week: 'апта',
+      weekShort: 'ап.'
     },
     inputNumber: {
       increment: 'Арттыру',

src/runtime/locale/km.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'ឆ្នាំមុន',
       nextYear: 'ឆ្នាំបន្ទាប់',
       prevMonth: 'ខែមុន',
-      nextMonth: 'ខែបន្ទាប់'
+      nextMonth: 'ខែបន្ទាប់',
+      week: 'សប្តាហ៍',
+      weekShort: 'សប្ដា'
     },
     inputNumber: {
       increment: 'បង្កើន',

src/runtime/locale/ko.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: '이전 해',
       nextYear: '다음 해',
       prevMonth: '이전 달',
-      nextMonth: '다음 달'
+      nextMonth: '다음 달',
+      week: '주',
+      weekShort: '주'
     },
     inputNumber: {
       increment: '증가',

src/runtime/locale/ky.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Алдыңкы жыл',
       nextYear: 'Кийинки жыл',
       prevMonth: 'Алдыңкы ай',
-      nextMonth: 'Кийинки ай'
+      nextMonth: 'Кийинки ай',
+      week: 'жума',
+      weekShort: 'жум.'
     },
     inputNumber: {
       increment: 'Кошуу',

src/runtime/locale/lb.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Viregt Joer',
       nextYear: 'Nächst Joer',
       prevMonth: 'Virege Mount',
-      nextMonth: 'Nächste Mount'
+      nextMonth: 'Nächste Mount',
+      week: 'Woch',
+      weekShort: 'W.'
     },
     inputNumber: {
       increment: 'Inkrementéieren',

src/runtime/locale/lt.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Ankstesni metai',
       nextYear: 'Kiti metai',
       prevMonth: 'Ankstesnis mėnuo',
-      nextMonth: 'Kitas mėnuo'
+      nextMonth: 'Kitas mėnuo',
+      week: 'savaitė',
+      weekShort: 'sav.'
     },
     inputNumber: {
       increment: 'Padidinti',

src/runtime/locale/mn.ts

@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Өмнөх жил',
       nextYear: 'Дараа жил',
       prevMonth: 'Өмнөх сар',
-      nextMonth: 'Дараа сар'
+      nextMonth: 'Дараа сар',
+      week: '7 хоног',
+      weekShort: '7х'
     },
     inputNumber: {
       increment: 'Нэмэх',