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

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”>&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: 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

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

Introduction to some Interesting gems!

Hi Guys, Yesterday I was reading an open source project code(errbit). Reading an open source project code improve your coding capabilities. It enhances your technical knowledge and code vocabulary. You may found some new coding patterns as well.

Today I am going to share some interesting gems which I found in that project. I have also created a demo app using some of those gems.

Here I listed out some of those gems:

1. actionmailer_inline_css :

Gmail doesn’t support <style> or <link> tags for HTML emails. Other webmail clients also have problems with <link> tags.
This means that CSS must be inlined on each element, otherwise the email will not be displayed correctly in every client.

Inlining CSS is a pain to do by hand, and that’s where the premailer gem comes in.

This actionmailer_inline_css gem is a tiny integration between ActionMailer and premailer.

2. decent_exposure :

Rails controllers are the sweaty armpit of every rails app. This is due, in large part, to the fact that they expose their instance variables directly to their views. This means that your instance variables are your interface… and that you’ve broken encapsulation.

decent_exposure makes it easy to define named methods that are made available to your views and which memoize the resultant values. It also tucks away the details of the common fetching, initializing and updating of resources and their parameters.

I have created a demo app to understand the use of this gem. Please refer my demo for more brief introduction.

3. Htmlentities :

HTMLEntities is a simple library to facilitate encoding and decoding of named (&yacute; and so on) or numerical ({ or Ī) entities in HTML and XHTML documents.

4. Hipchat :

HipChat is a group and private chat, file sharing and integration application. Here is the HipChat HTTP API Wrapper in Ruby with Capistrano hooks. You can find API documentation for HipChat here.

5. Flowdock :

Flowdock is a team collaboration app for desktop, mobile and web. Here is the Ruby gem for Flowdock.  You can refer API for Flowdock here.

6. Quiet_assets :

Most of the time while debugging in console we get frustrated with unnecessary logging statements of assets. This gem helps to mute assets pipeline log messages. Quite useful!

Setting up a subdomain that points to an external public IP(Or Hosted somewhere else like Digital Ocean)

If you have already a working site, hosted on a specific domain and you want to add a sub domain that points to a site hosted on a different VPS, then you need to add your public IP to point to that site.

For example I have a domain registered on Bluehost and I want to create a sub-domain that points to my site hosted on Digitalocean. To do so follow this steps.

First of all you must have credentials to login to the cPanel of your site.

Login to your cPanel and search for advance DNS zone editor option

Click on this option and you will find list of available domain with their IPs and sub-domains if any.

 

• Create a record, Add your subdomain name here, then your TTL value. Then your site type  which you want to point.
• select A if your are pointing to an external public IP which must be static. and it must be IPv4 if it is IPV6 then select AAAA CNAME if you are pointing to a domain name or sub-domain.
• Now in Address field add the address or domain name.
• Then click Add Record button.

Done! Now wait for at least 24 to 72 hours. It will take this much time to get effect. This time is not sure.

If you want to edit or cancel a detail then you can select and update or cancel.