Hello,
I am facing an issue with the Scheduler. When I add a new event in the Scheduler , the resulting event is not displayed properly. For example, if I create a new event between 9:00 AM and 10:00 AM , it will be displayed on my scheduler between 8:30 AM and 9:30 AM. Then , if i click on the event, change view or reload the page , it will display properly between 9:00 AM and 10:00 AM.
I have noticed that the "display gap" is linked to the slotDuration of the view. I have tried to change the slotDuration from 30 min to 15 min and then the "display gap" was 15 min.
Note that the "display gap" does not appear if i use the default date value when i create an event with 30 min duration for the event. But if i add programmatically a logic like endDate= startDate + 1 hour , then the display gap appears.
What can i do to solve my problem ?
Dev Stack:
- NextJS : 12.0.10
- Kendo-React-Scheduler : 4.12.0
Here is a gif that show the wrong display at first and then when i click on it , it goes back to proper display :
Thank you in advance.
Hello,
I tried to replicate the cases, where we add 1 extra hour programmatically, but the event is showing correctly:
https://stackblitz.com/edit/react-ihvzxg?file=app/main.jsx
Maybe I'm missing an important detail. Could you please update the example to replicate the issue and I will be happy to take a look at it.
Hello,
I have updated the example and i have been able to reproduce the bug :
https://stackblitz.com/edit/react-ihvzxg-xwdohv?file=app%2Fmain.jsx
In our app , we use a custom form where we use mui components and react-hook-form to handle the form.
Also , as you will see, when we open the form , we can still see the scheduler header, we have managed to solve this by creating a custom header and modifying the z-index.
Maybe the problem comes from our way to handle the custom form ?
Best Regards.
Hello,
Thank you for the extra details.
We tested, that this occurs because of the async useForm. That is the reason, the event is correctly set after a click. When we removed that, the event is shown as expected:
https://stackblitz.com/edit/react-ihvzxg-qryqln?file=app%2FCustomForm.jsx
Hello,
Thank you very much for finding the issue !
In our app , we need to do asynchronous task in the form submit action like sending a post request to our API , do you know if it is possible to find a way to make it work with asynchronous task ?
A possible approach can be to call the props.onSubmit method after the call to the API is completed. Otherwise, we are updating the Scheduler with a value that is not fully ready.
Hello,
We have managed to find a solution to fix the problem. Thank you very much for your help !