Custom CSS classes for domain and subdomain

[leifg]

There is probably a better way to do this but I am trying to make my month view responsive. So ideally I would pass in a CSS class for my domain in addition to ch-domain m_1. Is this possible or is there are better way to make my calendar responsive?

[wa0x6e]

What do you want to achieve ? Override width and height with CSS ? This will be a bad idea, as all SVG elements positions are computed, and absolute values instead of relatives.

If you are not using navigation, you can try targeting the domains with :nth-child css

[leifg]

My intent is to have a month view that is responsive, meaning it will use the maximum width available for the number of months and then break into a new line (e.g. 6 months per line on a desktop, 2 months on mobile).

The way I wanted to go about this is to use one of the many CSS frameworks to add classes to the month element (e.g. .col-sm-*, .col-md-*, col-lg-* in Bootstrap).

In the meantime I solved the issue by generating a new calendar for every month and putting it into a div. See example here.

[wa0x6e]

Col-sm etc… from css would have never worked, as the svg elements position are absolute. Only way to do this was using multiple calendar instance, as you did. The calendar also have a dimensions function, you can retrieve its width and compare with your container size to display the correct amount of months on one line.

…

On Sun, Jun 18, 2023 at 03:28 Leif Gensert ***@***.***> wrote: My intent is to have a month view that is responsive, meaning it will use the maximum width available for the number of months and then break into a new line (e.g. 6 months per line on a desktop, 2 months on mobile). The way I wanted to go about this is to use one of the many CSS frameworks to add classes to the month element (e.g. .col-sm-*, .col-md-*, col-lg-* in Bootstrap). In the meantime I solved the issue by generating a new calendar for every month and putting it into a div. See example here <https://can-i-get-to-la.netlify.app>. — Reply to this email directly, view it on GitHub <#349 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADZAXKPG5HFGC6UXTWK5SDXLXZNRANCNFSM6AAAAAAZEICGAQ> . You are receiving this because you commented.Message ID: ***@***.***>