Hi Bonisa,
Sample:
https://stackblitz.com/edit/ej2-react-schedule-update-data-using-state?file=index.js
You can update the Schedule data source using UseState, as shown in the below code snippet.
[index.js]
function LocalData() { const [data, setData] = React.useState(initialData); function onClick() { setData(data.concat(newData)) } return (<><div className="container"><ButtonComponent onClick={onClick.bind(this)}>click to add</ButtonComponent></div><div> <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2022, 2, 25)} ref={t => scheduleObj = t} eventSettings={{ dataSource: data }}> <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} /> </ScheduleComponent></div></> ); } export default LocalData; |
Output screenshot before click add button:
Output screenshot with click add button:
Regards,
Vijay Ravi