Implementation of react Scheduler using functional components and hooks

[rupender]

I have watched your videos on youtube channel but they are all using class components and typescript. I am working on react project using functional components and hooks. Kindly guide me to implement react scheduler using functional components.

[Hareesh Balasubramanian]

Hi Rupender, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query “need to created a react scheduler sample using the functional component” using React Functional method, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/react-ts-scheduler-functional-component-sample?file=index.tsx 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Hareesh 

[Aakil khan]

The Effect Hook lets you perform side effects in function components: import React, { useState, useEffect } from 'react'; function Example() { const [count, ... Every time we re-render, we schedule a different effect, replacing the previous one.

Thanks

Aakil Working at The Next Hint

[Vinitha Devi Murugan]

Hi Rupender, 

 

Thanks for your update. 

 

Based on your requirement we have prepared a sample with Scheduler using functional components and hooks and the same can be available in the following link. In the below sample, we have updated the scheduler resource dataSource using Effect and State hooks. 

 

Sample : https://stackblitz.com/edit/scheduler-using-functional-componets-and-hooks-hev9ca?file=components%2Fchild.js  

 

  useEffect(() => { 

    renderCount++; 

  }); 

  const [ownerData, setOwnerData] = useState(_ownerData); 

  const [somestate, setSomestate] = useState(1); 

  const [data, setData] = useState([]); 

 

  function handleClick() { 

    setSomestate(somestate + 1); 

    addOwnerData(); 

  } 

 

  const addOwnerData = () => { 

    setOwnerData( 

      ownerData.concat({ OwnerText: 'Nancy', Id: count, OwnerColor: '#ffaa00' }) 

    ); 

    count++; 

  }; 

 

Kindly try with the above sample and get back to us if you need any further assistance 

 

Regards, 

Vinitha 

[Aakil khan]

In light of your prerequisite we have arranged an example with Scheduler utilizing useful segments and snares and the equivalent can be accessible in the accompanying connection. In the beneath test, we have refreshed the scheduler asset dataSource utilizing Effect and State snares.

Thanks.

Aakil Working at Mr.furniture

[Aakil khan]

Considering your essential we have orchestrated a model with Scheduler using valuable sections and catches and the comparable can be available in the going with association. In the underneath test, we have invigorated the scheduler resource dataSource using Effect and State catches.

Thanks.

Aakil Working at Bizzeonline.com

[Vinitha Devi Murugan]

Hi Akil, 

 

Thanks for your update. 

 

We checked your reported query and suspect that you want to update scheduler datasource and resource datasource using Effect and state hooks for the same we have prepared below sample for your reference. 

 

Sample : https://stackblitz.com/edit/update-schedule-datasource-and-resource-data-using-useef-udl3cq?file=components/child.js  

 

Kindly try the above sample, if we misunderstood your requirement please share more details with images or video demo that illustrates your requirement to serve you better. 

 

Regards, 

Vinitha 

 

[Muhammad Huzaifa]

How can we access and change the recurrence options to "never" and "daily" only in the editor window whilst using react functional components? 
 

[Sabitha Rajamani]

Hi Muhammad Huzaifa,

It is possible to customize the recurrence editor to display only the specific repeat options such as Never and Daily options alone by setting the appropriate frequencies option.

Sample: https://stackblitz.com/edit/ej2-react-schedule-recurrence-dst-sample-ditclk?file=index.js

UG: https://ej2.syncfusion.com/react/documentation/schedule/recurrence-editor/#customizing-the-repeat-type-option-in-editor

Index.js:

Output screenshot:

Regards,

Vijay Ravi