REACT SCHEDULER - open source React component for resources

hi my name is p and in today's video I'd like to show you how to implement react Schuler it's a package that allows you easily and quickly visualize gun chart in your application the grid drawn on a canvas is much more efficient than traditional D based Solutions allowing for rendering a large amount of data without a noticeable decrease in smoothness for the purposes of this tutorial I have prepared an application in nextjs in version 13A 4 installation through npm or yarn is simple and almost fully automated it requires the developer to do the brief environment setup before you proceed with installing reactor Schuler check the contents of the NVM RC file to find the information about the minimum required nodejs version of course you can use other package managers I'll use yarn all right scheduler is installed so it's time to have some fun as you can see in my sample application I already have reserved space where I would like to display the Schuler I will now start the application using the command yarn Dev and we will begin the implementation process as I mentioned earlier I have already prepared the application in nextjs we will start by importing the schedular wrapper component if you prefer you can import it directly we will also add two required props data and is loading I have prepared sample data that I could put into the Schuler but it would be all the data at once regardless the specific date range we want to display therefore it's worth implementing a function to filter out unwanted data I will also set up a state for the date range start date and end date as you can see the application has been displayed but it doesn't show any data let's pass our filtered data to the data prop react scheduler will automatically organize and divide the data on the grid we previously added the state for their date range let's use it to allow the scheduler to change the date range we will use the on Range change prop for this which accepts a function as you may notice continuous scrolling in either direction causes fewer items to appear on the grid that's because not all items are between the dates range set by the scheduler let's move on to the following functionality clicking on the tiles in the grid as you can see currently nothing happens when you click let's let's fix this by adding the on tile click prop which accepts a function I will use a browser alert to display the data of the tile I click on after refreshing clicking on a specific tile will provide us with information about it similarly we can do the same for the items displayed in the left column the on item click prop accepts a function and just like clicking on a tile it provides us with information about the respective item react scheduler also has a config prop which allows us to configure the application the object we pass must have a zoom key with a value of either zero or one as the first functionality I will show you Max records per page page which enables data pagination as you can see two additional buttons have appeared on the left column we recommend configuring this property because HTML canvas has its limitations when it comes to the width and height pagination is working so let's move on to the filtering button let's add another key to the config called filter button state it accepts value below 0 0 or above Z setting it to for example -1 will hide the button setting it to the zero will make the button visible and indicate that no filter is applied meanwhile setting it to one will indicate that filters are in use let's add handling for clicking the filter button the on filter data prop accepts the function I I will display an alert for information about The Click let's hide the filter button because we don't need it additionally we can configure the language English or polish let's also change the number of Records per page to 10 the scheduler allows us to preview both monthly and daily views we can also configure the default view setting the zoom key to one will change the default view to daily the default value is zero now let's address the tool tip we can decide whether we want the tool tip to display information about availability on weekends by default this value is set to false and the tool tip ignores weekends as you can see when in Daily view hovering over the weekend displays a tool tip showing zero hours booked similarly setting it to True will show the occupancy as on any other weekday the scheduler also includes a search input that allows you to search for the records by name regardless of pagination the react scheduler you see here is Ed in a container however if you prefer you can display it in full screen mode it is positioned absolutely and occupies the entire container so you decide how much space it will take in your application thank you for being here with me I hope I was able to provide you with valuable information and understanding of implementation of react Schuler if you have any more questions or concerns or if you'd like to share your feedback please don't hesitate to leave your comments below this video you can find the link to the repository in the video description and don't forget to start it and thanks again for your attention and take care

Channel: Bitnoise

Views: 26,031

Keywords:

Id: 9oy4rTVEfBQ

Length: 7min 9sec (429 seconds)

Published: Wed Oct 18 2023