Create your own scheduler within 10 minutes with Rails and dhtmlxScheduler

Today I am going to show you how to create a Google-like scheduler with your Rails application. Here we are going to  use dhtmlxScheduler. It is a Javascript event calendar. Intuitive drag-and-drop interface allows the end users to quickly manage events and appointments in different views: Day, Week, Month, Year, Agenda, Timeline, etc. For more info regarding dhtmlx click here.

Step- 1: Let’s first create a new Rails application for our scheduler

$ rails new my_scheduler

nishant@nishant26: ~_058

Step- 2: Create  a ‘Home’ controller

$ rails g controller home index

Selection_059

Step – 3 open config/routes.rb and replace as following

get ‘home/index’

with

root ‘home#index’

Step – 4 Start Rails server now and test it in your browser with http://localhost:3000

$ rails s

Selection_060

Step- 5 Now download the dhtmlxScheduler. Download open source from standard edition box. Now unzip the file

Add following files to vendor/assets/javascripts
codebase/dhtmlxscheduler.js
codebase/ext
codebase/locale

and following 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 an assets folder in the public directory and copy following files there.

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

Now open config/initializers/assets.rb and add our newly added css and js to asset precompile settings:

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

Step – 6: Open views/layouts/application.html.erb and include include dhtmlxscheduler.js and dhtmlxscheduler.css

<%= stylesheet_link_tag ‘dhtmlxscheduler’, media: ‘all’, ‘data-turbolinks-track’ => true %>

<%= javascript_include_tag ‘dhtmlxscheduler’, ‘data-turbolinks-track’ => true %>

Step- 7: Now open your newly created home/index.html.erb.It will display our scheduler.

Now we add a container for our scheduler and 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”>&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: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>

Step- 8: Restart your server and check your browser at http://localhost:3000

Selection_061

Step- 9: So dhtmlxSheduler is initialized and we may proceed to further settings. Let’s create a model for an event.  Run the following command

$ rails g model Event start_date:datetime end_date:datetime text:string

Run database migration
$ rake db:migrate

Step- 10: Now open config/routes.rb and add another route for data loading

get “home/data”, to: “home#data”, as: :data

step : 11:
Open controllers/home_controller.rb and add ‘data’ action to it.

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
Add another route to perform antoher db relate action

get “home/db_action”, to: “home#db_action”, as: :db_action

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
    id = id
  end
  render :json => {
    :type => mode,
    :sid => id,
    :tid => tid,
  }

end

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

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

Now add following lines to your index.html.erb script tags:

scheduler.config.xml_date=”%Y-%m-%d %H:%i”;
scheduler.init(“scheduler_here”);
scheduler.load(“<%= data_path %>”, “json”);
var dp = new dataProcessor(“<%= db_action_path %>”);
dp.init(scheduler);
dp.setTransactionMode(“GET”, false);

If you want to use a post request for changing the data in your database, then you need to specify Transaction Mode dataProcessor = POST. Moreover, you need to change the corresponding route to:

post “home/db_action”, to: “home#db_action”, as: :db_action

And you need to add following line in your controllers/application_controller.rb

protect_from_forgery with: :null_session

instead of

protect_from_forgery with: :exception

Step- 15: Finally we are ready to see the result: run your server

$ rails s

Selection_063

The whole source code is availabe at my git repository.

All set! Now, go to your browser and start scheduling your day!!

Have a happy coding!!

Advertisements