How to Use dhtmlxScheduler with Ruby on Rails

In this tutorial we’d like to show you how to use our event calendar, dhtmlxScheduler, with Ruby on Rails, 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.

Creating a scheduler

Step 1. The first thing we need to do is to create a new project. For this we need to run the next command:

rails new path/to/your/application

Step 2. After that create a home controller:

rails generate controller home index

Step 3. Open config/routes.rb and replace

get 'home/index'

with

root :to => 'home#index'

When it’s done, check the server performance with the following command:

rails server

When you open http://localhost:3000/ in browser, you should get this page:

localhost-ror

Step 4. Finished with these settings, we’ll proceed to Scheduler component. So, the next step is to download dhtmlxScheduler.

The following files unpack to vendor/assets/javascripts/:

codebase/dhtmlxscheduler.js
codebase/ext
codebase/locale

These files to vendor/assets/stylesheets/:

codebase/dhtmlxscheduler.css
codebase/dhtmlxscheduler_classic.css
codebase/dhtmlxscheduler_flat.css
codebase/dhtmlxscheduler_glossy.css

Then we need to create “assets” folder in the “public” directory and unpack the following files to it:

codebase/imgs
codebase/imgs_dhx_terrace
codebase/imgs_flat
codebase/imgs_glossy

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

For this, add the next lines to this file:

Rails.application.config.assets.precompile += %w( dhtmlxscheduler.css )
Rails.application.config.assets.precompile += %w( dhtmlxscheduler.js )

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

Here we include dhtmlxscheduler.js and dhtmlxscheduler.css

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

<%= yield %>

</body>
</html>

Step 6. 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.

Now we add a container for scheduler, and then initialize our event calendar:

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:800px;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>

<script>
scheduler.init("scheduler_here");
</script>

If we run the server now, we should get our scheduler.

Step 7. 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:

rails generate model Event start_date:datetime end_date:datetime text:string

To create a database, run this:

rake db:migrate

Step 8. The database is created, but let’s check it and add a record. For this, run:

rails c

And add some sample record:

Event.create :start_date => "2015-05-22 10:00:00", :end_date => "2015-05-22 15:00:00", :text => "Test"

To display all the records, we need to run this command:

Event.all

For exit we use “exit” command.

Step 9. Now we open config/routes.rb and add the route for data loading:

match "home/data", :to => "home#data", :as => "data", :via => "get"

Step 10. Open app/controllers/home_controller.rb and add “data” action to the controller:

def data
events = Event.all

render :json => events.map {|event| {
:id => event.id,
:start_date => event.start_date.to_formatted_s(:db),
:end_date => event.end_date.to_formatted_s(:db),
:text => event.text
}}
end

Step 11. 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.

If everything is done correctly, the data loading should be successful.

Step 12. We continue with opening config/routes.rb for adding a route for data handling:

match "home/db_action", :to => "home#db_action", :as => "db_action", :via => "get"

Step 13. Open app/controllers/home_controller.rb. Add “db_action” action to the controller:

def db_action
mode = params["!nativeeditor_status"]
id = params["id"]
start_date = params["start_date"]
end_date = params["end_date"]
text = params["text"]

case mode
when "inserted"
event = Event.create :start_date => start_date, :end_date => end_date, :text => text
tid = event.id

when "deleted"
Event.find(id).destroy
tid = id

when "updated"
event = Event.find(id)
event.start_date = start_date
event.end_date = end_date
event.text = text
event.save
tid = id
end

render :json => {
:type => mode,
:sid => id,
:tid => tid,
}
end

Step 14. To save the changes in scheduler we need to use DataProcessor. Open app/views/home/index.html.erb.

Add dataProcessor:

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

As a result we should have:

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:

match "home/db_action", :to => "home#db_action", :as => "db_action", :via => "post"

And you need to open app/controllers/application_controller.rb and set

protect_from_forgery with: :null_session

instead of

protect_from_forgery with: :exception

Step 15. Finally we’re ready to check our results. So, run the server:

rails server

scheduler-with-rails

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!

Comments

Kaz November 1, 2016 at 1:52 am

Icons doesn’t work on Rails 4.2. Can’t load from assets. Bugs in dhtmlxscheduler.css. Flat file make unavailable to fix.

- Max November 2, 2016 at 2:53 pm
  
  Hello.
  Have you unpacked your images like mentioned in tutorial?
  You should get something like following:
  …application\public\assets\imgs
  …application\public\assets\imgs_dhx_terrace
  …application\public\assets\imgs_flat
  …application\public\assets\imgs_glossy
  
  I’ve tried on rails 4.2.5.1 and images were loaded correctly.
  
  - Kaz November 6, 2016 at 6:27 pm
    
    Hello,
    I’ve unpacked all files correctly. I have no idea why it wasn’t work. I had to abandon this for another product.
    Regards
    
    
    Aras Kairys (DHTMLX team) November 8, 2016 at 1:32 pm
    
    Hi Kaz,
    Please create a topic on forum: https://forum.dhtmlx.com/
    We will do our best to help you.
    
Chris Worthington September 13, 2017 at 12:31 pm

What is the difference between using “get” or “post”? Whichever I use results in the data getting stored in the database.

- Aras Kairys (DHTMLX team) September 13, 2017 at 2:12 pm
  
  Hi Chris,
  If you defined a route for a db_action method the same way as it shown in the tutorial, i.e.:
  match “home/db_action”, :to => “home#db_action”, :as => “db_action”, :via => “post”
  
  Method that saves changes to the database should be triggered only via POST request – http://guides.rubyonrails.org/routing.html#http-verb-constraints
  
Shaun December 8, 2017 at 9:32 pm

Hi

Is there a repo for this example?

Thanks
Shaun

- Aras Kairys (DHTMLX team) December 11, 2017 at 3:34 pm
  
  Hi Shaun,
  Currently, there is no repository, we’ll set it up as soon as we update the getting started/backend integration section of scheduler docs similarly to how it’s done for dhtmlxGantt: https://docs.dhtmlx.com/gantt/desktop__howtostart_guides.html
  For now, you can download the demo here:
  https://files.dhtmlx.com/30d/213bcfa165ba764fbc7a8db3b13c63a1/dhtmlx-scheduler-rails.zip
  
Shaun Hughston December 8, 2017 at 10:22 pm

And … does the model have to be called ‘Event’, or is the name irrelevant?

- Aras Kairys (DHTMLX team) December 11, 2017 at 3:34 pm
  
  Hi Shaun,
  Yes, the model name is irrelevant.
  
Shaun Hughston December 20, 2017 at 1:23 am

Hi Aras

When I create a new record in the database manually, it is showing record on the calendar object, but not any of the additional fields I have created. If I attempt to create a new record in the front end, it throws this error:

undefined method `appartement_name’ for nil:NilClass Extracted source (around line #38):

What I am hoping to happen is that the fields appear on the front end when I create a record manually in the DB, and for that error not to be present.

I have used ‘bookings’ as my model rather than ‘events’ as shown in the tutorial.

Here is my home_controller.rb code (https://gist.github.com/shaunhughston/d3aa191e7c3458a3d79c8790f2025734)

If you could cast your eye over it, it would be much appreciated. Trying to get a demo up for a client so they can approve and they can buy a licence.

How to Use dhtmlxScheduler with Ruby on Rails – Part 1 [Tutorial]

Creating a scheduler

Comments

Leave a Reply

Tags

Archives

How to Use dhtmlxScheduler with Ruby on Rails – Part 1 [Tutorial]

Creating a scheduler

Related posts:

Comments

Leave a Reply

Tags

Archives