Calendar header format customization

[Semigradsky]

I wan't to show only first letters for day names in calendar header. I see that getting day names as first letters is possible by calling getDayNames with narrow format https://github.com/DevExpress/DevExtreme/blob/71917a3f204808bfcdae22179b10ad358b638f1d/js/localization/intl/date.js#L161-L167

Currently in calendar we use abbreviated format https://github.com/DevExpress/DevExtreme/blob/71917a3f204808bfcdae22179b10ad358b638f1d/js/ui/calendar/ui.calendar.views.js#L114-L122

Could you please add possibility to customize it?

[San4es]

Hi,

The suggested customization looks rather narrow to me.

I want to show only first letters for day names in calendar header.

How critical is it for you?

[Semigradsky]

How critical is it for you?

My design is needed it. Three letters currently looks a bit messy.

Maybe it would be better to be able to customize it via DevExpress.localization.loadMessages or smth like this?

I googled datepicker js and all datepickers which I see have possibility to customize day names in header:

1. jquery ui - https://api.jqueryui.com/datepicker/#option-dayNamesMin
2. Datepicker.js - https://github.com/qodesmith/datepicker#customdays
3. bootstrap-datepicker - daysMin - https://bootstrap-datepicker.readthedocs.io/en/latest/i18n.html
4. @chenfengyuan/datepicker - https://github.com/fengyuanchen/datepicker#daysmin
5. Date Range Picker - (badly documented but can be configured) - https://github.com/dangrossman/daterangepicker/blob/8495717c4007a03fd5dee422f161811fd6140c0e/daterangepicker.js#L79
6. Pikaday - weekdaysShort - https://github.com/Pikaday/Pikaday#internationalization
7. ...

[San4es]

Thank you for your idea and clarification! We will think about it when planning new features. Currently, we cannot provide you with an ETA on this. If we decide to work on this, we will post an announcement on GitHub, blogs, and Roadmap.

[Semigradsky]

My currently workaround if it will be usefull for smb:

/* Hack for display only firt character on calendar header */
.dx-calendar-body thead tr th {
  visibility: hidden;
  padding-left: 14px;
  overflow: visible;

  &::first-letter {
    visibility: visible;
  }
}

[San4es]

I am happy to hear that you found a solution. Thank you for sharing it!