Add support for the Islamic calendar #15
Conversation
| if (this._activeCalendarFormat === 'Julian' || this._activeCalendarFormat === 'Gregorian') { | ||
| return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']; | ||
| } else if (this._activeCalendarFormat === 'Islamic') { | ||
| return ['Muharram', 'Safar', 'Rabīʿ al Awwal','Rabīʿ al Ththānī', 'Jumādá al Ūlá', 'Jumādá al Ākhirah', 'Rajab','Sha‘bān', 'Ramadān','Shawwāl','Dhū al Qa‘dah', 'Dhū al Hijjah']; |
There was a problem hiding this comment.
@AlQuraian @benjamingeer Could you have a look at the month names?
There was a problem hiding this comment.
@benjamingeer Could we have look at this next week? We can also try without transliteration, but perhaps there will be RTL issue (CSS).
There was a problem hiding this comment.
Ideally both Arabic script and transliteration would be supported. I would transliterate them like this:
| Transliteration | Arabic |
|---|---|
| Muḥarram | محرم |
| Ṣafar | صفر |
| Rabīʿ al-Awwal | ربيع الأول |
| Rabīʿ al-Thānī | ربيع الثاني |
| Jumādā al-Ūlā | جمادى الأولى |
| Jumādā al-Ākhirah | جمادى الآخرة |
| Rajab | رجب |
| Shaʿbān | شعبان |
| Ramaḍān | رمضان |
| Shawwāl | شوال |
| Dhū al-Qaʿdah | ذو القعدة |
| Dhū al-Ḥijjah | ذو الججة |
We can look at this next week.
There was a problem hiding this comment.
Great, thank you very much!
I have to see how the UI behaves with Arabic script.
There was a problem hiding this comment.
I recommend reading this: https://www.w3.org/International/articles/inline-bidi-markup/
| if (this._activeCalendarFormat === 'Julian' || this._activeCalendarFormat === 'Gregorian') { | ||
| return ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat']; | ||
| } else if (this._activeCalendarFormat === 'Islamic') { | ||
| return ['al-Aḥad', 'al-Ithnayn', 'ath-Thulāthā’', ' al-Arba‘ā’', 'al-Khamīs', 'al-Jumu\'ah', 'as-Sabt']; |
There was a problem hiding this comment.
@AlQuraian @benjamingeer Could you have a look at the weekdays?
There was a problem hiding this comment.
| Transliteration | Arabic |
|---|---|
| al-Aḥad | الأحد |
| al-Ithnayn | الإثنين |
| al-Thulāthāʾ | الثلاثاء |
| al-Arbiʿāʾ | الأربعاء |
| al-Khamīs | الخميس |
| al-Jumʿah | الجمعة |
| al-Sabt | السبت |
There was a problem hiding this comment.
@AlQuraian Thanks! Once this PR is merged, I will come up with a stackblitz example to try it out.
| @@ -76,7 +76,7 @@ export class HeaderComponent<D> implements OnInit { | |||
| * | |||
| * @param {"Gregorian" | "Julian"} calendar the target calendar format. | |||
| */ | |||
| convertCalendar(calendar: 'Gregorian' | 'Julian') { | |||
| convertCalendar(calendar: 'Gregorian' | 'Julian' | 'Islamic') { | |||
|
|
|||
| if (this._dateAdapter instanceof JDNConvertibleCalendarDateAdapter) { | |||
|
|
|||
There was a problem hiding this comment.
@mmalerba After conversion to the Islamic calendar, the weekdays are not updated:
However, when I close and reopen the datepicker widget, the names are updated correctly.
Do I have to call an additional method after each conversion (similar to updateTodaysDate)?
src/app/app.component.ts
Outdated
| @@ -87,6 +88,9 @@ export class HeaderComponent<D> implements OnInit { | |||
| this._datepickerContent.datepicker.select(convertedDate); | |||
|
|
|||
| this._calendar.updateTodaysDate(); | |||
|
|
|||
| this._datepickerIntl.changes.next(); | |||
There was a problem hiding this comment.
@mmalerba This does not have the desired effect; the labels of the weekdays are not updated. Could you point out to me what needs to be changed in the parent that receives this event?
I guess this would need to happen in calendar.ts:
this._intlChanges = _intl.changes.subscribe(() => {
_changeDetectorRef.markForCheck();
this.stateChanges.next();
});
There was a problem hiding this comment.
It looks like the issue is in month-view: https://github.com/angular/components/blob/master/src/material/datepicker/month-view.ts#L155
It needs to do something similar to what the calendar is doing there, to update this list of weekday names
There was a problem hiding this comment.
It needs to do something similar to what the calendar is doing there, to update this list of weekday names
So it should subscribe to MatDatepickerIntl.changes too?
I wonder why the names of the months are updated.
# Conflicts: # package.json # src/app/app.component.ts
This PR adds support for conversion from and to Islamic calendar dates.
see angular/components#2519