Create Scheduler Events with External Button in React
Environment
| Product Version | 10.0.0 |
| Product | Progress® KendoReact Scheduler |
Description
When using the Scheduler component, there might be scenarios where it's not immediately clear that users should click on the calendar to add an event, or they might prefer not to have the date pre-selected. To accommodate this, an "Add" button can be introduced on the page to facilitate the creation of new scheduler entries.
This knowledge base article also answers the following questions:
- How can I add a new event to the Scheduler with a button click?
- Is it possible to use an external button to create Scheduler entries in React?
- How do I implement an "Add" button for the Scheduler in a React application?
Solution
To achieve the addition of Scheduler entries through an external button, you can utilize the handleDataChange method. This method, when triggered, allows you to add events to the Scheduler. Specifically, you can use an external button to open a SchedulerForm and, upon the form's submission, pass the data to handleDataChange. This can be accomplished via props or context, depending on your application's architecture.
Below are examples showcasing both approaches:
- Using Props:
- Using Context:
These examples demonstrate how to integrate an external "Add" button into your application, allowing for the creation of new Scheduler entries without directly interacting with the calendar component.