Last modified: Thu Aug 16 2018 22:49:02 GMT+0800 (Malay Peninsula Standard Time)
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
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
#MyApp/gemfile gem "simple_calendar", "~> 2.0"
Since I already have a model for Booking with
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.
Please replace the parameter
cars: to your respective name. If you have a vehicle Model, you should replace
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
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
#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.
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
#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
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.