How to customize styling for React Calendly inline widget component

Other Questions Calendly
1

I’m trying to change the appearance of a Calendly inline widget in my React app but having trouble getting the styles to apply properly. I need to customize several elements like removing the drop shadow, hiding the timezone selector, and changing the background color of date elements. I’ve attempted different approaches including styled-components wrappers and direct DOM manipulation but none seem to work as expected.

import React from 'react';
import { InlineWidget } from "react-calendly";
import styled from 'styled-components';

// const StyledWrapper = styled.div`
//   .calendar-shadow {
//     box-shadow: none !important;
//   }
// `

const BookingWidget = () => {
    const schedulingUrl = "your-calendly-url-here";
    
    return (
        <div>
            <InlineWidget
                className="booking-calendar"
                height="800px"
                url={schedulingUrl}
            />
        </div>
    )
}

export default BookingWidget;

What’s the best way to override the default Calendly widget styles in React? Any suggestions would be helpful.

2

The issue with customizing Calendly widgets stems from their embedding inside an iframe, which isolates them from external CSS. I encountered a similar challenge while trying to tailor our booking experience. To enhance customization, utilize Calendly’s embed parameters in the URL. You can specify styles directly in the URL, such as ?background_color=ffffff&text_color=000000 for colors. Keep in mind, though, that advanced options like hiding the timezone selector require a paid plan, as the free version offers limited customization. If these options don’t meet your needs, you might consider creating your own booking interface by leveraging their API, granting you full design control.