Last modified: Mon Aug 28 2017 23:04:57 GMT+0800 (Malay Peninsula Standard Time)

Chapter 3. Simple Calendar Gem

This part of the tutorial is based on the previous earlier chapter. In Chapter 2, we used bookable Gem to created a simple Car Reservation system. However, If you looked into the files that generated by the bookable Gem, it generated a lot of Javascript that. The purpose of the Javascript files are serving as the calendar template. Since I am not a fans of Javascript and the script will slow down the performance of my Website, I am going to replace the calendar with a well known calendar Gem, simple_calendar.

3.1 Replaced JS Calendar with simple_calendar Gem

To begin, head to the simple_calendar repository and follow the instruction to install the Gem. Based on the instruction given on the repository, in order to use to use the Gem, we have to add the following code in our Gemfile.

Table 3.1.1: Code to add to Gemfile

#MyApp/gemfile

gem "simple_calendar", "~> 2.0"

Since I already have a model for Booking with start_time and end_time field, I am not going to follow the instruction to generate another model. Instead, I am going to modify the current code I have to work with the Gem. The information is also stated in the repository's Readme file. Please be sure to read every repository’s Readme file to obtain more information about the Gem.

Based on the example given in the repository, I tailored the code to my need. I replaced the calendar code in HTML (that run on Javascript) with a Gem. Table 3.1.2 shows the modification required to the existing feature.

Please replace the parameter cars: to your respective name. If you have a vehicle Model, you should replace cars: to vehicles:. You have to remove the HTML code. The purpose of the HTML code is to render calendar. Please replace the code for both files. Figure 3.1.1 is just showing the modification on a single file.

Table 3.1.2: Code to add and remove from existing Booking View

#MyApp/app/views/bookings/new.html.erb  
#MyApp/app/views/bookings/edit.html.erb

#Code to remove
<div class="calendar_container">  
  <div id="calendar">  
  </div>  
</div>

#Code to add
<%= month_calendar cars: @bookings do |date, bookings| %>  
  <%= date %>  

  <% bookings.each do |booking| %>  
    <div>  
      <%= booking.start_time %>  
    </div>  
  <% end %>  

<% end %>


Figure 3.1.1: Result of the modification of View

Now, when you create a new booking for your car, you may get a similar screen as shown in Figure 3.1.2.


Figure 3.1.2: Result of Calendar at current stage

You may notice that the calendar look a little bit out of shape and is nowhere close to what we had before. If you read the repository Readme, you may notice that I have not import the stylesheet to my code yet. In order to import the stylesheet into our application, we have follow his instruction to add the code below to import the stylesheet. Follow the instruction in Table 3.1.3 to add the code to stylesheet. Please refer to the Figure 3.1.3 to get an idea where to add the code.

Table 3.1.3: Code to add to stylesheet

#MyApp/app/stylesheets/application.scss

*= require simple_calendar


Figure 3.1.3: Code is added to Line 13

Now, when we refresh the page, we will see that we have a nicely formatted calendar layout. Figure 3.1.4 shows a calendar that is formatted correctly.


Figure 3.1.4: A finish calendar

Your calendar layout should be fixed after the above code is added to your stylesheet. If you do not get the similar layout, start over the process.

3.2 Removed unnecessary files and Gem

This section is based on Chapter 3.1 and Chapter 2. Since we replaced the Javascript calendar with a Gem and the code generator generated necessary files and store all the files we need, we can go ahead and remove the Gem and fix the error caused by jbuilder version earlier.

Do remember that this may not be the case for all Gems. Most of the Gems do not generate any files and store it in your system.

Let’s begin by removing unnecessary files.

#File to delete
MyApp/app/stylesheets/calendar-editable.js   
MyApp/app/stylesheets/fullcalendar.js  
MyApp/app/stylesheets/custom.js

Now, remove the Gem from our Gemfile and revert the version for jbuilder to 2.5 as downgrading caused a lot of errors.

Table 3.2.1: Code to modify to Gemfile

#MyApp/Gemfile

#Code to remove
gem 'bookable', '~> 0.0.52'

#Code to modify
gem 'jbuilder', '~> 2.5'

Run bundle command and start your Rails server. You will no longer receive any error about MIME:JSON error. Figure 3.2.1 shows the error is resolved.


Figure 3.2.1: Errors are resolved

If you have done everything correct, you should be able to add, modify, and edit the booking for cars without any issues. A few screenshots are attached below to show add, modify and edit operations are done successfully.

Figure 3.2.2 shows a booking is added to the list.


Figure 3.2.2: A booking is created successfully

Figure 3.2.3 shows a booking was updated without any issue.


Figure 3.2.3: A booking is updated successfully

Figure 3.2.4 shows a booking that is deleted from the list.


Figure 3.2.4: A booking is deleted successfully.

If you are not able to perform these step, check your code.

results matching ""

    No results matching ""