Skip to content

Commit 8ed5065

Browse files
author
Syed Anas Nizam Deen
committed
initial commit of README.md & changed the version of ej2-react-schedule to "*"
1 parent 57f5ace commit 8ed5065

3 files changed

Lines changed: 308 additions & 17 deletions

File tree

‎README.md‎

Lines changed: 307 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,328 @@
1-
# Getting Started with React UI Components using Next.js
1+
<!--
2+
howto.md
3+
A step-by-step guide to integrate Syncfusion React Scheduler in nextjs
4+
-->
5+
# How to integrate this repository ?
6+
## Description
27

3-
This application demonstrates the usage of the Syncfusion React Schedule component in Next.js.
8+
This repository showcases a demo Next.js application that demonstrates how to integrate the Syncfusion React Scheduler component in a fully client‑side environment. <br />
9+
The application provides an interactive and responsive scheduling interface, allowing users to create, update, view, and delete events directly within the Scheduler without relying on any backend services.
410

5-
To know how to configure the Syncfusion React Schedule component in Next.js, refer to the [documentation](https://ej2.syncfusion.com/react/documentation/schedule/nextjs-getting-started).
11+
<br />
612

7-
## Clone the repository
13+
## Project Structure
14+
```
15+
├── public
16+
│ └── index.html
17+
├── server
18+
│ └── server.js
19+
├── src
20+
│ ├── app
21+
│ │ ├── datasource.tsx
22+
│ │ ├── globals.css
23+
│ │ ├── layout.tsx
24+
│ │ ├── page.module.css
25+
│ │ └── page.tsx
26+
├── next-env.d.ts
27+
├── next.config.js
28+
├── package-lock.json
29+
├── package.json
30+
├── README.md
31+
└── tsconfig.json
32+
```
33+
<br />
34+
35+
## Setup
36+
#### <u>Cloning the repository</u>
37+
38+
1. To clone the sample repository locally, open the command prompt in the desired location and execute the following command.
39+
40+
```bash
41+
42+
git clone https://github.com/SyncfusionExamples/ej2-nextjs-schedule.git
43+
44+
```
45+
46+
2. Navigate to the project directory:
847

9-
* To clone the sample repository locally, open the command prompt in the desired location and execute the following command.
48+
```bash
49+
cd ej2-nextjs-schedule
50+
```
51+
#### <u>Installing Packages</u>
1052

11-
```sh
53+
3. Install the required node modules by running the following command:
1254

13-
git clone https://github.com/SyncfusionExamples/ej2-nextjs-schedule.git
55+
```bash
56+
npm install
57+
```
1458

59+
<br />
60+
61+
## Running the Application
62+
Run the application by using the following command
63+
64+
```bash
65+
npm run dev
1566
```
67+
<br />
68+
69+
## Sample Outputs
70+
![FrontEnd Nextjs Output](./SampleOutputs/Output.png)
71+
*Image illustrating the Syncfusion React Scheduler in nextjs application*
72+
73+
<br />
74+
<br />
75+
<br />
76+
<br />
77+
1678

17-
* Navigate to the project directory:
79+
# How to build this project from scratch?
80+
## Creating a Next.js Application Using Syncfusion® React Components
81+
This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion® React Schedule component.
1882

19-
```sh
20-
cd ej2-nextjs-schedule
83+
<br />
84+
85+
## What is Next.js?
86+
Next.js is a React framework that makes it easy to build fast, SEO-friendly, and user-friendly web applications. It provides features such as server-side rendering, automatic code splitting, routing, and API routes, making it an excellent choice for building modern web applications.
87+
88+
<br />
89+
90+
## Prerequisites
91+
Before getting started with the Next.js application, ensure the following prerequisites are met:
92+
93+
- Node.js 18.17 or later.
94+
95+
- The application is compatible with macOS, Windows, and Linux operating systems.
96+
97+
<br />
98+
99+
## Create a Next.js application
100+
To create a new Next.js application, use one of the commands that are specific to either NPM or Yarn.
101+
102+
##### NPM
103+
```bash
104+
npx create-next-app@latest
105+
```
106+
107+
##### YARN
108+
```bash
109+
yarn create next-app
21110
```
22111

23-
## Installing Packages
112+
Using one of the above commands will lead you to set up additional configurations for the project as below:
113+
114+
1. Define the project name: Users can specify the name of the project directly. Let’s specify the name of the project as `ej2-nextjs-schedule`.
115+
116+
`CMD`
117+
```bash
118+
√ What is your project named? » ej2-nextjs-schedule
119+
```
120+
121+
2. Select the required packages.
24122

25-
Install the required node modules by running the following command:
123+
`CMD`
124+
```bash
125+
√ What is your project named? ... ej2-nextjs-schedule
126+
√ Would you like to use TypeScript? ... No / `Yes`
127+
√ Would you like to use ESLint? ... No / `Yes`
128+
√ Would you like to use Tailwind CSS? ... `No` / Yes
129+
√ Would you like to use `src/` directory? ... No / `Yes`
130+
√ Would you like to use App Router? (recommended) ... No / `Yes`
131+
√ Would you like to customize the default import alias? ... `No`/ Yes
132+
Creating a new Next.js app in D:\ej2-nextjs-schedule.
133+
```
26134

27-
```sh
28-
npm install
135+
3. Once complete the above mentioned steps to create ej2-nextjs-schedule, navigate to the directory using the below command:
136+
137+
`CMD`
138+
```bash
139+
cd ej2-nextjs-schedule
140+
```
141+
The application is ready to run with default settings. Now, let’s add Syncfusion® components to the project.
142+
143+
<br />
144+
145+
## Install Syncfusion® React packages
146+
Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package.
147+
148+
Here, the [React Schedule component](https://www.syncfusion.com/react-components/react-scheduler) is used in the project. To install the React Schedule component, use the following command:
149+
150+
##### NPM
151+
```bash
152+
npm install @syncfusion/ej2-react-schedule --save
153+
```
154+
##### YARN
155+
```bash
156+
yarn add @syncfusion/ej2-react-schedule
29157
```
30158

31-
## Run the application
159+
<br />
160+
161+
## Import Syncfusion® CSS styles
162+
Syncfusion® React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme), which are available in the installed packages. It’s easy to adapt the Syncfusion® React components to match the style of your application by referring to one of the built-in themes.
163+
164+
Import the Material theme into the `src/app/globals.css` file and removed the existing styles in that file, as shown below:
165+
166+
#### globals.css
167+
```bash
168+
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
169+
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
170+
@import "../../node_modules/@syncfusion/ej2-calendars/styles/material.css";
171+
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
172+
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
173+
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
174+
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
175+
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
176+
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
177+
@import "../../node_modules/@syncfusion/ej2-react-schedule/styles/material.css";
178+
```
32179

180+
To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) section.
181+
182+
<br />
183+
184+
## Add Syncfusion® React component
185+
Follow the below steps to add the React Schedule component to the Next.js project:
186+
187+
1. Before adding the Schedule component to your markup, create a `datasource.tsx` file within the src/app/ folder and add the Schedule component data.
188+
189+
#### datasource.tsx
190+
```bash
191+
export let timelineResourceData: Object[] = [
192+
{
193+
Id: 61,
194+
Subject: 'Decoding',
195+
StartTime: new Date(2018, 3, 4, 9, 30),
196+
EndTime: new Date(2018, 3, 4, 10, 30),
197+
IsAllDay: false,
198+
ProjectId: 2,
199+
TaskId: 2
200+
}, {
201+
Id: 62,
202+
Subject: 'Bug Automation',
203+
StartTime: new Date(2018, 3, 4, 13, 30),
204+
EndTime: new Date(2018, 3, 4, 16, 30),
205+
IsAllDay: false,
206+
ProjectId: 2,
207+
TaskId: 1
208+
}, {
209+
Id: 63,
210+
Subject: 'Functionality testing',
211+
StartTime: new Date(2018, 3, 4, 9),
212+
EndTime: new Date(2018, 3, 4, 10, 30),
213+
IsAllDay: false,
214+
ProjectId: 1,
215+
TaskId: 1
216+
}, {
217+
Id: 64,
218+
Subject: 'Resolution-based testing',
219+
StartTime: new Date(2018, 3, 4, 12),
220+
EndTime: new Date(2018, 3, 4, 13),
221+
IsAllDay: false,
222+
ProjectId: 1,
223+
TaskId: 1
224+
}, {
225+
Id: 65,
226+
Subject: 'Test report Validation',
227+
StartTime: new Date(2018, 3, 4, 15),
228+
EndTime: new Date(2018, 3, 4, 18),
229+
IsAllDay: false,
230+
ProjectId: 1,
231+
TaskId: 1
232+
}, {
233+
Id: 66,
234+
Subject: 'Test case correction',
235+
StartTime: new Date(2018, 3, 4, 14),
236+
EndTime: new Date(2018, 3, 4, 16),
237+
IsAllDay: false,
238+
ProjectId: 1,
239+
TaskId: 2
240+
}, {
241+
Id: 67,
242+
Subject: 'Bug fixing',
243+
StartTime: new Date(2018, 3, 4, 14, 30),
244+
EndTime: new Date(2018, 3, 4, 18, 30),
245+
IsAllDay: false,
246+
ProjectId: 2,
247+
TaskId: 2
248+
}, {
249+
Id: 68,
250+
Subject: 'Run test cases',
251+
StartTime: new Date(2018, 3, 4, 17, 30),
252+
EndTime: new Date(2018, 3, 4, 19, 30),
253+
IsAllDay: false,
254+
ProjectId: 1,
255+
TaskId: 2
256+
}, {
257+
Id: 70,
258+
Subject: 'Bug Automation',
259+
StartTime: new Date(2018, 3, 4, 18, 30),
260+
EndTime: new Date(2018, 3, 4, 20),
261+
IsAllDay: false,
262+
ProjectId: 2,
263+
TaskId: 1
264+
}
265+
];
266+
```
267+
2. Then, import and define the Schedule component in the `src/app/page.tsx` file, as shown below:
268+
269+
#### page.tsx
270+
```bash
271+
'use client'
272+
import {
273+
Week, Month, Agenda, ScheduleComponent, ViewsDirective, ViewDirective, EventSettingsModel, ResourcesDirective, ResourceDirective, Inject, Resize, DragAndDrop
274+
} from '@syncfusion/ej2-react-schedule';
275+
import { timelineResourceData } from './datasource';
276+
277+
export default function Home() {
278+
const eventSettings: EventSettingsModel = { dataSource: timelineResourceData }
279+
const group = { byGroupID: false, resources: ['Projects', 'Categories'] }
280+
281+
const projectData: Object[] = [
282+
{ text: 'PROJECT 1', id: 1, color: '#cb6bb2' },
283+
{ text: 'PROJECT 2', id: 2, color: '#56ca85' },
284+
{ text: 'PROJECT 3', id: 3, color: '#df5286' },
285+
];
286+
const categoryData: Object[] = [
287+
{ text: 'Development', id: 1, color: '#1aaa55' },
288+
{ text: 'Testing', id: 2, color: '#7fa900' }
289+
];
290+
return (
291+
<>
292+
<h2>Syncfusion React Schedule Component</h2>
293+
<ScheduleComponent width='100%' height='550px' currentView='Month' selectedDate={new Date(2018, 3, 4)} eventSettings={eventSettings} group={group} >
294+
<ViewsDirective>
295+
<ViewDirective option='Week' />
296+
<ViewDirective option='Month' />
297+
<ViewDirective option='Agenda' />
298+
</ViewsDirective>
299+
<ResourcesDirective>
300+
<ResourceDirective field='ProjectId' title='Choose Project' name='Projects' allowMultiple={false}
301+
dataSource={projectData} textField='text' idField='id' colorField='color'>
302+
</ResourceDirective>
303+
<ResourceDirective field='TaskId' title='Category' name='Categories' allowMultiple={true}
304+
dataSource={categoryData} textField='text' idField='id' colorField='color'>
305+
</ResourceDirective>
306+
</ResourcesDirective>
307+
<Inject services={[Week, Month, Agenda, Resize, DragAndDrop]} />
308+
</ScheduleComponent>
309+
</>
310+
)
311+
}
312+
```
313+
<br />
314+
315+
## Run the application
33316
To run the application, use the following command:
34317
318+
##### NPM
35319
```bash
36320
npm run dev
37-
```
321+
```
322+
323+
##### YARN
324+
```bash
325+
yarn run dev
326+
```
327+
328+
To learn more about the functionality of the Schedule component, refer to the [documentation](https://ej2.syncfusion.com/react/documentation/schedule/getting-started#module-injection).

‎SampleOutputs/Output.png‎

77.9 KB
Loading

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@syncfusion/ej2-react-schedule": "^32.1.22",
12+
"@syncfusion/ej2-react-schedule": "*",
1313
"@types/node": "25.0.6",
1414
"@types/react": "19.2.8",
1515
"@types/react-dom": "19.2.3",

0 commit comments

Comments
 (0)