How to Implement Ethiopian Calendar with 13months React-Day-Picker?

[temesgen-mulugeta]

I want to use react-day-picker to create an Ethiopian calendar. The Ethiopian calendar differs from the Gregorian calendar in that:

It’s 7–8 years behind.
It has 13 months (12 months of 30 days, plus a 13th month of 5 or 6 days).
New Year’s Day falls on September 11 or 12 (Gregorian).
My goal is to render Ethiopian dates in the UI but store and work with Gregorian dates internally.

One solution I’m considering is rewriting the month component to render my custom components. I’ve done something similar with MUI Date Picker and even have a package for it, but I’m wondering if there’s a better solution with react-day-picker.

Any guidance or suggestions would be greatly appreciated!

[gpbl]

@temesgen-mulugeta thanks for your idea. I'd love to implement the Ethiopian calendar in DayPicker.

I recently could add the Persian calendar, which stores the dates in Gregorian, so I believe it should be possible with Ethiopian too.

Check out how the Persian calendar works:
https://github.com/gpbl/react-day-picker/blob/main/src/persian.tsx

The Persian calendar uses the date-fns-jalali package as DateLib. Maybe we could implement something similar? We need just a subset of its functions.

...more specifically, we need to implement a custom DateLib for Ethiopian calendar, and understand which changes are required to the date-fns locales.

I was wondering if your expertise could help us out. I could start by building a proof of concept to get us going.

[gpbl]

One solution I’m considering is rewriting the month component to render my custom components.

Ideally, we shouldn’t make any changes to the rendering. Instead, we should implement a “date library” to replace the default Gregorian library.

I’m not sure about the challenges involved here. Let me review this Calendar first so I can propose a solution.

I’ve done something similar with MUI Date Picker and even have a package for it, but I’m wondering if there’s a better solution with react-day-picker.

That's great! Is your work for MUI open source? Could I give it a look?

[temesgen-mulugeta]

Thanks for reaching out! I’d love to help implement the Ethiopian calendar in DayPicker. I already have helper functions for managing Ethiopian dates (currently just dates, not time, but I can add that).
https://github.com/temesgen-mulugeta/mui-ethiopian-datepicker/blob/main/src/util/EthiopianDateUtils.tsx

I would also love to work on date-fns-ethiopia localization—it’d greatly benefit my community.
But for now, if you could share the exact subset of functions we need, I can start working on those functions and build them into a date-fns package on top of that.

https://github.com/temesgen-mulugeta/mui-ethiopian-datepicker
This is my current package for mui. But I rendered the calendar on my own, and there are more than 86 languages in Ethiopia. Most of them use the same calendar with different names for months and days, so I have added the functionality to add custom months’ names.

[temesgen-mulugeta]

I’ve been working on a Datelib class and managed to override some functions. It’s now showing a 13-month calendar, with each month having 30 days—and 5 on the last one.

But I’ve run into a bug where the last day of the first week in each month gets skipped.

When I log the weeks it gets the week days properly. But when it renders it skips the last day

[rodgobbi]

I can try to help debug it.
@temesgen-mulugeta do you have the changes you've implemented in a public repo?
If not, could you share what you've implemented so far so I can debug it?

[temesgen-mulugeta]

These are my two custom files
https://github.com/temesgen-mulugeta/ethiopian-date-picker/blob/main/src/utils/EthiopianDateLib.ts
the DateLib implementation
and
https://github.com/temesgen-mulugeta/ethiopian-date-picker/blob/main/src/utils/EtDateUtils.ts
and the utility functions to convert dates from Greg to Ethiopian

[rodgobbi]

Hi @temesgen-mulugeta
Could you try to implement more parts of the DateLib class?
The missing custom implementation of other functions may be causing the issue.

I found that the logic for calculating the days to display in the calendar starts with the second day of the month when using the EthiopianDateLib you provided.
The function that calculates this is https://github.com/gpbl/react-day-picker/blob/main/src/helpers/getDates.ts, could you check if the startWeekFirstDate date is correct?

I created a branch with the code you provided: https://github.com/rodgobbi/react-day-picker/tree/new/ethiopian-calendar.
There's an Ethiopian example in this branch, could you debug it in the context of the react-day-picker repo?
You could also try first implementing the rest of the custom Ethiopian DateLib class and then checking if it fixes the issue.

[temesgen-mulugeta]

It took an entire afternoon to debug this issue, and it turned out to be caused by an innocent-looking addDays function. My IDE had auto-generated an unimplementation inside dateutils. Since I was already using dateutils in multiple projects, I assumed there wouldn’t be any issues there.

I’ve fixed the bug now and added overrides for other key functions, like week counts. I’ll be testing everything thoroughly, and once that’s done, I’d be happy to request a PR if you’d like this to be part of the examples list.

@gpbl @rodgobbi Thank you so much for your help and for creating such an amazing project!

[rodgobbi]

Great to hear that @temesgen-mulugeta!

I’d be happy to request a PR if you’d like this to be part of the examples list

Thank you for offering to do it and it would be appreciated.
We can export an Ethiopian version of the day picker and have an example for it following the recommendation from @gpbl in the comment above.

After learning more about how it's done for Jalali, IMO the ideal scenario would be to follow the same pattern, and extract a custom version of the date-fns package, like the date-fns-jalali, so this new one could be named date-fns-ethiopian, that the react-day-picker could reuse, while also having it available to be reused by anyone else in the future.

(kudos to @gpbl for creating the project 🙏 )

[gpbl]

Thanks @temesgen-mulugeta and @rodgobbi for your help working on this project. I love Ethiopian culture (and food) and I'm happy to work for a more inclusive DayPicker.

@temesgen-mulugeta, I had a chance to look at your great work for MUI: we need to abstract the work done there into some code that is compatible with the date-fns function signatures. I expect that once we complete the functions, DayPicker will work properly with the Ethiopian calendar - but we may meet some caveats. I'm happy to help and assist you here.

In my opinion, it is not worth it yet to publish a date-fns-ethiopic package - there are many extra challenges involved when publishing a package, and I'm not sure if @temesgen-mulugeta has the time/energy for something like that. We could, for the time being, include the functions in a directory in this repository.

For this reason, I've opened a PR to use as a starting point:

• see https://github.com/gpbl/react-day-picker/pull/2658

Please let's move the discussion about the implementation of the Ethiopic calendar there.

Thanks again!