Bootstrap Calendar zh. Option to remove extra words

[Dean-Christian-Armada]

周日
周一
周二
周三
周四
周五
周六

• Above is the current words for the day names like Monday, Tuesday and so on but can also be written shorter like below

日
一
二
三
四
五
六

Then the days are written as 1日, 2日, 3日 and so on but can be written as simply as 1, 2, 3.

These can also be important at some point save and texts and spaces

[tmorehouse]

We use Intl.dateTimeFormat to generate the translations for the weekday names and for the dates (i.e. 1, 2, 3, 4). The Intl implementation can vary slightly from browser to browser. We do not use a translation table/object.

[Dean-Christian-Armada]

I hope we can have options to also use narrows on days. I can see in the code that there are many static values for Intl.DateTimeFormat

[Dean-Christian-Armada]

We use Intl.dateTimeFormat to generate the translations for the weekday names and for the dates (i.e. 1, 2, 3, 4). The Intl implementation can vary slightly from browser to browser. We do not use a translation table/object.

I think one possible solution here is to have a props of another locale for a certain part of the calendar

[tmorehouse]

For the calendar weekday headers we will be adding the prop weekday-header-format which will accept one of three values: 'long', 'short' (current default), and 'narrow'.

For the date numbers (eg. 1, 2, 3, etc), there are only two options for Intl, of which we use numeric (the other is 2-digit). So there wont be a way to change 1日 to just 1 unfortunately.

[Dean-Christian-Armada]

Can we add like a prop to be used as the locale for like the days only?

When I first checked through the code I thought there was a prop for calendarLocale since the context shows that there is a separated data for locale and calendarLocale. But upon checking carefully it is a computed property. I thought can be used to change the days format

I believe this issue of mine can be solved with my suggestion above

[tmorehouse]

Intl.dateTimeFormat when formatting the date (day value only) for zh, only has two options: numeric and 2-digit. The numeric option formats as 1日 and 2-digit option formats as 01日

[tmorehouse]

calendarLocale is used to enforce the gergorian calendar for IE, otherwise it is identical to computedLocale. Both values may differ from the prop locale, as we first resolve the requested locale(s) to see if they are supported, or it falls back to the browser default locale.

[Dean-Christian-Armada]

I meant in calendar.js.. Instead of plainly this.calendarLocale which only points in locale prop.. There will be a new prop like calendarDayLocale then we can put en there

formatDay: function formatDay() {
      return createDateFormatter(this.calendarLocale, {
        day: 'numeric',
        calendar: 'gregory'
      });
    },

E.g. of my suggestion

<b-calendar
        v-model="calendarDate"
        locale="zh"
        calendarDayLocale="en"
        hideHeader
        id="zone-calendar"
        @context="onContext"
        :date-info-fn="calendarClass"
        block
      >

[tmorehouse]

The only other option, is that we could use Intl.NumberFormat to format the day number instead of `Intl.DateTimeFormat", which is probably a better solution that introducing a new prop that requires the locale to be re-resolved

[Dean-Christian-Armada]

The only other option, is that we could use Intl.NumberFormat to format the day number instead of `Intl.DateTimeFormat", which is probably a better solution that introducing a new prop

Oh ok possible. So maybe in the next version this approach will be released?

Can you give a brief example? I think I get the idea but not completely

[tmorehouse]

Intl.DateTimeFormat formatter expects a date object to be formatted (and the format will relate to date presentation), where as Intl.NumberFormat is just for formatting numbers in a locale (and appropriate script... i.e. ar-EG uses Arabic numerals instead of regular en numerals, correct thousands separator, decimal symbol, etc)

We would have to get the date number from the date object and then pass to the number formatter... instead of just directly passing the date value to DateTime formatter.

[Dean-Christian-Armada]

Ok, I understand now. So I can like pass zh-EN in locale correct?

[tmorehouse]

No....

You would still pass in a standard locale (the value after the - is a country/region code, not a language code), i.e. zh.

Internally we would create the number formatter to use the resolved computedLocale, but since number formatter doesn't have a "date" association, it wont stick 日 after the number.

[Dean-Christian-Armada]

Hmm, I think I will just wait for the actual release of that feature and see the actual procedure. Thanks tmorehouse

[tmorehouse]

There wont be anything special you will need to do... except set the weekday-header-format prop to 'narrow' to adjust the weekday headings to get just a single weekday name symbol

[tmorehouse]

You can take a look at the preview at https://bootstrap-vue-git-calendar-date-buttons.bootstrap-vue.now.sh/docs/components/calendar#internationalization

[Dean-Christian-Armada]

Oh this document.. How can I use this?? I am currently using npm.. Sorry but I am kinda new in frontend

[tmorehouse]

This isn't released yet. It will be available in v2.12.0 (which will be available on NPM)

[Dean-Christian-Armada]

This isn't released yet. It will be available in v2.12.0 (which will be available on NPM)

Ok, I will just wait for the release but it is very good to know that my issue can be done on the next release. I am really thankful for your assistance

[tmorehouse]

We are hoping to have v2.12.0 released on Sunday.