{"id":2966,"date":"2015-10-01T17:39:20","date_gmt":"2015-10-01T13:39:20","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2966"},"modified":"2025-03-28T19:51:09","modified_gmt":"2025-03-28T16:51:09","slug":"use-dhtmlxscheduler-ruby-rails-part-1-tutorial","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/use-dhtmlxscheduler-ruby-rails-part-1-tutorial\/","title":{"rendered":"How to Use dhtmlxScheduler with Ruby on Rails – Part 1 [Tutorial]"},"content":{"rendered":"

In this tutorial we’d like to show you how to use our scheduling calendar<\/a>, dhtmlxScheduler, with Ruby on Rails<\/a>, a web application framework written in Ruby. The tutorial consists of two parts: firstly, we’ll create a simple scheduler with data saving and loading, the second part is adding recurring events to it. Let’s start.<\/p>\n

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

<\/p>\n

Creating a scheduler<\/h3>\n

\nStep 1.<\/strong> The first thing we need to do is to create a new project. For this we need to run the next command:<\/p>\n

rails new<\/span> path\/<\/span>to\/<\/span>your\/<\/span>application<\/div><\/div>\n

Step 2.<\/strong> After that create a home controller:<\/p>\n

rails generate controller home index<\/div><\/div>\n

Step 3.<\/strong> Open config\/routes.rb and replace<\/p>\n

get 'home\/index'<\/span><\/div><\/div>\n

with<\/p>\n

root :to<\/span> =><\/span> 'home#index'<\/span><\/div><\/div>\n

When it’s done, check the server performance with the following command:<\/p>\n

rails server<\/div><\/div>\n

When you open http:\/\/localhost:3000\/<\/em> in browser, you should get this page:<\/p>\n

\"localhost-ror\"<\/p>\n

Step 4.<\/strong> Finished with these settings, we’ll proceed to Scheduler component. So, the next step is to download dhtmlxScheduler<\/a>.<\/p>\n

The following files unpack to vendor\/assets\/javascripts\/:<\/p>\n

codebase\/dhtmlxscheduler.js
\ncodebase\/ext
\ncodebase\/locale<\/em><\/p>\n

These files to vendor\/assets\/stylesheets\/:<\/p>\n

codebase\/dhtmlxscheduler.css
\ncodebase\/dhtmlxscheduler_classic.css
\ncodebase\/dhtmlxscheduler_flat.css
\ncodebase\/dhtmlxscheduler_glossy.css<\/em><\/p>\n

Then we need to create “assets” folder in the “public” directory and unpack the following files to it: <\/p>\n

codebase\/imgs
\ncodebase\/imgs_dhx_terrace
\ncodebase\/imgs_flat
\ncodebase\/imgs_glossy<\/em><\/p>\n

Open config\/initializers\/assets.rb. We need to add the style sheet and dhtmlxscheduler.js file to the precompile array.<\/p>\n

For this, add the next lines to this file:<\/p>\n

Rails.application<\/span>.config<\/span>.assets<\/span>.precompile<\/span> +<\/span>= %<\/span>w(<\/span> dhtmlxscheduler.css<\/span> )<\/span>
\nRails.application<\/span>.config<\/span>.assets<\/span>.precompile<\/span> +<\/span>= %<\/span>w(<\/span> dhtmlxscheduler.js<\/span> )<\/span><\/div><\/div>\n

Step 5.<\/strong> Open app\/views\/layouts\/application.html.erb. This file is a template for all the pages that have common elements.<\/p>\n

Here we include dhtmlxscheduler.js and dhtmlxscheduler.css<\/p>\n

<!DOCTYPE html><\/span>
\n<html<\/span>><\/span>
\n<head<\/span>><\/span>
\n <title<\/span>><\/span>Scheduler on Rails<\/<\/span>title<\/span>><\/span>
\n <%=<\/span> stylesheet_link_tag    'application'<\/span>, media<\/span>: 'all'<\/span>, 'data-turbolinks-track'<\/span> =<\/span>><\/span> true %>
\n <%=<\/span> stylesheet_link_tag 'dhtmlxscheduler'<\/span>, media<\/span>: 'all'<\/span>, 'data-turbolinks-track'<\/span> =<\/span>><\/span> true %>
\n <%=<\/span> javascript_include_tag 'application'<\/span>, 'data-turbolinks-track'<\/span> =<\/span>><\/span> true %>
\n <%=<\/span> javascript_include_tag 'dhtmlxscheduler'<\/span>, 'data-turbolinks-track'<\/span> =<\/span>><\/span> true %>
\n <%=<\/span> csrf_meta_tags %><\/span>  
\n<\/<\/span>head<\/span>><\/span>
\n<body<\/span>><\/span>
\n
\n<%=<\/span> yield %><\/span>
\n
\n<\/<\/span>body<\/span>><\/span>
\n<\/<\/span>html<\/span>><\/span><\/div><\/div>\n

Step 6.<\/strong> In this step we open app\/views\/home\/index.html.erb, the file that is used for a view for our home controller. It will display the scheduler.<\/p>\n

Now we add a container for scheduler, and then initialize our calendar:<\/p>\n

<<\/span>div id=<\/span>"scheduler_here"<\/span> class<\/span>=<\/span>"dhx_cal_container"<\/span> style=<\/span>'width:100%; height:800px;'<\/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:204px;"<\/span>><\/<\/span>div><\/span>
\n   <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"week_tab"<\/span> style=<\/span>"right:140px;"<\/span>><\/<\/span>div><\/span>
\n   <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"month_tab"<\/span> style=<\/span>"right:76px;"<\/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
\n<<\/span>script><\/span>
\n   scheduler.init<\/span>(<\/span>"scheduler_here"<\/span>)<\/span>;<\/span>
\n<\/<\/span>script><\/span><\/div><\/div>\n

If we run the server now, we should get our scheduler.<\/p>\n

Step 7.<\/strong> Well, dhtmlxSheduler is initialized and we may proceed to further settings. Let’s create a model for an event. For this, run the following command:<\/p>\n

rails generate model Event start_date:datetime end_date:datetime text:string<\/div><\/div>\n

To create a database, run this:<\/p>\n

rake db:migrate<\/div><\/div>\n

Step 8.<\/strong> The database is created, but let\u2019s check it and add a record. For this, run:<\/p>\n

rails c<\/div><\/div>\n

And add some sample record:<\/p>\n

Event.create<\/span> :start_date<\/span> =><\/span> "2015-05-22 10:00:00"<\/span>, :end_date<\/span> =><\/span> "2015-05-22 15:00:00"<\/span>, :text<\/span> =><\/span> "Test"<\/span><\/div><\/div>\n

To display all the records, we need to run this command:<\/p>\n

Event.all<\/span><\/div><\/div>\n

For exit we use “exit” command.<\/p>\n

Step 9.<\/strong> Now we open config\/routes.rb and add the route for data loading:<\/p>\n

match "home\/data"<\/span>, :to<\/span> =><\/span> "home#data"<\/span>, :as<\/span> =><\/span> "data"<\/span>, :via<\/span> =><\/span> "get"<\/span><\/div><\/div>\n

Step 10.<\/strong> Open app\/controllers\/home_controller.rb and add \u201cdata\u201d action to the controller:<\/p>\n

def<\/span> data
\n   events = Event.all<\/span>
\n
\n   render<\/span> :json<\/span> =><\/span> events.map<\/span> {<\/span>|<\/span>event|<\/span> {<\/span>
\n              :id<\/span> =><\/span> event.id<\/span>,
\n              :start_date<\/span> =><\/span> event.start_date<\/span>.to_formatted_s<\/span>(<\/span>:db<\/span>)<\/span>,
\n              :end_date<\/span> =><\/span> event.end_date<\/span>.to_formatted_s<\/span>(<\/span>:db<\/span>)<\/span>,
\n              :text<\/span> =><\/span> event.text<\/span>
\n          }<\/span>}<\/span>
\n end<\/span><\/div><\/div>\n

Step 11.<\/strong> In this step we open app\/views\/home\/index.html.erb for adding data loading from the server. It’s important to set scheduler.config.xml_date for correct dates parsing.<\/p>\n

<<\/span>div id=<\/span>"scheduler_here"<\/span> class<\/span>=<\/span>"dhx_cal_container"<\/span> style=<\/span>'width:100%; height:800px;'<\/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:204px;"<\/span>><\/<\/span>div><\/span>
\n   <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"week_tab"<\/span> style=<\/span>"right:140px;"<\/span>><\/<\/span>div><\/span>
\n   <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"month_tab"<\/span> style=<\/span>"right:76px;"<\/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
\n<<\/span>script><\/span><\/div><\/div>\n

If everything is done correctly, the data loading should be successful.<\/p>\n

Step 12.<\/strong> We continue with opening config\/routes.rb for adding a route for data handling:<\/p>\n

match "home\/db_action"<\/span>, :to<\/span> =><\/span> "home#db_action"<\/span>, :as<\/span> =><\/span> "db_action"<\/span>, :via<\/span> =><\/span> "get"<\/span><\/div><\/div>\n

Step 13.<\/strong> Open app\/controllers\/home_controller.rb. Add \u201cdb_action\u201d action to the controller:<\/p>\n

def<\/span> db_action
\n   mode = params[<\/span>"!nativeeditor_status"<\/span>]<\/span>
\n   id = params[<\/span>"id"<\/span>]<\/span>
\n   start_date = params[<\/span>"start_date"<\/span>]<\/span>
\n   end_date = params[<\/span>"end_date"<\/span>]<\/span>
\n   text = params[<\/span>"text"<\/span>]<\/span>
\n
\n   case<\/span> mode
\n     when<\/span> "inserted"<\/span>
\n       event = Event.create<\/span> :start_date<\/span> =><\/span> start_date, :end_date<\/span> =><\/span> end_date, :text<\/span> =><\/span> text
\n       tid = event.id<\/span>
\n
\n     when<\/span> "deleted"<\/span>
\n       Event.find<\/span>(<\/span>id)<\/span>.destroy<\/span>
\n       tid = id
\n
\n     when<\/span> "updated"<\/span>
\n       event = Event.find<\/span>(<\/span>id)<\/span>
\n       event.start_date<\/span> = start_date
\n       event.end_date<\/span> = end_date
\n       event.text<\/span> = text
\n       event.save<\/span>
\n       tid = id
\n   end<\/span>
\n
\n   render<\/span> :json<\/span> =><\/span> {<\/span>
\n              :type<\/span> =><\/span> mode,
\n              :sid<\/span> =><\/span> id,
\n              :tid<\/span> =><\/span> tid,
\n          }<\/span>
\n end<\/span><\/div><\/div>\n

Step 14.<\/strong> To save the changes in scheduler we need to use DataProcessor. Open app\/views\/home\/index.html.erb.<\/p>\n

Add dataProcessor:<\/p>\n

var dp = new<\/span> dataProcessor(<\/span>"<%= db_action_path %>"<\/span>)<\/span>;
\n      dp.init<\/span>(<\/span>scheduler)<\/span>;
\n      dp.setTransactionMode<\/span>(<\/span>"GET"<\/span>, false<\/span>)<\/span>;<\/div><\/div>\n

As a result we should have:<\/p>\n

<<\/span>div id=<\/span>"scheduler_here"<\/span> class<\/span>=<\/span>"dhx_cal_container"<\/span> style=<\/span>'width:100%; height:800px;'<\/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:204px;"<\/span>><\/<\/span>div><\/span>
\n   <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"week_tab"<\/span> style=<\/span>"right:140px;"<\/span>><\/<\/span>div><\/span>
\n   <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"month_tab"<\/span> style=<\/span>"right:76px;"<\/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
\n<<\/span>script><\/span>
\n    scheduler.config<\/span>.xml_date<\/span>=<\/span>"%Y-%m-%d %H:%i"<\/span>;<\/span>
\n    scheduler.init<\/span>(<\/span>"scheduler_here"<\/span>)<\/span>;<\/span>
\n    scheduler.load<\/span>(<\/span>"<%= data_path %>"<\/span>,<\/span> "json"<\/span>)<\/span>;<\/span>
\n    var<\/span> dp =<\/span> new<\/span> dataProcessor(<\/span>"<%= db_action_path %>"<\/span>)<\/span>;<\/span>
\n    dp.init<\/span>(<\/span>scheduler)<\/span>;<\/span>
\n    dp.setTransactionMode<\/span>(<\/span>"GET"<\/span>,<\/span> false<\/span>)<\/span>;<\/span>
\n<\/<\/span>script><\/span><\/div><\/div>\n

But if you’d like to use POST requests for changing the data in the database, you need to specify Transaction Mode dataProcessor = POST. Moreover, you need to change the corresponding route to:<\/p>\n

match "home\/db_action"<\/span>, :to<\/span> =><\/span> "home#db_action"<\/span>, :as<\/span> =><\/span> "db_action"<\/span>, :via<\/span> =><\/span> "post"<\/span><\/div><\/div>\n

And you need to open app\/controllers\/application_controller.rb and set<\/p>\n

protect_from_forgery with: :null_session<\/span><\/div><\/div>\n

instead of<\/p>\n

protect_from_forgery with: :exception<\/span><\/div><\/div>\n

Step 15.<\/strong> Finally we’re ready to check our results. So, run the server:<\/p>\n

rails server<\/div><\/div>\n

\"scheduler-with-rails\"<\/p>\n

Well, this is everything you need to start using dhtmlxScheduler with Ruby on Rails. The second part of our tutorial that will show you how to set recurring events in dhtmlxScheduler with RoR will be released in a week. Stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"

In this tutorial we’d like to show you how to use our scheduling calendar, dhtmlxScheduler, with Ruby on Rails, a web application framework written in Ruby. The tutorial consists …<\/p>\n","protected":false},"author":2,"featured_media":3804,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,14,36,15],"class_list":["post-2966","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-ruby-on-rails","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2966","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=2966"}],"version-history":[{"count":4,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2966\/revisions"}],"predecessor-version":[{"id":13638,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2966\/revisions\/13638"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3804"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\"scheduler-init\"<\/a><\/p>\n