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’
with
root ‘home#index’
Step – 4 Start Rails server now and test it in your browser with http://localhost:3000
$ rails s
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”> </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>
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.allrender 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.idwhen “deleted”
Event.find(id).destroy
tid = idwhen “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
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!!
