Skip to content

Conversation

@desig9stein
Copy link
Contributor

@desig9stein desig9stein commented Dec 9, 2025

Closes #16557

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes date styling and formatting issues in the calendar component. The changes address text wrapping problems in calendar headers and improve date formatting logic to extract only the day portion when formatting is enabled.

Key changes:

  • Added white-space: nowrap CSS to prevent text wrapping in calendar headers
  • Updated day formatting logic to extract only the day part from formatted dates
  • Added Chinese locale option and IFormattingViews interface usage in the sample application

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File Description
src/app/calendar/calendar.sample.ts Added formatViews configuration and Chinese locale option to demo the calendar formatting features
projects/igniteui-angular/core/src/core/styles/components/calendar/_calendar-theme.scss Added white-space: nowrap to prevent text wrapping in calendar month and year headers
projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts Changed date formatting to extract only the day part using formatToParts instead of returning the full formatted string

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@desig9stein desig9stein requested a review from Copilot December 9, 2025 12:17
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@simeonoff simeonoff changed the title fix[(alendar): fix date styles and formating fix[(calendar): fix date styles and formating Dec 10, 2025
@simeonoff simeonoff changed the title fix[(calendar): fix date styles and formating fix(calendar): fix date styles and formating Dec 10, 2025
…in locales like zh-CN

- Introduced DayDigitPipe to strip non-numeric characters from localized day strings.
- Updated `IgxDaysViewComponent` to use the new pipe in the day formatting logic.
- Added a test to verify correct formatting for zh-CN locale.
@desig9stein desig9stein requested a review from Copilot December 10, 2025 11:38
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@desig9stein desig9stein requested a review from Copilot December 10, 2025 12:09
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@MarielaTihova MarielaTihova added ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification labels Dec 12, 2025
@simeonoff simeonoff merged commit a666485 into master Dec 12, 2025
7 of 11 checks passed
@simeonoff simeonoff deleted the mpopov/fix-calendar-date-localization-styles branch December 12, 2025 11:05
Copilot AI pushed a commit that referenced this pull request Dec 12, 2025
* fix(calendar): ensure text in calendar components does not wrap unexpectedly

* fix(calendar): update days formatting logic to extract day part and add additional locales in sample

* fix(calendar): correct locale codes in sample for Chinese regions

* fix(calendar): add DayDigitPipe to handle non-numeric day characters in locales like zh-CN

- Introduced DayDigitPipe to strip non-numeric characters from localized day strings.
- Updated `IgxDaysViewComponent` to use the new pipe in the day formatting logic.
- Added a test to verify correct formatting for zh-CN locale.

* chore(calendar): update DayDigitPipe paths

- Updated `DayDigitPipe` import paths to use relative paths.

* chore(calendar): mark DayDigitPipe as standalone
Copilot AI added a commit that referenced this pull request Dec 12, 2025
…mponent

Co-authored-by: desig9stein <21260963+desig9stein@users.noreply.github.com>
Copilot AI added a commit that referenced this pull request Dec 12, 2025
Co-authored-by: desig9stein <21260963+desig9stein@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📆 calendar localization version: 21.0.x ✅ status: verified Applies to PRs that have passed manual verification

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

4 participants