use-cal-dot-com.tsx

import { getCalApi } from "@calcom/embed-react"
import { useRef, useEffect } from "react"

const useCalDotCom = (namespace: string, link: string, config: object) => {
    const calRef = useRef<any>(null)

    useEffect(() => {
        const initCal = async () => {
            const cal = await getCalApi()

            cal('ui', {
                theme: 'dark',
                styles: { branding: { brandColor: '#000000' } },
                hideEventTypeDetails: false,
                layout: 'month_view'
            })
        }

        initCal()
    }, [])

    useEffect(() => {
        if (calRef.current) {
            calRef.current.setAttribute('data-cal-namespace', namespace)
            calRef.current.setAttribute('data-cal-link', link)
            calRef.current.setAttribute('data-cal-config', JSON.stringify(config))
        }
    }, [namespace, link, config, calRef])

    return [calRef]
}

export default useCalDotCom



// Example usage
const CalendarButton = () => {
    const [calRef] = useCalDotCom(
        '',
        'dougwithseismic/30min',
        { layout: 'month_view' } // Todo: Types because 2024.
    )

    return (
        <button ref={calRef} className="calendar-button">
            Book a Time
        </button>
    )
}