How to work with EJ2 React Scheduler in Meteor Project?
This knowledge base article explains how to render the React Scheduler in Meteor framework application.
Step 1: Create a simple meteor application by following the instruction given in the below link.
Step 2: Install the React scheduler package along with the native react packages within the created application. Refer to the following code example to install the required packages.
meteor npm install --save react react-dom meteor npm install --save @syncfusion/ej2-react-schedule
Step 3: Create the schedule.js file under the client folder within the created meteor application and add the scheduler rendering code example as mentioned below.
import React from 'react';
import {ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject} from '@syncfusion/ej2-react-schedule';
import './main.css';
var data = [{
Id: 1,
Subject: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}, {
Id: 5,
Subject: 'Scrum Meeting',
Location: 'Office',
StartTime: new Date(2018, 1, 12, 9, 30),
EndTime: new Date(2018, 1, 12, 10, 30),
RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1'
}];
export default class ScheduleControl extends React.Component {
render() {
return (
<ScheduleComponent height="550px" eventSettings={ { dataSource: data } } selectedDate={new Date(2018, 1, 15)}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
);
}
}
Step 4: Replace the following code example in main.js file to import and render the scheduler component.
import { Meteor } from 'meteor/meteor';
import React from 'react';
import { render } from 'react-dom';
import ScheduleControl from './schedule.js';
Meteor.startup(() => {
render(<ScheduleControl />, document.getElementById('Schedule1'));
});
Step 5: Create a div element in the main.html page body section and add the required CSS file reference in the header section as mentioned in the following code example.
<head> <title>sample</title> <!-- Syncfusion Essential JS 2 Styles --> <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" /> </head> <body> <div id="Schedule1"></div> </body>
Step 4: Run the sample by using the command “meteor” and the scheduler will be displayed as follows.
If you are facing any issues like “Uncaught Error: Target Container is not a DOM element”. Try running the following command to overcome this specific issue.
meteor remove blaze-html-templatesmeteor add static-html
Sample Link:
Conclusion
I hope you enjoyed learning about how to work with EJ2 React Scheduler in Meteor Project.
You can refer to our React Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Scheduler example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
