I am trying to customize the CSS of an Inline Widget called React Calendly. I have attempted to use React Styled Component Wrapper, Frame React Component, and DOM javascript but unfortunately, the design changes are not reflecting as desired. Specifically, I want to hide/remove the shadow, timezone display, and update the background color of certain dates.
import React, { useEffect } from 'react';
import { useCalendlyEventListener, InlineWidget } from "react-calendly";
import styled from 'styled-components';
import Frame, { useFrame } from 'react-frame-component';
// export const Wrapper = styled.div`
// .cp5dqoq {
// display: none;
// visibility: hidden;
// }
// `
const Calendar = () => {
return (
<>
<InlineWidget
id="calendarFrame"
frameBorder="0"
scrolling="no"
height="900px"
url={url} />
</>
)
}
export default Calendar
I have utilized React Styled Components, Javascript DOM, and React Frame Component for this task. My main focus is on customizing the CSS elements.