How to Use dhtmlxScheduler in MeteorJS Based Apps

| Comments (5)

We’ve already described how to integrate dhtmlxGantt with Meteor Framework, and this time we’ll share quite similar instructions on how to use our JavaScript Event Calendar with MeteorJS.

download scheduler


For those who didn’t meet and work with MeteorJS earlier, we remind that it’s an open-source real-time JavaScript web application framework written on top of Node.js. The coolest thing about it is the ability to automatically transfer data changes to clients in real-time without requiring the developer to write any synchronization code.

Our Aim and Benefits

Based in the given definition of this rapidly growing framework and with regard to the ability of its integration with any client-side library, we’d like to specify why you may need dhtmlxScheduler and Meteor integration and what you’ll get from it.

– In general, lots of applications require calendar. And if you develop with Meteor, you will have the ability to use a ready integration with modern and full-featured event calendar. So, it’s really time-saving thing.

– As you already know, MeteorJS provides the ability for the end users to see all the changes in real-time. In our case, they’ll have the ability to follow the changes of appointments, timetables, events, etc.

Our aim is to show and provide you the easiest way to start using dhtmlxScheduler with MeteorJS, and let Meteor fans to try our calendar. Here are two way for it:

(1) Special dhtmlxScheduler package for Meteor

You don’t need to do some actions that require much additional time and work: download the package from website, unpack, include it in your app, etc. Instead of this you just follow these small instructions:

1. Add this dhtmlxScheduler package:

meteor add dhtmlx:scheduler

2. Initialize dhtmlxScheduler component:

<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>
scheduler.init("scheduler_here", new Date());

This is it. Note that in this case you’ll need to set the communication with database by yourself to get that cool real-time feature. So, let’s see so-called “full version”.

(2) Meteor data adapter for dhtmlxScheduler

The following instructions will help you to set up dhtmlxScheduler in the way that data in the calendar updates live on the screen as it changes.

1. Add the dhtmlxScheduler data adapter:

meteor add dhtmlx:scheduler-data

2. Define data collections as usual:

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

3. Initialize dhtmlxScheduler and data adapter:

<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>
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);
});

And this is it. All these instructions are also available on github: scheduler package for meteor and data adapter.

You’re welcome to share your experience and ask any questions. More new interesting and useful tutorials are coming soon.

Comments

  1. Yves September 3, 2015 at 5:32 am

    Hello,

    Good to know that the scheduler is integrated with Meteor.
    Is this also valid with the recurring event extension ?
    How do we implement event that repeats in the same day. Ex taking a medication 3 times a day for 2 months ?

    Thanks

    • Ivan (DHTMLX team) September 8, 2015 at 3:13 pm

      Hi Yves, to work with recurring events, just add js file with this extension to folder “[your app folder]/client/compatibility”.
      As for your second question, this functionality isn’t available in dhtmlxScheduler.

  2. David March 19, 2016 at 9:50 pm

    One thing I noticed Yves is that to be able to edit recurring events you need to make sure that the dhtmlx-message library is present. An easy way to do that with Meteor is to install https://atmospherejs.com/mrt/dhtmlx-message using the command meteor add mrt:dhtmlx-message

  3. Waman March 28, 2016 at 3:08 pm

    Hi, Is there a way to use this with Autoform? Thanks/Waman

  4. Francis Kim June 20, 2016 at 4:38 pm

    The demos look great

Leave a Reply