Error on render

[ag288]

Whenever I try to render my react app, an alert pops up that says "TypeError: Cannot read properties of undefined (reading 'pxToRem')" and the calendar fails to render. I am following the code given in the demos, so I'm not really sure where I'm going wrong. This is my code :

import { Scheduler } from "@aldabil/react-scheduler"
export const Calendar = () => {
    return (
        <Scheduler
            view="month"
            events={[
                {
                    event_id: 1,
                    title: "Event 1",
                    start: new Date("2021/5/2 09:30"),
                    end: new Date("2021/5/2 10:30"),
                },
                {
                    event_id: 2,
                    title: "Event 2",
                    start: new Date("2021/5/4 10:00"),
                    end: new Date("2021/5/4 11:00"),
                },
            ]}
        />
    )
}

[aldabil21]

Hi @ag288
Yeh this code should work without issues.
Can you trace the error stack and show where is that leading to?

[ag288]

Unfortunately the console does not show any errors when the page is rendered, so I'm clueless as to what is wrong. However, it may be of importance to note that I'm using Chakra UI and not Material UI. Could that have something to do with it? Also, this Calendar component is actually rendered within another component as follows :

import { Flex, Box, Heading, Button, Stack } from "@chakra-ui/react"
import { useNavigate } from "react-router-dom"
import { SidebarWithHeader } from "../../../components/sidebar"
import dashRoutes from "../../../routes"
import { Calendar } from "../../appointment/calendar"
export const DashboardReception = () => {

    return (
        <>
            <SidebarWithHeader routes={dashRoutes} />
            <Flex>
                <Stack width='full'>
                    <Box width="auto">

                        <Calendar />
                    </Box>
                </Stack>
            </Flex>
        </>
    )
}

I dont know if any of this is relevant, but thats all i have. Thanks for the time :)

[aldabil21]

Yeah, this component is based on Material UI and date-fns.

You might wanna look into this toast-ui.react-calendar