Modal and some styles not working

[CushtyDev]

Hi I have the booker installed and the css added, but I have seen on the booker the 12/24 styles are not showing and also the dialog popup is not centered and to the left on the Booker. Im using the latest version and Laravel with Inertia and React.


Hope you can help, thanks

[dosubot[bot]]

Hello @CushtyDev! I'm Dosu, your friendly bot here to help you tackle bugs, answer questions, and navigate your way to becoming a contributor. I'll be assisting you while we wait for a human maintainer. Let's get to it!

To address the issues you're experiencing with the Cal.com booker component:

1. 12/24 Hour Time Format Styles: Ensure that the custom class names for the time format toggle are correctly set. You can use the customClassNames property in the BookerProps interface to specify styles for the availableTimeSlotsTimeFormatToggle ^[1].

2. Dialog Popup Centering: The dialog popup can be centered using the CSS classes provided in the getBookerWrapperClasses function. Make sure the classes "flex h-full items-center justify-center" are applied. If the component is not embedded (isEmbed: false), also include the class "min-h-[calc(100dvh)]" to ensure proper centering ^[2].

These adjustments should help resolve the styling issues you're encountering. If you have further customization needs, consider using the available CSS variables and custom class names to tailor the appearance to your requirements ^[3].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[CushtyDev]

But shouldn't these things work out of the box in the Booker?