{"id":1975,"date":"2013-09-06T16:42:27","date_gmt":"2013-09-06T12:42:27","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=1975"},"modified":"2025-09-02T14:59:50","modified_gmt":"2025-09-02T11:59:50","slug":"using-dhtmlxscheduler-with-node-js","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-dhtmlxscheduler-with-node-js\/","title":{"rendered":"Creating Online Event Calendar with Node.js and dhtmlxScheduler"},"content":{"rendered":"

The combination of Node.js<\/a> and MongoDB<\/a> is a useful tool for quick development of dynamic sites. In this tutorial, we will explain how dhtmlxScheduler<\/a>, an embeddable JavaScript calendar, can be used to create an online event calendar with Node.js backend.<\/p>\n

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

You can download the full archive with the final solution from GitHub<\/a>.<\/p>\n

Creating a Simple Node.js Site<\/h3>\n

 
\nOne of the advantages of Node.js is a rich library of ready to use solutions. That’s why we won’t write everything from scratch but will use ready modules: Express<\/a>, as a web-framework, and MongoSkin<\/a>, to work with MongoDB.<\/p>\n

You can find a complete demo of using dhtmlxScheduler and Node.js on GitHub right now.<\/a><\/p>\n

To start, let’s create a new directory, for example, ‘scheduler-node’<\/strong>, and install the necessary libraries into it by running the next command:<\/p>\n

mkdir scheduler-node
\ncd scheduler-node
\nnpm install express --save
\nnpm install mongodb@"^2.0.0" --save
\nnpm install mongoskin --save<\/div><\/div>\n

Then we create the base of our application – app.js<\/strong> file in the ‘scheduler-node’<\/strong> directory – with the following content:<\/p>\n

var<\/span> express =<\/span> require(<\/span>'express'<\/span>)<\/span>;<\/span>
\nvar<\/span> path =<\/span> require(<\/span>'path'<\/span>)<\/span>;<\/span>
\nvar<\/span> bodyParser =<\/span> require(<\/span>"body-parser"<\/span>)<\/span>;<\/span>
\n
\n\/\/connect to the mongoDB<\/span>
\nvar<\/span> db =<\/span> require(<\/span>'mongoskin'<\/span>)<\/span>.db<\/span>(<\/span>"mongodb:\/\/localhost\/testdb"<\/span>,<\/span> {<\/span> w:<\/span> 0<\/span>}<\/span>)<\/span>;<\/span>
\n    db.bind<\/span>(<\/span>'event'<\/span>)<\/span>;<\/span>
\n
\n\/\/create express app, use public folder for static files<\/span>
\nvar<\/span> app =<\/span> express(<\/span>)<\/span>;<\/span>
\napp.use<\/span>(<\/span>express.static<\/span>(<\/span>path.join<\/span>(<\/span>__dirname,<\/span> 'public'<\/span>)<\/span>)<\/span>)<\/span>;<\/span>
\n
\n\/\/is necessary for parsing POST request<\/span>
\napp.use<\/span>(<\/span>bodyParser.json<\/span>(<\/span>)<\/span>)<\/span>;<\/span>
\napp.use<\/span>(<\/span>bodyParser.urlencoded<\/span>(<\/span>{<\/span> extended:<\/span> true<\/span> }<\/span>)<\/span>)<\/span>;<\/span>
\n
\napp.listen<\/span>(<\/span>3000<\/span>)<\/span>;<\/span><\/div><\/div>\n

Due to the use of the Express framework, the whole app fitted into several lines. It doesn’t execute anything extraordinary and just serves static files from the ‘public’<\/strong> directory.<\/p>\n

Let’s create ‘public’<\/strong> directory and unpack the folder ‘codebase’<\/strong> from the dhtmlxScheduler package into it (download dhtmlxScheduler Standard Edition<\/a>). After that, the whole file structure will look like this:<\/p>\n

\"dhtmlxScheduler<\/p>\n

Now, we create index.html<\/strong> file in the ‘public’<\/strong> directory. It will be the main page where we will place our calendar. Here is the content of this file:<\/p>\n

<!doctype html><\/span>
\n<head<\/span>><\/span>
\n    <meta<\/span> content<\/span>=<\/span>"text\/html; charset=utf-8"<\/span>><\/span>
\n    <script<\/span> src<\/span>=<\/span>"codebase\/dhtmlxscheduler.js"<\/span> ><\/<\/span>script<\/span>><\/span>
\n    <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"codebase\/dhtmlxscheduler.css"<\/span>><\/span>
\n    <style<\/span> type<\/span>=<\/span>"text\/css"<\/span> media<\/span>=<\/span>"screen"<\/span>><\/span>
\n        html, body{
\n            margin:0px;
\n            padding:0px;
\n            height:100%;
\n            overflow:hidden;
\n        }  
\n    <\/<\/span>style<\/span>><\/span>
\n<\/<\/span>head<\/span>><\/span>
\n
\n
\n<script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n    function init() {
\n        scheduler.init('scheduler_here',new Date(2018,8,4),"month");
\n    }
\n<\/<\/span>script<\/span>><\/span>
\n
\n<body<\/span> onload<\/span>=<\/span>"init();"<\/span>><\/span>
\n    <div<\/span> id<\/span>=<\/span>"scheduler_here"<\/span> class<\/span>=<\/span>"dhx_cal_container"<\/span> style<\/span>=<\/span>'width:100%; height:100%;'<\/span>><\/span>
\n        <div<\/span> class<\/span>=<\/span>"dhx_cal_navline"<\/span>><\/span>
\n            <div<\/span> class<\/span>=<\/span>"dhx_cal_prev_button"<\/span>><\/span>&nbsp;<\/span><\/<\/span>div<\/span>><\/span>
\n            <div<\/span> class<\/span>=<\/span>"dhx_cal_next_button"<\/span>><\/span>&nbsp;<\/span><\/<\/span>div<\/span>><\/span>
\n            <div<\/span> class<\/span>=<\/span>"dhx_cal_today_button"<\/span>><\/<\/span>div<\/span>><\/span>
\n            <div<\/span> class<\/span>=<\/span>"dhx_cal_date"<\/span>><\/<\/span>div<\/span>><\/span>
\n            <div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> name<\/span>=<\/span>"day_tab"<\/span>><\/<\/span>div<\/span>><\/span>
\n            <div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> name<\/span>=<\/span>"week_tab"<\/span>><\/<\/span>div<\/span>><\/span>
\n            <div<\/span> class<\/span>=<\/span>"dhx_cal_tab"<\/span> name<\/span>=<\/span>"month_tab"<\/span>><\/<\/span>div<\/span>><\/span>
\n        <\/<\/span>div<\/span>><\/span>
\n        <div<\/span> class<\/span>=<\/span>"dhx_cal_header"<\/span>><\/span>
\n        <\/<\/span>div<\/span>><\/span>
\n        <div<\/span> class<\/span>=<\/span>"dhx_cal_data"<\/span>><\/span>
\n        <\/<\/span>div<\/span>><\/span>
\n    <\/<\/span>div<\/span>><\/span>
\n<\/<\/span>body<\/span>><\/span><\/div><\/div>\n

This is the basic HTML code needed for working with dhtmlxScheduler.<\/p>\n

To check how the app works, we may start the Node.js server and open http:\/\/localhost:3000 address in a browser. If everything is done correctly, we will see a calendar without events (to start Node.js server, run “nodejs app.js” command).<\/p>\n

\"scheduler<\/p>\n

Loading Events<\/h3>\n

 
\nFirst, we add two new handlers into app.js<\/strong>:<\/p>\n

app.get<\/span>(<\/span>'\/init'<\/span>,<\/span> function<\/span>(<\/span>req,<\/span> res)<\/span>{<\/span>
\n    db.event<\/span>.insert<\/span>(<\/span>{<\/span>
\n        text:<\/span>"My test event A"<\/span>,<\/span>
\n        start_date:<\/span> new<\/span> Date<\/span>(<\/span>2018<\/span>,<\/span>8<\/span>,<\/span>1<\/span>)<\/span>,<\/span>
\n        end_date:<\/span>   new<\/span> Date<\/span>(<\/span>2018<\/span>,<\/span>8<\/span>,<\/span>5<\/span>)<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n    db.event<\/span>.insert<\/span>(<\/span>{<\/span>
\n        text:<\/span>"One more test event"<\/span>,<\/span>
\n        start_date:<\/span> new<\/span> Date<\/span>(<\/span>2018<\/span>,<\/span>8<\/span>,<\/span>3<\/span>)<\/span>,<\/span>
\n        end_date:<\/span>   new<\/span> Date<\/span>(<\/span>2018<\/span>,<\/span>8<\/span>,<\/span>8<\/span>)<\/span>,<\/span>
\n        color:<\/span> "#DD8616"<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n
\n    \/*... skipping similar code for other test events...*\/<\/span>
\n
\n    res.send<\/span>(<\/span>"Test events were added to the database"<\/span>)<\/span>
\n}<\/span>)<\/span>;<\/span>
\n
\n
\napp.get<\/span>(<\/span>'\/data'<\/span>,<\/span> function<\/span>(<\/span>req,<\/span> res)<\/span>{<\/span>
\n    db.event<\/span>.find<\/span>(<\/span>)<\/span>.toArray<\/span>(<\/span>function<\/span>(<\/span>err,<\/span> data)<\/span>{<\/span>
\n        \/\/set id property for all records<\/span>
\n        for<\/span> (<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> data.length<\/span>;<\/span> i++<\/span>)<\/span>
\n            data[<\/span>i]<\/span>.id<\/span> =<\/span> data[<\/span>i]<\/span>._id;<\/span>
\n
\n        \/\/output response<\/span>
\n        res.send<\/span>(<\/span>data)<\/span>;<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The first “\/init” is necessary to generate test data. It just adds a few records into the database.<\/p>\n

The second handler – “\/data” – will be used to load data into the calendar. Here we choose all the records from the database and send them to the client side as JSON structure.<\/p>\n

NOTE: Before sending the records, we define the id property for each object. It’s needed because dhtmlxScheduler expects that record id is stored in obj.id<\/strong> but MongoDB keeps this value in obj._id<\/strong>.<\/p>\n

We also need to add some changes in index.html<\/strong>:<\/p>\n

        scheduler.init<\/span>(<\/span>'scheduler_here'<\/span>,<\/span>new<\/span> Date<\/span>(<\/span>2018<\/span>,<\/span>8<\/span>,<\/span>4<\/span>)<\/span>,<\/span>"month"<\/span>)<\/span>;<\/span>
\n
\n        scheduler.templates<\/span>.xml_date<\/span> =<\/span> function<\/span>(<\/span>value)<\/span>{<\/span> return<\/span> new<\/span> Date<\/span>(<\/span>value)<\/span>;<\/span> }<\/span>;<\/span>
\n        scheduler.load<\/span>(<\/span>"\/data"<\/span>,<\/span> "json"<\/span>)<\/span>;<\/span><\/div><\/div>\n

We have added two lines. The first one defines how to parse dates from the incoming data. Most often, while loading data from the server, dates are stored like strings in a special format. In our case, dates are stored as timestamps and we can convert them into date objects through Date constructor. The second line initiates data loading, using the URL described above.<\/p>\n

If we restart the server and open in browser firstly http:\/\/localhost:3000\/init – to generate test data, and then http:\/\/localhost:3000, we will see our calendar with the events inside.<\/p>\n

Adding, Editing, and Deleting Events<\/h3>\n

 
\nTo add the ability to add, edit, and delete events in the calendar, we need to add the code that initializes dataprocessor to the index.html<\/strong> file:<\/p>\n

        scheduler.config<\/span>.xml_date<\/span>=<\/span>"%Y-%m-%d %H:%i"<\/span>;<\/span>
\n
\n        var<\/span> dp =<\/span> new<\/span> dataProcessor(<\/span>"\/data"<\/span>)<\/span>;<\/span>
\n        dp.init<\/span>(<\/span>scheduler)<\/span>;<\/span>
\n        dp.setTransactionMode<\/span>(<\/span>"POST"<\/span>,<\/span> false<\/span>)<\/span>;<\/span><\/div><\/div>\n

The first line defines the format the dates will take while going back to the server. We are using default year-month-day order that can be parsed by MongoDB. The following block initializes dataprocessor and switches it to the mode of simple POST sending. From now on, each time when the data in the scheduler changes, dataprocessor will call “\/data” url and will pass all the properties of the changed event.<\/p>\n

Let’s now go over to the server code and add one more handler to app.js<\/strong>:<\/p>\n

app.post<\/span>(<\/span>'\/data'<\/span>,<\/span> function<\/span>(<\/span>req,<\/span> res)<\/span>{<\/span>
\n    var<\/span> data =<\/span> req.body<\/span>;<\/span>
\n
\n    \/\/get operation type<\/span>
\n    var<\/span> mode =<\/span> data[<\/span>"!nativeeditor_status"<\/span>]<\/span>;<\/span>
\n    \/\/get id of record<\/span>
\n    var<\/span> sid =<\/span> data.id<\/span>;<\/span>
\n    var<\/span> tid =<\/span> sid;<\/span>
\n
\n    \/\/remove properties which we do not want to save in DB<\/span>
\n    delete<\/span> data.id<\/span>;<\/span>
\n    delete<\/span> data[<\/span>"!nativeeditor_status"<\/span>]<\/span>;<\/span>
\n
\n
\n    \/\/output confirmation response<\/span>
\n    function<\/span> update_response(<\/span>err,<\/span> result)<\/span>{<\/span>
\n        if<\/span> (<\/span>err)<\/span>
\n            mode =<\/span> "error"<\/span>;<\/span>
\n        else<\/span> if<\/span> (<\/span>mode ==<\/span> "inserted"<\/span>)<\/span>
\n            tid =<\/span> data._id;<\/span>
\n
\n        res.setHeader<\/span>(<\/span>"Content-Type"<\/span>,<\/span>"application\/json"<\/span>)<\/span>;<\/span>
\n        res.send<\/span>(<\/span>{<\/span>action:<\/span> mode,<\/span> sid:<\/span> sid,<\/span> tid:<\/span> tid}<\/span>)<\/span>;<\/span>
\n
\n    }<\/span>
\n
\n    \/\/run db operation<\/span>
\n    if<\/span> (<\/span>mode ==<\/span> "updated"<\/span>)<\/span>
\n        db.event<\/span>.updateById<\/span>(<\/span> sid,<\/span> data,<\/span> update_response)<\/span>;<\/span>
\n    else<\/span> if<\/span> (<\/span>mode ==<\/span> "inserted"<\/span>)<\/span>
\n        db.event<\/span>.insert<\/span>(<\/span>data,<\/span> update_response)<\/span>;<\/span>
\n    else<\/span> if<\/span> (<\/span>mode ==<\/span> "deleted"<\/span>)<\/span>
\n        db.event<\/span>.removeById<\/span>(<\/span> sid,<\/span> update_response)<\/span>;<\/span>
\n    else<\/span>
\n        res.send<\/span>(<\/span>"Not supported operation"<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Here we use app.post<\/strong>, as all saving operations use POST queries. The first part of the code defines the type of operation and removes all the technical parameters from an incoming query to get an object that can be saved in the database.<\/p>\n

Next, depending on the type of operation, we call the related method of db.event<\/strong> for adding\/saving\/deleting data. As the operations with database are asynchronous, we pass the specified earlier callback function update_response<\/strong> as the last parameter. <\/p>\n

The client side expects to get the confirmation of saving operation or an error message – this is what the update_response<\/strong> function is responsible for. It generates a JSON response in the necessary format and sends it to the client side. (Details of the format can be found in the documentation<\/a>). In case of adding a new record, this function also includes ID generated by MongoDB for the new record, in response to update of the element id on the client side.<\/p>\n

If we restart the server and open http:\/\/localhost:3000 in browser again, we\u2019ll get a calendar with events that we can create, edit and delete. What is more, all the changes are automatically saved in the database and will be available after reloading the page.<\/p>\n

Again, the final demo is available on GitHub<\/a> so you can download it and view the details.<\/p>\n

Download dhtmlxScheduler to add a powerful scheduling calendar to your app<\/a><\/strong><\/p>\n

Final Thoughts<\/h3>\n

 
\nThe server solution we’ve got is multipurpose. We can add any number of extra fields into the calendar, and we don’t need to change anything in the server code, as it will save and load new fields automatically. The code of data loading and data saving is quite simple. It won’t be difficult to add validation or to format data before loading, if needed.<\/p>\n

By slightly expanding this code, we may get a Node.js event calendar that allows several users to edit the calendar simultaneously (update the data on the client side without reloading pages). However, it is a topic for a separate article.<\/p>\n","protected":false},"excerpt":{"rendered":"

The combination of Node.js and MongoDB is a useful tool for quick development of dynamic sites. In this tutorial, we will explain how dhtmlxScheduler, an embeddable JavaScript calendar, can …<\/p>\n","protected":false},"author":2,"featured_media":3800,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,14,39,15],"class_list":["post-1975","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-nodejs","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/1975","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=1975"}],"version-history":[{"count":3,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/1975\/revisions"}],"predecessor-version":[{"id":14381,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/1975\/revisions\/14381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3800"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=1975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=1975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=1975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}