{"id":2872,"date":"2015-06-17T17:11:38","date_gmt":"2015-06-17T13:11:38","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2872"},"modified":"2023-05-05T13:41:06","modified_gmt":"2023-05-05T10:41:06","slug":"use-dhtmlxscheduler-meteorjs-based-apps","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/use-dhtmlxscheduler-meteorjs-based-apps\/","title":{"rendered":"How to Use DHTMLX Scheduler in Meteor JS Based Apps"},"content":{"rendered":"

We’ve already described how to integrate dhtmlxGantt with Meteor Framework<\/a>, and this time we’ll share quite similar instructions on how to use our JavaScript Scheduler<\/a> with MeteorJS.<\/p>\n

\"download<\/a><\/p>\n


\nFor those who didn’t meet and work with MeteorJS<\/a> 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.<\/p>\n

Our Aim and Benefits<\/strong><\/p>\n

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\u2019d like to specify why you may need dhtmlxScheduler and Meteor integration and what you’ll get from it.<\/p>\n

– 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 appointment calendar. So, it’s really time-saving thing.<\/p>\n

– 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. <\/p>\n

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:<\/p>\n

(1) Special dhtmlxScheduler package for Meteor<\/strong><\/p>\n

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:<\/p>\n

1. Add this dhtmlxScheduler package<\/a>:<\/p>\n

meteor add dhtmlx:<\/span>scheduler<\/div><\/div>\n

2. Initialize dhtmlxScheduler component:<\/p>\n

<<\/span>body><\/span>
\n  <<\/span>div id=<\/span>"scheduler_here"<\/span> class<\/span>=<\/span>"dhx_cal_container"<\/span> style=<\/span>'width:100%; height:500px;'<\/span>><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_navline"<\/span>><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_prev_button"<\/span>>&<\/span>nbsp;<\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_next_button"<\/span>>&<\/span>nbsp;<\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_today_button"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_date"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"day_tab"<\/span> style=<\/span>"right:332px;"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"week_tab"<\/span> style=<\/span>"right:268px;"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"month_tab"<\/span> style=<\/span>"right:204px;"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"year_tab"<\/span> style=<\/span>"right:140px;"<\/span>><\/<\/span>div><\/span>
\n      <\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_header"<\/span>><\/span>
\n      <\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_data"<\/span>><\/span>
\n      <\/<\/span>div><\/span>
\n  <\/<\/span>div><\/span>
\n<\/<\/span>body><\/span><\/div><\/div>\n
scheduler.init<\/span>(<\/span>"scheduler_here"<\/span>,<\/span> new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>;<\/span><\/div><\/div>\n

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

(2) Meteor data adapter for dhtmlxScheduler<\/strong><\/p>\n

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.<\/p>\n

1. Add the dhtmlxScheduler data adapter<\/a>:<\/p>\n

meteor add dhtmlx:<\/span>scheduler-<\/span>data<\/div><\/div>\n

2. Define data collections as usual:<\/p>\n

TasksCollection =<\/span> new<\/span> Mongo.Collection<\/span>(<\/span>"tasks"<\/span>)<\/span>;<\/span><\/div><\/div>\n

3. Initialize dhtmlxScheduler and data adapter:<\/p>\n

<<\/span>body><\/span>
\n  <<\/span>div id=<\/span>"scheduler_here"<\/span> class<\/span>=<\/span>"dhx_cal_container"<\/span> style=<\/span>'width:100%;height:500px;'<\/span>><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_navline"<\/span>><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_prev_button"<\/span>>&<\/span>nbsp;<\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_next_button"<\/span>>&<\/span>nbsp;<\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_today_button"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_date"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"day_tab"<\/span> style=<\/span>"right:332px;"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"week_tab"<\/span> style=<\/span>"right:268px;"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"month_tab"<\/span> style=<\/span>"right:204px;"<\/span>><\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"year_tab"<\/span> style=<\/span>"right:140px;"<\/span>><\/<\/span>div><\/span>
\n      <\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_header"<\/span>><\/span>
\n      <\/<\/span>div><\/span>
\n      <<\/span>div class<\/span>=<\/span>"dhx_cal_data"<\/span>><\/span>
\n      <\/<\/span>div><\/span>
\n  <\/<\/span>div><\/span>
\n<\/<\/span>body><\/span><\/div><\/div>\n
Meteor.startup<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>
\n  \/\/Init dhtmlxScheduler.<\/span>
\n  scheduler.init<\/span>(<\/span>"scheduler_here"<\/span>,<\/span> new<\/span> Date<\/span>(<\/span>)<\/span>)<\/span>;<\/span>
\n
\n  \/\/Init dhtmlxScheduler data adapter.<\/span>
\n  scheduler.meteor<\/span>(<\/span>TasksCollection)<\/span>;<\/span>
\n  \/\/or<\/span>
\n  scheduler.meteor<\/span>(<\/span>TasksCollection.find<\/span>(<\/span>\/*[anything]*\/<\/span>)<\/span>,<\/span> TasksCollection)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

And this is it. All these instructions are also available on github: scheduler package for meteor<\/a> and data adapter<\/a>.<\/p>\n

You’re welcome to share your experience and ask any questions. More new interesting and useful tutorials are coming soon.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 Scheduler with MeteorJS.<\/p>\n","protected":false},"author":2,"featured_media":3798,"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-2872","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\/2872","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=2872"}],"version-history":[{"count":2,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2872\/revisions"}],"predecessor-version":[{"id":10681,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2872\/revisions\/10681"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3798"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}