Create your own scheduler within 10 minutes with Rails and dhtmlxScheduler

来源:互联网 时间:1970-01-01

Hi Guys!

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

Step- 2:Create a ‘Home’ controller

$ rails g controller home index

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

get ‘home/index’


root ‘home#index’

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

$ rails s

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

Add following files to vendor/assets/javascripts




and following files to vendor/assets/stylesheets





Then we need to create an assets folder in the public directory and copy following files there.





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

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: {|event| {


start_date: event.start_date.to_formatted_s(:db),

end_date: event.end_date.to_formatted_s(:db),

text: event.text



step -11Add 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 =

when “deleted”


tid = id

when “updated”

event = Event.find(id)

event.start_date = start_date

event.end_date = end_date

event.text = text

id = id


render :json => {

:type => mode,

:sid => id,

:tid => tid,



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.setTransactionMode(“GET”, false);

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

scheduler.config.xml_date=”%Y-%m-%d %H:%i”;


scheduler.load(“<%= data_path %>”, “json”);

var dp = new dataProcessor(“<%= db_action_path %>”);


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

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!!