[UseRangeCalendar] - How to render multi month based om screen size

[Andershorp]

How can i dynamically render 1 or two month based on the screen size the user has? If the user is on mobile I want to only show 1 month, but if they are on a computer I want to show two. Is there something like an "isHidden" prop I can use or do I have to create two different calendars and render either based on the size? Ideally I want to keep the state if for example someone switches from portrait to landscape mode, but change from showing 1 to 2 months.

[reidbarber]

Since you're controlling the rendering, you can do this yourself without passing any options into the hooks. You can just detect the screen size, then conditionally render the second calendar based on the screen size.

Here is an example forked from our styled example from the docs: https://codesandbox.io/p/sandbox/optimistic-sound-27p9ht

[Andershorp]

Thanks for the reply. The sandbox link does not work. "Sandbox not found It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it."

[reidbarber]

Should be public now.

[Andershorp]

Thanks, this was just what i was looking for!