Pie Calendar in a Modal

Hey Tim,

I see the same issue inside Oxygen Builder’s modal element. I will note this internally for testing and further evaluation.

Out of curiosity, what’s the use case for Pie Calendar inside a modal?

Thanks for bringing this up!

Just adding here that we discussed via email that utilizing Pie Calendar in a modal isn’t a recommended or supported use case for both technical and UI/UX reasons.

From a technical perspective, this is primarily due to the fact that this needs to be triggered when the modal is opened:

window.calendar.render()

That fixes the rendering of the calendar so it displays properly.

You can test it by running that command via your browser console after opening the modal (note that just opening dev tools will probably fix the issue, so you’ll have to have dev tools open before triggering the modal, then run that command.)

Depending on how the modal works you’d need to trigger?window.calendar.render()?differently. With Oxygen, for instance, I think you’d need a MutationObserver to watch for the oxy-modal-open class getting added to the body of the document and trigger it when that happens.

As you can see, this is a highly advanced use case. Instead, we’d recommend switching to a tabs based approach rather than a modal.