[Calendar] Using date picker with Asian localization (ZH) has bad UI

[MarielaTihova]

Description

When using the date picker with localization for Chinese the selected date is not being styled properly

• igniteui-angular version: All
• browser: Chrome. Looks fine on Mozilla and Edge (on Windows)

Steps to reproduce

1. Create a calendar
2. Add locale to it like this

 <igx-calendar
    #calendar
    [locale]="locale"
    [weekStart]="1"
    [formatOptions]="formatOptions"
    [formatViews]="formatViews"
    >
  </igx-calendar>

3. Set locale to 'ZH'
4. Observe behaviour on Chrome

Result

Symbols are displaced and calendar UI looks bad

Expected result

No displaced items, as it is in Mozilla and Edge browsers.

[desig9stein]

@sdimchevski @simeonoff Even with text wrapping resolved, we still have an issue: the font size for dates in combined states (special + selected, current + special, first/last + special) visually overlaps with the outline.

Adjusting the font size helps, but only for the current font family. If the consumer changes the font family, the same size might no longer be appropriate. Using a relative size (% of the container) technically works, but results in a noticeably smaller appearance.

At this point, I don’t think there’s a universal “correct” value we can ship by default. It might be best to document that users can tune the date font size using the global variable if their typography requires additional space.

Small font size

[sdimchevski]

From my research it seems it is not mandatory to include the character 日 after the day number. While 日 is commonly used in full written dates (e.g., 12月10日) to indicate the day, modern UI design practices often omit it inside the calendar grid for clarity and simplicity. Many contemporary Chinese applications display only the numeric day value (e.g., 10).

Therefore, limiting the date display within calendar cells to two characters (two digits) is completely acceptable and consistent with standard UI conventions. The full date with 日 can still be shown in the header if desired, but its use is not required within the calendar’s day cells.

@randriova Any insight we might be overlooking?

[randriova]

From my research it seems it is not mandatory to include the character 日 after the day number. While 日 is commonly used in full written dates (e.g., 12月10日) to indicate the day, modern UI design practices often omit it inside the calendar grid for clarity and simplicity. Many contemporary Chinese applications display only the numeric day value (e.g., 10).

Therefore, limiting the date display within calendar cells to two characters (two digits) is completely acceptable and consistent with standard UI conventions. The full date with 日 can still be shown in the header if desired, but its use is not required within the calendar’s day cells.

@randriova Any insight we might be overlooking?

I agree that adding 日 inside the calendar grid here is unnecessary. Using only numbers is the right approach.