Nuxt•4mo ago

UCalendar (change week days)

Hello! Can someone please give me an example of how I can display the weekdays in a different language in the UCalendar component? I saw that there's a week-day slot for this, but with <template #week-day="{ day }">{{ day }}</template> I get the first letter of the english weekdays and not the indices 0-6.

11 Replies

kapa.ai•4mo ago

Hi @mabuse9922. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To display the weekdays in a different language in the UCalendar component, you can use the week-day slot as you mentioned. By default, the day value provided to the slot is already localized according to the calendar's locale settings. However, the documentation does not provide a direct example of changing the language via the slot itself—it only shows that the slot receives a localized string (e.g., the first letter of the weekday in English) and not the index (0-6) or a way to override the language directly through the slot. If you want the weekdays to appear in a different language, you should set the locale of the calendar component or the app itself. The UCalendar component relies on the @internationalized/date package, which handles localization based on the current locale. The slot will then receive the localized weekday string automatically. Here’s how you might use the slot:

<template>
  <UCalendar>
    <template #week-day="{ day }">
      {{ day }}
    </template>
  </UCalendar>
</template>

<template>
  <UCalendar>
    <template #week-day="{ day }">
      {{ day }}
    </template>
  </UCalendar>
</template>

If you are seeing English letters, it means your app or calendar is currently set to the English locale. To change the language, you need to set the locale for your app or for the calendar. The documentation for Nuxt UI i18n shows how to set the locale globally using the UApp component and the locale prop. When you change the locale, the weekdays in UCalendar should automatically update to the correct language:

<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>

<template>
  <UApp :locale="fr">
    <UCalendar />
  </UApp>
</template>

<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>

<template>
  <UApp :locale="fr">
    <UCalendar />
  </UApp>
</template>

This will render the weekdays in French. The week-day slot will then receive the localized weekday string in French. Summary:
- The week-day slot receives a localized string, not an index. - To change the language, set the app or calendar locale using the Nuxt UI i18n system. - The slot will then display the weekday in the selected language automatically. References:
- UCalendar Slots - Nuxt UI I18n Locale Usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1097891465797050469> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mabuse9922OP•4mo ago

@kapa.ai changing the locale is a goot solution for me. But it is possible to show the wekdays with 2 letters?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly mention a built-in way to display weekdays with two letters in the UCalendar component. The week-day slot provides a day property, which is a localized string for the weekday, and the weekdayFormat prop allows you to choose between "narrow", "short", or "long" formats. However, the documentation does not specify if "short" corresponds to two-letter abbreviations for all locales, nor does it show an example of customizing the output to exactly two letters. You can try using the weekdayFormat prop with the value "short":

<template>
  <UCalendar :weekday-format="'short'" />
</template>

<template>
  <UCalendar :weekday-format="'short'" />
</template>

If the "short" format in your selected locale uses two letters, this will work. Otherwise, the component does not provide a documented way to force exactly two-letter weekday names. If you need more control, you might need to manually map or slice the day string in the week-day slot, but this approach is not covered in the official documentation and may not be locale-safe. Reference: UCalendar Props - weekdayFormat ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1097891465797050469> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mabuse9922OP•4mo ago

@kapa.ai Wonderful

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you! If you have any more questions about using UCalendar or anything else related to Nuxt, feel free to ask. 😊 ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1097891465797050469> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

mabuse9922OP•4mo ago

@kapa.ai Is it possible to show weekend days in another color?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, it is possible to customize the appearance of individual days in the UCalendar component using the day slot. The documentation provides an example where the Chip component is used to style specific days based on custom logic. In that example, you can determine if a day is a weekend and apply a different color or style accordingly. Here’s a simplified example based on the documentation, where weekend days are shown in a different color:

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef(new CalendarDate(2022, 1, 10))

function isWeekend(date) {
  const jsDate = date.toDate('UTC')
  return jsDate.getDay() === 0 || jsDate.getDay() === 6 // Sunday or Saturday
}
</script>

<template>
  <UCalendar v-model="modelValue">
    <template #day="{ day }">
      <span :class="isWeekend(day) ? 'text-red-500' : ''">
        {{ day.day }}
      </span>
    </template>
  </UCalendar>
</template>

<script setup lang="ts">
import { CalendarDate } from '@internationalized/date'

const modelValue = shallowRef(new CalendarDate(2022, 1, 10))

function isWeekend(date) {
  const jsDate = date.toDate('UTC')
  return jsDate.getDay() === 0 || jsDate.getDay() === 6 // Sunday or Saturday
}
</script>

<template>
  <UCalendar v-model="modelValue">
    <template #day="{ day }">
      <span :class="isWeekend(day) ? 'text-red-500' : ''">
        {{ day.day }}
      </span>
    </template>
  </UCalendar>
</template>

In this example, weekend days will be displayed in red. You can adjust the class or use other components as needed for your design. This approach is directly supported by the slot customization shown in the documentation UCalendar Examples. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1097891465797050469> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

UCalendar (change week days)

Did you find this page helpful?