Support for custom calendar with @internationalized/dates

[brightloudnoise]

Is there a way to create a custom calendar? I'm trying to create a Broadcast calendar.

I tried duplicating the Gregorian calendar with different calculations and a new identifier of "broadcast" but I can't use it with useCalendarState, because it restricts you to the built-in calendars via createCalendar (even when overriding the createCalendar function).

Background on the Broadcast Calendar - Wikipedia

The broadcast calendar is a standardized calendar used primarily for the planning and purchasing of radio and television programs and advertising. Every week in the broadcast calendar starts on a Monday and ends on a Sunday, and every month has either four or five such weeks. Broadcast calendar months thus have either 28 or 35 days.

The first week of every broadcast month always contains the Gregorian calendar first of the month. For example, if January 1 falls on a Saturday, then the broadcast calendar year would begin on the preceding Monday, December 27. Broadcast January would then have five weeks, ending on January 30, and the four weeks of broadcast February would begin on January 31. The number of weeks in a broadcast month is based on the number of Sundays that fall in that month with the period ending on the last Sunday of the month.

Thanks for your time.

[ktabors]

I thought this issue provided a workaround for something similar.

[ktabors]

In the "Styled Examples" section on https://react-spectrum.adobe.com/react-aria/useCalendar.html, the "Styled Components" example uses visibleDuration which is what you'd want to use for custom calendars.

[brightloudnoise]

Thanks, I had also seen that issue. Is that issue from an Adobe team since they referred to (but don't show) a workaround with references to what sounded like internal applications?

[devongovett]

You have the right idea with extending the GregorianCalendar. A new identifier wouldn't work though, because the native Intl APIs used for date formatting don't support them. So you'll want to continue using gregory as the calendar identifier, but returning your custom implementation in createCalendar instead.

function createCalendar(identifier) {
  if (identifier === 'gregory') {
    return new BroadcastCalendar();
  }

  // throw?
}

You can also force the Gregorian calendar to always be used regardless of the user's locale setting by overriding it (e.g. en-US-u-ca-gregory).

One part that isn't quite possible yet is forcing the week start to be Monday regardless of locale. The startOfWeek function accepts a locale argument, and uses that to determine the first day of the week. We could potentially add an optional getWeekStart method to the Calendar interface to allow calendar implementations to override this. We'd be open to a PR for that if you'd like to give it a shot!

Let us know how it goes and if you run into other issues. Kyle linked to #3270 which is a related issue for other custom calendars, so any work done here should also benefit others.

[brightloudnoise]

Ok, I've adjusted my custom implementation and have forked the project to take a look at adding getWeekStart as a PR. I'd prefer to work with your libraries instead of hacking something together.

[ArtemFedorchuk]

I also need to create a Calendar with the start day of the week as Monday.
I've no ideas how to do it because I've I thought it was possible with "react-aria": "^3.25.0".

Have you codesandbox or something like this with the solution?

[ktabors]

Looking at start day of the week, we have issue #3986 on this topic that is still open and we're looking for suggestions on the API to make it locale agnostic. We also have this PR #4598 that was just released. Can you try "react-aria": "^3.26.0"?

[ArtemFedorchuk]

Ah, thank you for the answer!
I've tried this "^3.26.0" version.
And it has not helped to solve the issue(

@devongovett Have you ideas on how to do it and will it be possible soon?