Skip to main content
Question

How to Override Calendly Widget CSS in Angular?

  • October 9, 2024
  • 1 reply
  • 129 views

Hi,

I'm using the Calendly inline widget in an Angular project and need to override specific styles (e.g., display: contents, justify-content: center) for the class _CUP1np9gMvFQrcPftuf. My attempts using ::ng-deep, !important, disabling ViewEncapsulation, and even Renderer2 for inline styles haven’t worked, as the external CSS (booking-469382ad.css) keeps overriding my styles.

Is there any way to reliably override the Calendly widget's CSS, or any service that allows direct control over its styles?

Thanks!

This topic has been closed for replies.

1 reply

  • New Community Member
  • October 9, 2024

Hey @Achref56841 - 

The only way to override the booking page css classes would be to use a tool like cloakist - 


Without using an external tool, you can only customize the text and background color of the scheduling page.