{"id":3989,"date":"2017-03-28T18:00:46","date_gmt":"2017-03-28T14:00:46","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=3989"},"modified":"2026-01-23T14:48:44","modified_gmt":"2026-01-23T11:48:44","slug":"create-meteor-app-dhtmlxscheduler","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/create-meteor-app-dhtmlxscheduler\/","title":{"rendered":"How To Create Meteor App with dhtmlxScheduler"},"content":{"rendered":"

We’ve already described<\/a> how to integrate our Scheduler component<\/a> into meteor app using special packages. Though it was easiest way to integrate dhtmlxScheduler, we now release this article that shows you how to integrate dhtmlxScheduler with Meteor JavaScript framework manually in case you want to get it more flexible for some specific customization.<\/p>\n

Before we start our integration, make sure that Meteor platform is installed according to Meteor. If everything is OK, let’s move on and prepare our app.<\/p>\n

You can jump to a complete Scheduler with Meteor demo<\/strong><\/a> that is already available on GitHub.<\/p>\n

4 steps to prepare our app<\/h4>\n

Step 1.<\/strong> First of all, we need to create an app. For this, run the following command in your terminal:<\/p>\n

meteor create scheduler-<\/span>meteor<\/div><\/div>\n

Here is how we run the app:<\/p>\n

cd scheduler-<\/span>meteor
\nmeteor<\/div><\/div>\n

Now if we open http:\/\/127.0.0.1:3000\/<\/strong> we should see a page like this:<\/p>\n

\"welcome<\/p>\n

Step 2.<\/strong> Then its time to install dhtmlxScheduler. To do this, run the following command:<\/p>\n

meteor npm install dhtmlx-<\/span>scheduler --<\/span>save<\/div><\/div>\n

Let’s also install the helper package to load static files. For this purpose run the next:<\/p>\n

meteor add runisland:<\/span>static-<\/span>assets<\/div><\/div>\n

Create file static-assets.json in the application root and put the following code to it to define folders with scheduler images to load as static files:<\/p>\n

{<\/span>
\n"map"<\/span>:<\/span> {<\/span>
\n"node_modules\/dhtmlx-scheduler\/codebase\/imgs\/"<\/span>:<\/span> "imgs\/"<\/span>,<\/span>
\n"node_modules\/dhtmlx-scheduler\/codebase\/imgs_contrast_black\/"<\/span>:<\/span> "imgs_contrast_black\/"<\/span>,<\/span>
\n"node_modules\/dhtmlx-scheduler\/codebase\/imgs_contrast_white\/"<\/span>:<\/span> "imgs_contrast_white\/"<\/span>,<\/span>
\n"node_modules\/dhtmlx-scheduler\/codebase\/imgs_dhx_terrace\/"<\/span>:<\/span> "imgs_dhx_terrace\/"<\/span>,<\/span>
\n"node_modules\/dhtmlx-scheduler\/codebase\/imgs_flat\/"<\/span>:<\/span> "imgs_flat\/"<\/span>,<\/span>
\n"node_modules\/dhtmlx-scheduler\/codebase\/imgs_glossy\/"<\/span>:<\/span> "imgs_glossy\/"<\/span>
\n}<\/span>
\n}<\/span><\/div><\/div>\n

Step 3.<\/strong> Create imports\/ui\/scheduler folders and create scheduler.html file inside it. Here we’ll define template with necessary blocks for scheduler.<\/p>\n

Add the following code to it:<\/p>\n

 <\/div><\/div>\n
<\/div>\n

 <\/p>\n

Also we need to create scheduler.js in this folder. Now we need to put scheduler initialization code to it:<\/p>\n

import<\/span> 'dhtmlx-scheduler\/codebase\/dhtmlxscheduler.js'<\/span>;<\/span>
\nimport<\/span> 'dhtmlx-scheduler\/codebase\/dhtmlxscheduler.css'<\/span>;<\/span><\/div><\/div>\n

import ‘.\/scheduler.html’;<\/p>\n

Template.scheduler.onRendered(function () {
\nlet container = this.$(“.dhx_cal_container”)[0];
\nscheduler.init(container, new Date(2017, 2, 16), “week”);
\n});<\/p>\n

Here we’re initializing scheduler after template rendering.<\/p>\n

Step 4.<\/strong> Open client\/main.html file and put the following code to add our scheduler template to body:<\/p>\n

scheduler-meteor<\/div><\/div>\n

{{> scheduler}}<\/p>\n

The next step is to open client\/main.js file and import our scheduler.js to entry point:<\/p>\n

import<\/span> {<\/span> Template }<\/span> from 'meteor\/templating'<\/span>;<\/span><\/div><\/div>\n

import ‘..\/imports\/ui\/scheduler\/scheduler.js’;
\nimport ‘.\/main.html’;<\/p>\n

Now if we run our application, we should see an empty scheduler on the page:<\/p>\n

\"empty-scheduler\"<\/p>\n

Data Saving<\/h4>\n

Create API folder inside imports folder, and then create events.js module inside. Here we create new mongo collection for events and export it.<\/p>\n

import<\/span> {<\/span> Mongo }<\/span> from 'meteor\/mongo'<\/span>;<\/span><\/div><\/div>\n

export const Events = new Mongo.Collection(‘events’);<\/p>\n

We should import this module on the server to create MongoDB collection and allow client to get data. Open server\/main.js and add following this:<\/p>\n

import<\/span> '..\/imports\/api\/events.js'<\/span>;<\/span><\/div><\/div>\n

Also we should update our client side. Now we want to set up two-way sync between scheduler and our mongo collection, so each time scheduler data is modified – it will be immediately reflected in mongo and vice versa. Open imports\/ui\/scheduler\/scheduler.js to put the following:<\/p>\n

import<\/span> 'dhtmlx-scheduler\/codebase\/dhtmlxscheduler.js'<\/span>;<\/span>
\nimport<\/span> 'dhtmlx-scheduler\/codebase\/dhtmlxscheduler.css'<\/span>;<\/span><\/div><\/div>\n

import ‘.\/scheduler.html’;<\/p>\n

import {Events} from ‘..\/..\/api\/events.js’;<\/p>\n

Template.scheduler.onRendered(function () {
\nlet container = this.$(“.dhx_cal_container”)[0];
\nscheduler.init(container, new Date(2017, 2, 16), “week”);
\nlet parseEventData = (data)=> {
\nlet event = {};<\/p>\n

for (let property in data) {
\nif (property == “_id”) {
\nevent[“id”] = data[property];
\n}
\nelse {
\nevent[property] = data[property];
\n}
\n}<\/p>\n

return event;
\n};<\/p>\n

let serializeEvent = (event) => {
\nlet data = {};<\/p>\n

for (let property in event) {
\nif (property.charAt(0) == “_” || property == “id”) continue;<\/p>\n

data[property] = event[property];
\n}<\/p>\n

return data;
\n};<\/p>\n

let eventsCursor = Events.find();
\nlet events = [];
\nlet renderTimeout = null;<\/p>\n

eventsCursor.observe({
\nadded(data) {
\nlet event = parseEventData(data);
\nif (!scheduler.getEvent(event.id)) {
\nevents.push(event);
\n}<\/p>\n

clearTimeout(renderTimeout);
\nrenderTimeout = setTimeout(()=> {
\nscheduler.parse(events, “json”);
\nevents = [];
\n}, 5);
\n},<\/p>\n

changed(data) {
\nlet event = parseEventData(data);
\nlet originalEvent = scheduler.getEvent(event.id);<\/p>\n

if (!originalEvent) return;<\/p>\n

for (let key in event) {
\noriginalEvent[key] = event[key];
\n}<\/p>\n

scheduler.updateView();
\n},<\/p>\n

removed(data){
\nlet event = parseEventData(data);
\nif (scheduler.getEvent(event.id)) {
\nscheduler.deleteEvent(event.id);
\n}
\n}
\n});<\/p>\n

scheduler.attachEvent(“onEventAdded”, (eventId, event) => {
\nlet data = serializeEvent(event);
\nlet newId = Events.insert(data);
\nscheduler.changeEventId(eventId, newId);
\n});<\/p>\n

scheduler.attachEvent(“onEventChanged”, (eventId, event) => {
\nlet data = serializeEvent(event);
\nEvents.update(eventId, {$set: data});
\n});<\/p>\n

scheduler.attachEvent(“onEventDeleted”, (eventId) => {
\nEvents.remove(eventId);
\n});
\n});<\/p>\n

Also here we add scheduler events handlers to put events changes to collection. So, when event is added, changed or deleted, we add corresponding changes to collection.<\/p>\n

Now we can add some initial events. Do so, run the following code in your terminal:<\/p>\n

meteor mongo
\ndb.events<\/span>.insert<\/span>(<\/span>{<\/span>_id:<\/span> "1"<\/span>,<\/span> start_date:<\/span> new<\/span> Date<\/span>(<\/span>2017<\/span>,<\/span> 2<\/span>,<\/span> 16<\/span>,<\/span> 8<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> end_date:<\/span> new<\/span> Date<\/span>(<\/span>2017<\/span>,<\/span> 2<\/span>,<\/span> 16<\/span>,<\/span> 12<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> text:<\/span> "Test Event 1"<\/span>}<\/span>)<\/span>;<\/span>
\ndb.events<\/span>.insert<\/span>(<\/span>{<\/span>_id:<\/span> "2"<\/span>,<\/span> start_date:<\/span> new<\/span> Date<\/span>(<\/span>2017<\/span>,<\/span> 2<\/span>,<\/span> 17<\/span>,<\/span> 9<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> end_date:<\/span> new<\/span> Date<\/span>(<\/span>2017<\/span>,<\/span> 2<\/span>,<\/span> 17<\/span>,<\/span> 13<\/span>,<\/span> 0<\/span>)<\/span>,<\/span> text:<\/span> "Test Event 2"<\/span>}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Now we get a working example. It should load data from the server side and save changes.<\/p>\n

\"scheduler-data-loading\"<\/p>\n

Thus you have a demo of a real-time scheduling calendar based on Meteor JS Framework and dhtmlxScheduler (feature-rich booking\/appointment calendar). Grab the demo from GitHub<\/a> to study the integration and customize according to your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"

We’ve already described how to integrate our Scheduler component into meteor app using special packages. Though it was easiest way to integrate dhtmlxScheduler, we now release this article that …<\/p>\n","protected":false},"author":2,"featured_media":3992,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,14,44,15],"class_list":["post-3989","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-tips","tag-meteor","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3989"}],"version-history":[{"count":5,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3989\/revisions"}],"predecessor-version":[{"id":14960,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3989\/revisions\/14960"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3992"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}