Calendar component responsive sizing

[Jamie-VisualiseInfo]

Hi, I'm using the Calendar Component,
and I'm trying to get it to be responsive in size, but the size prop is limited to mantineSizes & I don't see an option in the styles API for the whole component.
I've tried playing with the styles in the inspect too in the browsers console, but I couldn't find any solution.

This is the component for reference:

Can this be done to the calendar component? Ideally I need it to fit neatly inside this "widget", which can be resized.

[Kenzo-Wada]

Can you provide a reproduction url for us to help solving your problem?

[Jamie-VisualiseInfo]

Hi, i've never used code-sandbox before so it took be a bit to set it up, but heres the link,

https://codesandbox.io/p/devbox/crazy-dewdney-p4t8rr

[Kenzo-Wada]

That helps, Thank you!

I could do my best with dynamic styles props using useElementSize, etc! (I guess I need to work on the height a bit more...)

export default function Demo() {
  const {ref, width, height} = useElementSize()

  const calenderSize = Math.min(width, height)

  ... other codes...
  
  <Calendar size={calenderSize/7} styles={{calendarHeaderLevel:{fontSize: calenderSize/16}, weekday: {fontSize: calenderSize/18}}}/>

Screencast.from.2024-09-28.01-35-05.webm

I apologize for not being able to provide the ability to simply resize using size prop or style={{height, width}}, but since this is a component with a fairly large number of elements, making it extremely small in the first place could lead to a bad UX, so you'll have to do something on your end. Therefore, it may be necessary for you to redesign your responsive design by setting some thresholds.