We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

1.how to access and update datasource based on conditions and 2.scheduler is not updating when we update datasource data via UseState

I am using scheduler and i want to change scheduler via useState please help me i am using it in react functional component

1 Reply

VR Vijay Ravi Syncfusion Team December 23, 2022 03:54 PM UTC

Hi Bonisa,


You can update the Schedule data source using UseState, as shown in the below code snippet.


function LocalData() {

  const [datasetData] = React.useState(initialData);


  function onClick() {




  return (<><div className="container"><ButtonComponent onClick={onClick.bind(this)}>click to add</ButtonComponent></div><div>

    <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2022225)} ref={t => scheduleObj = t} eventSettings={{

      dataSource: data


      <Inject services={[DayWeekWorkWeekMonthAgendaResizeDragAndDrop]} />




export default LocalData;

Output screenshot before click add button:

Output screenshot with click add button:


Vijay Ravi

Live Chat Icon For mobile
Up arrow icon