Локализация календаря

Vuetify предоставляет мощный и гибкий компонент календаря — v-calendar, который можно настраивать под различные языки и форматы отображения дат. Локализация календаря включает в себя не только перевод названий месяцев и дней недели, но и настройку форматов даты, времени, первой недели года и других региональных особенностей.

Настройка локали через vuetify и vue-i18n

Для корректной локализации календаря рекомендуется использовать связку Vuetify + Vue I18n. Это позволяет централизованно управлять переводами и форматами.

Пример подключения локализации:

import { createVuetify } from 'vuetify'
import { createI18n } from 'vue-i18n'
import 'vuetify/styles'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

const messages = {
  ru: {
    $vuetify: {
      close: 'Закрыть',
      dataIterator: {
        noResultsText: 'Совпадений не найдено',
        loadingText: 'Загрузка...',
      },
      datePicker: {
        itemsSelected: '{0} выбрано',
      },
      calendar: {
        moreEvents: 'ещё {0}',
        week: 'Неделя',
      },
    },
  },
  en: {
    $vuetify: {
      close: 'Close',
      dataIterator: {
        noResultsText: 'No matching records found',
        loadingText: 'Loading...',
      },
      datePicker: {
        itemsSelected: '{0} selected',
      },
      calendar: {
        moreEvents: 'more {0}',
        week: 'Week',
      },
    },
  },
}

const i18n = createI18n({
  locale: 'ru',
  fallbackLocale: 'en',
  messages,
})

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: { mdi },
  },
})

export { vuetify, i18n }

В этом примере переводятся основные элементы календаря, включая кнопки и текст отображения выбранных событий.

Локализация дней недели и месяцев

Компоненты v-calendar и v-date-picker используют массивы дней недели и месяцев, которые можно переопределять через свойство locale или через глобальные настройки Vuetify.

Пример задания локализованных дней и месяцев:

<template>
  <v-date-picker
    v-model="selectedDate"
    :locale="locale"
    :first-day-of-week="1"
  ></v-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      locale: 'ru',
    }
  },
}
</script>

Важно отметить:

  • first-day-of-week определяет первый день недели (0 — воскресенье, 1 — понедельник и т.д.).
  • locale отвечает за язык интерфейса календаря, включая названия месяцев и дней недели.

Формат отображения дат

Vuetify поддерживает кастомные форматы отображения через formatter для календаря и date-picker. Это позволяет подстроить отображение даты под региональные стандарты.

Пример кастомного форматирования:

<v-date-picker
  v-model="selectedDate"
  :formatter="dateFormatter"
></v-date-picker>

<script>
export default {
  data() {
    return {
      selectedDate: null,
    }
  },
  methods: {
    dateFormatter(date) {
      const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
      return new Date(date).toLocaleDateString('ru-RU', options)
    },
  },
}
</script>

Этот метод позволяет выводить даты в формате: понедельник, 17 марта 2026.

Локализация событий календаря

Для компонента v-calendar можно локализовать отображение событий, включая подписи, подсказки и количество дополнительных событий.

Пример с локализованными событиями:

<v-calendar
  :events="events"
  :locale="locale"
  event-color="blue"
></v-calendar>

<script>
export default {
  data() {
    return {
      locale: 'ru',
      events: [
        {
          name: 'Совещание',
          start: '2026-03-17',
          end: '2026-03-17',
        },
        {
          name: 'Вебинар',
          start: '2026-03-18',
          end: '2026-03-18',
        },
      ],
    }
  },
}
</script>

Текст дополнительных событий можно локализовать через $vuetify.calendar.moreEvents, чтобы при переполнении ячейки с событиями отображался перевод.

Особенности локализации для разных языков

  1. Порядок даты — В Европе обычно DD.MM.YYYY, в США — MM/DD/YYYY.
  2. Первый день недели — В России это понедельник, в США — воскресенье.
  3. Месяцы и дни недели — переводы можно задавать через locale или через Vue I18n.
  4. Форматы времени — 24-часовой или 12-часовой формат для отображения событий.

Использование этих настроек позволяет полностью адаптировать календарь под нужный регион без необходимости переписывать шаблоны или компоненты.

Динамическая смена локали

Для динамического переключения языка интерфейса можно изменять свойство locale в компоненте:

<v-date-picker v-model="selectedDate" :locale="currentLocale"></v-date-picker>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      currentLocale: 'ru',
    }
  },
  methods: {
    switchLocale(lang) {
      this.currentLocale = lang
    },
  },
}
</script>

В сочетании с Vue I18n это позволяет полностью менять язык интерфейса календаря в реальном времени без перезагрузки страницы.

Локализация календаря в Vuetify обеспечивает гибкость в отображении дат, дней недели, месяцев и событий, что делает его универсальным инструментом для приложений с мультиязычной поддержкой.

Оглавление