Web Programming TutorialsLearn How To Create A Ruby On Rails Calendar

Learn How To Create A Ruby On Rails Calendar

In this article, we are going to learn how to create a calendar with ruby on rails. Ruby on Rails already come with ready-made modules, plugins that help developers save time. Ruby On Rails is an open source framework under the MIT license that can be used to design a number of different applications. Calendar is a simple but effective app to learn RoR basics. It shows the fundamentals of the framework and also allows you to easily add your own functionality. Rails can work with multiple types of servers and database.

To start the application, you need to install rails installer on your system. You can download rails installer from http://railsinstaller.org/en and follow the instructions to install it on your system.

After completing the installation of railsinstaller, this will create sites folder on your C drive. Open the command prompt as an administrator and go to sites folder. Create an application using below command

rails new calendar

This command will create some plugins, models, views, etc. in your application as shown below:
rails new calendar
Go to the calendar folder and run the command below to start the server

Rails s

cd calendar
You will see the server will start running on localhost:3000 as shown below.
running on localhost
Open “C:\Sites\calendar\lib” location and create “calendar.rb” file. Add the code below in the calendar.rb file. Save and Close.

class Calendar < Struct.new(:view, :date, :callback)
    HEADER = %w[Sunday Monday Tuesday Wednesday Thursday Friday Saturday]
    START_DAY = :sunday

    delegate :content_tag, to: :view

    def table
      content_tag :table, class: "calendar table table-bordered table-striped" do
        header + week_rows

    def header
      content_tag :tr do
        HEADER.map { |day| content_tag :th, day }.join.html_safe

    def week_rows
      weeks.map do |week|
        content_tag :tr do
          week.map { |day| day_cell(day) }.join.html_safe

    def day_cell(day)
      content_tag :td, view.capture(day, &callback), class: day_classes(day)

    def day_classes(day)
      classes = []
      classes << "today" if day == Date.today
      classes << "not-month" if day.month != date.month
      classes.empty? ? nil : classes.join(" ")

    def weeks
      first = date.beginning_of_month.beginning_of_week(START_DAY)
      last = date.end_of_month.end_of_week(START_DAY)

Now, we need to change our project from config to file auto load.rb in the lib folder. Rails doesn’t do this by default.

To modify the application config file, open “C:\Sites\calendar\config location and you will see the application.rb” file. Open the application.rb file and add the code below.

require File.expand_path('../boot', __FILE__)

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env)

module CalendarExample
  class Application < Rails::Application
    config.autoload_paths += %W(#{config.root}/lib)
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.

    # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
    # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
    # config.time_zone = 'Central Time (US & Canada)'

    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
    # config.i18n.default_locale = :de

Now, let’s include bootstrap to our application. In this application, we are loading bootstrap from Yandex’s CDN. You can also apply your own stylesheet for this application. Open the application.html.erb file from the “C:\Sites\calendar\app\views\layouts” location and modify the code.

<!DOCTYPE html>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= stylesheet_link_tag "http://yandex.st/bootstrap/3.0.2/css/bootstrap.min.css", media: "all" %>
  <%= javascript_include_tag "http://yandex.st/bootstrap/3.0.2/js/bootstrap.min.js" %>
  <%= csrf_meta_tags %>
<div class="container">
<%= yield %>


Let’s create a controller by using below rails command

rails g controller Calendar show

create a controller
This command will generate a controller in your application. Open the “calendar_controller.rb” file in “C:\Sites\calendar\app\controllers” location and add the code below.

class CalendarController < ApplicationController
  def show
      @date = params[:date] ? Date.parse(params[:date]) : Date.today


Now modify your routes file, which is located in your config folder. Open routers.rb file and add the code given below.

CalendarExample::Application.routes.draw do
  resource :calendar, only: [:show], controller: :calendar
  root to: "calendar#show"

Now to create a helper method for rendering the calendar, open “calendar_helper.rb” file from C:\Sites\calendar\app\helpers folder and add the code below.

module CalendarHelper
 def calendar(date = Date.today, &block)
    Calendar.new(self, date, block).table


Lets open the show view file – “show.html.erb” from “C:\Sites\calendar\app\views\calendar” location for adding a calendar controller and add the code given below:

<div class="row">
  <div class="col-md-12 text-center">
    <div class="well controls">
      <%= link_to calendar_path(date: @date - 1.month), class: "btn btn-default" do %>
        <i class="glyphicon glyphicon-backward"></i>
      <% end %>
      <%= "#{@date.strftime("%B")} #{@date.year}" %>
      <%= link_to calendar_path(date: @date + 1.month), class: "btn btn-default" do %>
        <i class="glyphicon glyphicon-forward"></i>
      <% end %>
<div class="row">
  <div class="col-md-12">
    <%= calendar @date do |date| %>
      <%= date.day %>
    <% end %>

Now, go to Command prompt once again and run the server with rails command and refresh your browser. You will see the calendar below.

Rails s

Calendar example
In this blog, we will learn how to design a complete calendar from scratch on Ruby on Rails. While this is an extremely basic application, you can easily add more features to improve it’s functionality.


Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article


More article

- Advertisement -