Class: Calendar
Description:
The Calendar
component renders a Calendly popup modal using the react-calendly
library. It allows users to schedule meetings or appointments through a pre-configured Calendly link.
Parameters:
onFinish
(Function
): A callback function that is triggered when the user completes the scheduling process in the Calendly modal.props
(Object
): An object containing additional props, potentially including the user's email (props.email
), whether the modal is open (props.open
), and a function to close the modal (props.onClose
).
Returns:
JSX.Element
: A JSX element representing the Calendly popup modal.
Example:
import Calendar from './Calendar';
<Calendar
onFinish={() => console.log('Appointment scheduled!')}
email="user@example.com"
open={true}
onClose={() => setModalOpen(false)}
/>
Key Components:
PopupModal
: The primary component from thereact-calendly
library, responsible for rendering the Calendly modal.CALENDLY_DEMO
: A constant imported from theutils/Constants
module, containing the URL for a pre-configured Calendly link.pageSettings
: An object containing customization options for the Calendly modal appearance.
Important Considerations:
- Ensure the
react-calendly
library is properly installed and configured. - The
CALENDLY_DEMO
constant should be replaced with the actual Calendly link for your use case. - Customize the
pageSettings
object to adjust the modal's appearance according to your design requirements. - Consider handling potential errors that might occur during the scheduling process.
- Implement appropriate logic for handling the
onFinish
callback function based on your application's requirements.