Using dhtmlxScheduler with MeteorJS

Stas Wolski

Rate me:

0.00/5 (No votes)

5 Feb 2018GPL33 min read

10.2K

Learn how to use JavaScript Event Calendar with MeteorJS Framework

Introduction

In this article, we’ll learn the basics of using the Meteor framework for creating web applications. Meteor is an open-source full-stack JavaScript framework that was written using Node.js. It was designed to simplify the web applications development process. The main feature of this framework is the possibility to transfer data changes in real-time.

To make our example more exciting, we won’t use a typical “Hello, World!” approach to learning how everything works. Instead, we’ll create an online scheduler using dhtmlxScheduler, feature-rich JavaScript event calendar.

All we need to create our applications are few easy steps. Well, let’s start.

Step 1. Installing Meteor and Creating a New Project

The way of how you install Meteor depends on the operating system you use. For Windows, you should get the installation package.

In case of OSX or LINUX, you can use the following command:

JavaScript

curl https://install.meteor.com/ | sh

Check the installation page for more details.

After a while, all the required files will be installed, and you’ll be ready to create a new project. Our will be named meteor_scheduler. To do so, type in your terminal:

meteor create meteor_scheduler

This command will create a new folder with the required files within it. Now, we can try if everything works. Open the newly created folder and run the meteor command:

cd meteor_scheduler
meteor

Here’s the typical output that you should get:

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/

You can open http://localhost:3000 in your browser to check the result. You should see the click counter with the couple of links:

Doesn’t look so promising, but be patient.

Step 2. Add and Initialize the dhtmlxScheduler Package

There’s a special package that allows you to add dhtmlxScheduler to your Meteor project. There’s no need to download and unpack any files manually. To add the required package, use the command:

JavaScript

meteor add dhtmlx:scheduler

To learn more about this package, you can check this page.

Since we’re working on the client side of the application, we should edit the client/main.html file for our needs. Replace the existing code with the following:

HTML

<body>
  <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:500px;'>
      <div class="dhx_cal_navline">
      <div class="dhx_cal_prev_button">&nbsp;</div>
      <div class="dhx_cal_next_button">&nbsp;</div>
      <div class="dhx_cal_today_button"></div>
      <div class="dhx_cal_date"></div>
      <div class="dhx_cal_tab" name="day_tab" style="right:332px;"></div>
      <div class="dhx_cal_tab" name="week_tab" style="right:268px;"></div>
      <div class="dhx_cal_tab" name="month_tab" style="right:204px;"></div>
      <div class="dhx_cal_tab" name="year_tab" style="right:140px;"></div>
      </div>
      <div class="dhx_cal_header">
      </div>
      <div class="dhx_cal_data">
      </div>
  </div>
</body>

This code will create the navigation bar, buttons, etc. To initialize the scheduler, use the init() method. Place this code at the bottom of your <body></body> section:

JavaScript

<script type="text/javascript">
    scheduler.init("scheduler_here", new Date());
</script>

That’s it! We can already try our application. Run the meteor command if you have shut down the server and open http://localhost:3000 in your browser. The result is shown below:

You can double click the proper calendar area, and the new task will appear. Resize it to change its duration or drag it to any date you want:

Looks great but if you shut down the server and then run it again, all created tasks will disappear. The reason is that we have not provided the opportunity to save the data. Let’s fix it.

Step 3. Adding Meteor Data Adapter for dhtmlxScheduler

First, add the dhtmlxScheduler data adapter package to your application:

JavaScript

meteor add dhtmlx:scheduler-data

Now, you should define data collections. There are different available approaches for this task, but we’ll use the one that will make collections available for both client and server. We need to create a new folder named collections within the root folder of our project. After that, create a file named tasks.js within this folder and add the following code into it:

JavaScript

TasksCollection = new Mongo.Collection("tasks");

Now, we should change the way of the scheduler initialization. Replace the existing script within the client/main.html file with the following:

HTML

Meteor.startup(function() {
  //Init dhtmlxScheduler.
  scheduler.init("scheduler_here", new Date());

  //Init dhtmlxScheduler data adapter.
  scheduler.meteor(TasksCollection);
  //or
  scheduler.meteor(TasksCollection.find(/*[anything]*/), TasksCollection);
});

Done. Now you can refresh the page, restart the server and not have to worry about data safety.

Conclusions

The bast part about working with Meteor is the speed of development. As you saw, if tool developers are taken care of creating the proper Meteor packages, there’s even no need to download additional files manually. Meteor will take care of everything. With Meteor you can see changes in real-time. After you change a line of code, you can see the consequences immediately without server restarting.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Written By

Stas Wolski

Software Developer (Senior)

Russian Federation

Building web apps since 2001. Rich experience in HTML frontends for different platforms.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Using dhtmlxScheduler with MeteorJS

Introduction

Step 1. Installing Meteor and Creating a New Project

Step 2. Add and Initialize the dhtmlxScheduler Package

Step 3. Adding Meteor Data Adapter for dhtmlxScheduler

Conclusions

License

Comments and Discussions