Programmatically set the visible month

[mattvick]

I've read the documentation and searched through the code but I'm struggling to figure out how to programmatically set the visible month, or months.

How can I configure the calendar to display a specific date range based on some state, for example, a URL param?

In the screenshot below for example I would like the calendar to display the months Dec 2023 and Jan 2024, rather than Oct and Nov 2023.

I'm using the Calendar built with Tailwind, supporting multiple visible months example as a starting point.

When setting state.visibleRange.start and state.visibleRange.end the dates in the calendar are no longer selectable:

state.visibleRange.start = state.visibleRange.start.add({ months: 2 });
state.visibleRange.end = state.visibleRange.end.add({ months: 2 });

Calling state.setValue() does not change the visible month.

state.setValue(parseDate("2023-12-01"));

[mattvick]

It looks like the prop I was overlooking is defaultFocusedValue. I've solved the problem I was having by setting defaultFocusedValue to the first day of the first month I want to be visible, and passing this to useCalendar(). The calendar then displays that month.

[mattvick]

It looks like the prop I was overlooking is defaultFocusedValue. I've solved the problem I was having by setting defaultFocusedValue to the first day of the first month I want to be visible, and passing this to useCalendar(). The calendar then displays that month.

Actually, using defaultFocusedValue or focusedValue does not always display the desired month on the left, sometimes the month is displayed on the right.

Is there a way to always make the month with the focused date appear on the left?

[mattvick]

For anyone interested, I resolved the issue with the month displayed on the right. This was solved by calling state.focusPreviousPage() rather than focusedValue.subtract({ months: 2 }) to navigate the calendar to previous months.