Similar Javascript feature/page in React

[vishwasreddy101]

Hi Team,

I have attached the screen shot of the schedular pro component lib demo image from your page . And i would love to have similar kind of view and feature in React. If it is already available please share me the example with UI css and component that supports the similar feature for flight scheduling in react.

And example more in functional component manner is better instead of using class components

Thanks,
Vishwas Reddy

[tasnim]

Hi,

I've converted that demo to React for you and attached it below this post.
You can run it with

$ npm i
$ npm start

msedge_SPkalVQD2O.png (197.17 KiB) Viewed 21997 times

[vishwasreddy101]

Hi Thank you Tasnim for the Zip can you please provide the same in jsx format instead of tsx and need scss files only

[marcio]

Hey vishwasreddy101,

I'm sending the JS version of the demo that Tasnim shared here.

[vishwasreddy101]

1st:-Firstly Thank you so much Marcio ...its working as expected but only one issue left with integration is that instead .scss I want .less format support in my project and after I converted the files manually also its not coming as expected .And my project is already in advance stage and I cannot have both scss and less format in my project if I can get support in this too it will be best !!!

2nd:-instead of reading the URL by running server I want to read the json file directly from local my local or a file ...is this information in the URL enough :-

loadUrl : './data/data.json' ---- instead of it reading directly from json file in local without running server

https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/integration/react/data-binding

[ghulam.ghous]

Hello,

loadUrl : './data/data.json' ---- instead of it reading directly from json file in local without running server

You just need to provide the path of the file in the loadUrl and it will load the data from there. For React, you will have to place it in the public folder as in the example provided by Marcio. ./data/data.json will load from the public folder. Please check the public folder.

[vishwasreddy101]

Hi Ghous ,

I dont think so if you notice they are using engines in package.json ....you remove that it will not work internally a server engine is running that loadurl hits it to fetch the data from public json instead reading the file from a folder directly.

Thanks,
Vishwas

[vishwasreddy101]

Hi Ghous ,

this worked for me ...but json file need to be in src folder :-

  [code]  const [events, setEvents] = useState(projectData.events.rows);
    const [dependencies, setDependencies] = useState(projectData.dependencies.rows);
    const [resources, setResources] = useState(projectData.resources.rows);[/code]

 <BryntumSchedulerPro
                ref={schedulerProRef}
                project={projectRef}
                events = {events}
                dependencies = {dependencies}
                resources = {resources}
                {...schedulerProProps}
            />

Thanks,
Vishwas Reddy