localization

Any language Intl knows, and the first day of the week of your users.

Lun.Mar.Mer.Jeu.Ven.Sam.Dim.

pick a day

locale

en (the default) and es have every text built in. Any other BCP 47 tag, 'fr-FR' or 'de', takes its month and weekday names from Intl, with a capital letter, and needs the other texts in labels: TypeScript asks for them.

import { Calendar, type Labels } from 'qwik-date';

const fr: Labels = {
  calendar: 'Calendrier',
  previousMonth: 'Mois précédent',
  nextMonth: 'Mois suivant',
  previousYear: 'Année précédente',
  nextYear: 'Année suivante',
  previousYears: 'Années précédentes',
  nextYears: 'Années suivantes',
  selectedDate: 'date sélectionnée :',
  selectedRange: 'période sélectionnée :',
  selectedDates: 'dates sélectionnées :',
};

<Calendar locale="fr-FR" labels={fr} weekStartsOn={1} />;

labels

The texts Intl can't give. Screen readers read them: the buttons have no text of their own.

calendarThe calendar's accessible name, before the selection.
previousMonth, nextMonthThe month buttons.
previousYear, nextYearThe same buttons while the months of a year show.
previousYears, nextYearsThe same buttons while twelve years show.
selectedDateBetween the name and the selected day: date sélectionnée :.
selectedRange, selectedDatesThe same, for a range and for mode="multiple".

With en and es, labels takes some of them, and the others stay as they are:

// en and es take some of the texts: the others stay built in
<Calendar locale="es" labels={{ calendar: 'Fecha de entrega' }} />

first day of the week

weekStartsOn is the first column, from 0 (Sunday, the default) to 6, as in Date#getDay(). It doesn't follow the locale: set it for your users.

formatting

formatDate and formatDateRange take the same locales, built in or not, for a trigger or a label. Try them in the API of the Calendar.

← previousFormsnext →Theming