You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# React Scheduler - How to load appointments from a local JSON file?
1
+
# About React Scheduler
2
+
3
+
The [React Scheduler](https://www.syncfusion.com/react-ui-components/react-scheduler?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently. It features easy resource scheduling, appointments rescheduling through editor pop-ups, drag and drop, and a resizing action. It includes wide variety of view modes with unique configuration options for each view.
4
+
5
+
## Features and Benefits
6
+
7
+
### Different view modes
8
+
9
+
The React Scheduler offers wide variety of view modes such as day, week, work week, month, agenda, month-agenda, and timeline views. It allows you to easily configure each individual view with different, view-specific options. Options also exist to display multiple days, weeks, and months by extending each view mode based on the interval count.
10
+
11
+
### Data binding
12
+
13
+
Data binds seamlessly with various [local and remote data sources](https://ej2.syncfusion.com/react/documentation/schedule/data-binding?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace) such as: JSON, RESTful services, OData services, and WCF services.
14
+
15
+
### Event handling options
16
+
17
+
There is built-in support for better [event handling](https://www.syncfusion.com/react-ui-components/react-scheduler/scheduler-events?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), such as easier appointment creation and editing using the default event editor or through intuitive drag-and-resize actions. Easily configurable recurring events to repeat on a daily, weekly, monthly, or yearly basis. Change the look and feel of events by customizing their default appearance and style using templates.
18
+
19
+
### Drag and drop events
20
+
21
+
Reschedule events and appointments easily by dragging them onto the required time slots. You can also see the live time updates over the dragged appointments.
22
+
23
+
### Event resizing
24
+
25
+
Easily extend a Scheduler event’s time by resizing either its start or end handlers. You can also see the live time updates over the resized appointments.
26
+
27
+
### Resource grouping
28
+
29
+
Built-in support is available for assigning resources to events as well as [scheduling resources](https://www.syncfusion.com/react-ui-components/react-scheduler/multiple-resources?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace). Group events and appointments based on resources or dates. Grouping resources by date provides a quick overview of each resource’s availability. You can also set different working days for each resource. A new compact layout for displaying resources on a mobile screen, brings clear visibility of events of each individual resource.
30
+
31
+
### Timeline scheduling
32
+
33
+
[Timeline scheduling](https://www.syncfusion.com/react-ui-components/react-scheduler/timeline-view?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace) plays a major role in the React Scheduler, as it displays resources in rows in a hierarchical tree-like structure with expand and collapse options. Its feature-rich calendar options, compact resource scheduling, and clear event representation allows you to employ it in various real-time applications. You can also display the year, month, and week number text labels on each individual header row of timeline views with out-of-the-box templates.
34
+
35
+
### Responsive and touch-friendly
36
+
37
+
The React Scheduler (event calendar) has a highly responsive layout and a finely optimized design for desktops, touch screens, and smart phones. It works well on all mobile phones that use iOS, Android, or Windows 8 OS.
38
+
39
+
### Customizable UI
40
+
41
+
The React Scheduler inherits almost all the calendar-specific features, such as first day of the week and timescale. Also, it allows you to customize the appearance of any part of the Scheduler interface using HTML and CSS styles.
42
+
43
+
### User-friendly interactions
44
+
45
+
The modern and trendy UI design of the react Scheduler makes the user interactions simpler and more efficient. It includes quick overview of event information, smooth date navigation, view navigation and easier selection of cells and events.
46
+
47
+
### Real-time data synchronization
48
+
49
+
Real-time appointment data of Outlook and Google Calendar accurately synchronizes with our HTML5 react Scheduler. It also supports bidirectional data communication through SignalR.
50
+
51
+
### Web framework integration
52
+
53
+
As a pure JavaScript component, the event scheduler integrates easily with any web framework:
[Learn More about React Scheduler](https://www.syncfusion.com/react-ui-components/react-scheduler?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace) <br/>
[Suggest a feature](https://www.syncfusion.com/feedback/react?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace)
68
+
69
+
## React Scheduler - How to load appointments from a local JSON file?
70
+
2
71
A quick start React project that helps you to create a React Scheduler that loads its appointment data from a local JSON file.
3
72
4
-
## Project pre-requisites
73
+
### Project pre-requisites
74
+
5
75
Make sure that you have the compatible versions of React and NPM in your machine before starting to work on this project.
6
76
* React versions greater than 15.5.4
7
77
* NPM or Yarn package manager
8
78
9
-
## How to run this application?
79
+
### How to run this application?
80
+
10
81
To run this application, you need to first clone the `getting-started-with-the-react-scheduler` repository and then navigate to its appropriate path where it has been located in your system.
11
82
12
83
To do so, open the command prompt and run the below commands one after the other.
Once done with downloading, next you need to install the necessary packages required to run this application locally. The `npm install` command will install all the needed react packages and Syncfusion packages mentioned in the package.json file into your current project. To do so, run the below command.
21
93
22
94
```
23
95
npm install
24
96
```
25
97
26
-
## Running on development server
98
+
### Running on development server
99
+
27
100
Run `npm start` command and navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files.
101
+
102
+
## About Syncfusion React UI Components
103
+
104
+
Syncfusion's [React Components](https://www.syncfusion.com/react-ui-components?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace) library is the only suite that you will ever need to build an application since it contains over 70 high-performance, lightweight, modular, and responsive UI components in a single package. In addition to Scheduler, we provide popular React Components such as [DataGrid](https://www.syncfusion.com/react-ui-components/react-grid?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [Charts](https://www.syncfusion.com/react-ui-components/react-charts?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [Diagram](https://www.syncfusion.com/react-ui-components/react-diagram?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), and [Word Processor](https://www.syncfusion.com/react-ui-components/react-word-processor?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace).
105
+
106
+
## About Syncfusion
107
+
108
+
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
109
+
110
+
Today we provide 1600+ controls and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [ASP.NET Web Forms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [Angular](https://www.syncfusion.com/angular-ui-components?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [React](https://www.syncfusion.com/react-ui-components?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [Vue](https://www.syncfusion.com/vue-ui-components?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace) and [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace)), and desktop development ([Windows Forms](https://www.syncfusion.com/winforms-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), [WinUI(Preview)](https://www.syncfusion.com/winui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), and [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=vs_marketplace&utm_medium=listing&utm_campaign=react-scheduler-trial-vs_marketplace)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.
0 commit comments