Add Support for Custom Calendar Attributes in Dates Components

[mnakhli]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

Latest

What package has an issue?

@mantine/dates

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

Description:
To enable the implementation of other calendars, it seems that dayjs and its plugins are sufficient. However, the issue lies in the flexibility of certain date-related functions.

If the two functions, getMonthDays and isSameMonth, could be injected into the component as attributes, the problem would be fully resolved.

Proposed Solution:
Allow getMonthDays and isSameMonth to be passed as attributes when calling the component. This would make the component more adaptable to different calendar systems without requiring extensive modifications.

Benefits:

• Greater flexibility for implementing alternative calendars.
• Minimal changes required to integrate custom date logic.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[baravak]

To better support non-Gregorian calendars across the entire project, I propose making changes so that the necessary attributes are injected into all components and the main DatesProvider. This approach would ensure that when users need a calendar system other than the Gregorian calendar, the change applies globally throughout the project, rather than having to manually add the required attributes in each individual component.

This would simplify the process for developers and ensure consistency across the application, as the non-Gregorian calendar settings would be inherited wherever dates are handled.

[baravak]

When using the dayjs library, the library itself defines the weekdays starting from the number 1. For example, in the Persian calendar, the week starts on Saturday, so the first day of the week is set to 1. However, in your implementation, you also use the firstDayOfWeek attribute to specify the starting day of the week and rely on this value throughout the application.

This creates a conflict between the firstDayOfWeek attribute and the internal weekday configuration of the dayjs library, which can lead to inconsistencies in other calendars.

@rtivital

[rtivital]

Currently, I'm not planning to work on this feature as I do not use and not planning to use it in my projects in the future. You are welcome to create a separate package that supports it and publish it on npm. To get started, you can use the extension template – https://github.com/mantinedev/extension-template

[baravak]

OK
I have resolved the issue discussed in this thread in #7302

[mnakhli]

This approach and structure provide a great solution for accessing calendar modifications within this system.

@rtivital
If you accept this and release it, it will almost entirely meet my needs. Moreover, anyone who wants to implement calendar changes won't need to perform any special operations, and the structure will remain intact.

Thanks to both of you!

[baravak]

fixed it #7302