Closed benkovy closed 2 years ago
@benkovy
I think it's a duplicate of #26.
Please check this comment. I confirmed that moving calendar
and schedule
props to the outside of the component works as intended.
import React, { useState } from "react";
import Cal from "@toast-ui/react-calendar";
import { DateTime } from "luxon";
import "tui-calendar/dist/tui-calendar.css";
const startDate = DateTime.now().minus({ hours: 4 });
const endDate = startDate.plus({ hours: 4 });
const calendars = [
{
id: "0",
name: "Private",
bgColor: "#9e5fff",
borderColor: "#9e5fff"
}
];
const schedules = [
{
id: "1",
calendarId: "0",
title: "TOAST UI Calendar Study",
category: "time",
dueDateClass: "",
start: startDate.toISO(),
end: endDate.toISO()
}
];
export default function App() {
const [count, setCount] = useState(0);
return (
<Cal
defaultView="week"
taskView={false}
height="100%"
disableDblClick={true}
disableClick={false}
isReadOnly={false}
calendars={calendars}
schedules={schedules}
onBeforeCreateSchedule={() => {
setCount(count + 1);
}}
/>
);
}
Any PRs improving the current diff comparison logic would be welcome. 🙌
Yes you are right. Thank you for pointing this out I will take a look at that issue!
Version
@toast-ui/react-calendar: ^1.0.5
Test Environment
Firefox, Mac OS
Details
Setting state from within the event handler causes the schedule guide to not show up. However... when the calendar and schedule props are not passed in, the calendar functions properly.
I am using react state to keep track of when I should render my custom schedule creation popover. Is this not a pattern I should be using? it seems like the right "React" way to do it - should I be appending my popover element to the DOM from within the handler?
This is a video of with and without the schedules/calendars
https://user-images.githubusercontent.com/18032127/150453618-07bd944f-e6e7-4e98-b157-32ae36f38f2c.mov
Below is some code that should help reproduce the problem.
CODE
```TS import React, {useEffect, useRef, useState} from 'react'; import Cal from '@toast-ui/react-calendar'; import {DateTime} from 'luxon'; const startDate = DateTime.now().minus({hours: 4}); const endDate = startDate.plus({hours: 4}); export function Calendar() { const [count, setCount] = useState(0); return ( {
setCount(count + 1);
}}
/>
);
}
```
In summary