How to activate external items so they can be dragged to the React Scheduler component.
Oct 10, 2022
React is a powerful framework created by Facebook. It provides great performance by enforcing the object immutability rule which ensures great efficiency of React change detection mechanism.
Here is a collection of React tutorials that show how to use DayPilot scheduling components in React applications (with or without JSX). The React components are available in daypilot-pro-react package. You can add this package as a dependency (NPM module) to your package.json file using your favorite package manager (npm or yarn) and it will be downloaded automatically. DayPilot NPM packages are available at npm.daypilot.org.
Every tutorial includes a React project with source code that you can download and run on your own machine. Important parts of the source code are explained in the tutorial text. You can use the tutorial code as a starting point for your own implementation.
Most popular tutorials:
React Shift Scheduling Application (PHP/MySQL Backend)
React Work Order Planning System (PHP/MySQL)
You can also use the UI Builder online configurator application to customize the component properties (including appearance and behavior) using a visual tool that provides immediate feedback in a live preview. You can generate and download a complete React project with the component integrated (including your customizations).
See also the documentation for React Scheduler, React Event Calendar, React Monthly Calendar components.
Since version 2022.2, DayPilot supports React 18 as well.
React application that displays a monthly event calendar. Calendar events use custom background to show event type. A context menu allows deleting events and changing color.
Aug 17, 2022
The React Scheduler allows defining the callout (bubble) content as a React JSX component. The component will be created automatically when the callout is activated and removed and unmounted when the callout is hidden.
Aug 3, 2022
How to use the open-source React resource calendar component to create a scheduling application for multiple groups of resources (locations, people, tools). Add a date picker and next/previous buttons that let users change the visible date.
Jul 19, 2022
React application that displays a weekly event calendar using an open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.
Jul 18, 2022
How to use a popup date picker to select a date displayed by the React Calendar component.
Jul 14, 2022
Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.
Jun 17, 2022
How to render custom React JSX component in the Scheduler grid cells.
Apr 4, 2022
The React Scheduler component allows customization of event content. This tutorial shows how to add a custom progress bar using event active areas.
Mar 4, 2022
How to display milestones in the React Scheduler component. You can use custom shapes, icons, colors and connect the milestones using links.
Feb 8, 2022
What things to look at when you are not happy with the React Scheduler component performance.
Dec 17, 2021
How to render custom JSX components in events displayed by the React Calendar component.
Dec 8, 2021
Learn how to search React Scheduler events, highlight the search text and jump between results using Next and Previous buttons.
Nov 27, 2021
Plan activities for multiple areas/departments side by side. Use drag and drop to schedule events and milestones.
Oct 18, 2021
The React Scheduler component can record all drag and drop actions and allow unlimited undo/redo. See how to add undo/redo buttons and display the full history.
Aug 27, 2021
How to display React JSX components in the Scheduler horizontal time header.
Aug 3, 2021
How to display a timesheet in your React application. You can set a custom resolution of the time axis, specify the number of days to be displayed, calculate daily totals. The timesheet lets you modify the records using drag and drop.
Jul 30, 2021
How to add a zoom feature to the React Scheduler timeline. You can change the zoom level (and timeline resolution) using a "range" control and "zoom in" and "zoom out" buttons.
Jul 30, 2021
How to use the column hierarchy feature of the React calendar to display events for many resources. The groups and resources are displayed as columns and the time slots are displayed as rows.
Jul 30, 2021
Explore the built-in UI elements that let your users manage (create, edit, move, delete) resources displayed using the React Scheduler component.
Jul 30, 2021
Articles 1-20 of 30
Next