How to enable culture support in Kendo UI for Vue?

Question

There are Vue PWA template and Kendo UI for Vue used in my website. There is also Calendar component and need to set its culture to "ru-RU".

In simple jQuery app I would use code (from Globalization Overview):

<script src="kendo.culture.ru-RU.js"></script>

<script type="text/javascript">
     //set current to the "ru-RU" culture script
     kendo.culture("ru-RU");
</script>

and this would perfectly work.

What is the common way to set culture in Vue App?

Answer 1

I was not able to find any official way in documentation. I used workaround (костыль) directly in my Vue component:

<!-- HTML -->
<kendo-calendar culture="ru-RU"> </kendo-calendar> 

// JavaScript
beforeCreate () {
  window.kendo.cultures['ru-RU'] = {
    name: 'ru-RU',
    numberFormat: {
      pattern: ['-n'],
      decimals: 2,
      ',': ' ',
      '.': ',',
      groupSize: [3],
      percent: {
        pattern: ["-n%','n%"],
        decimals: 2,
        ',': ' ',
        '.': ',',
        groupSize: [3],
        symbol: '%'
      },
      currency: {
        name: 'Russian Ruble',
        abbr: 'RUB',
        pattern: ["-n $','n $"],
        decimals: 2,
        ',': ' ',
        '.': ',',
        groupSize: [3],
        symbol: '₽'
      }
    },
    calendars: {
      standard: {
        days: {
          names: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'],
          namesAbbr: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
          namesShort: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']
        },
        months: {
          names: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
          namesAbbr: ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']
        },
        AM: [''],
        PM: [''],
        patterns: {
          d: 'dd.MM.yyyy',
          D: 'd MMMM yyyy "г."',
          F: 'd MMMM yyyy "г." H:mm:ss',
          g: 'dd.MM.yyyy H:mm',
          G: 'dd.MM.yyyy H:mm:ss',
          m: 'd MMMM',
          M: 'd MMMM',
          s: 'yyyy"-"MM"-"dd"T"HH":"mm":"ss',
          t: 'H:mm',
          T: 'H:mm:ss',
          u: 'yyyy"-"MM"-"dd HH":"mm":"ss"Z"',
          y: 'MMMM yyyy',
          Y: 'MMMM yyyy'
        },
        '/': '.',
        ':': ':',
        firstDay: 1
      }
    }
  }

  window.kendo.culture('ru-RU')
}