now available

now available
Want fresh tech tips in your inbox?

Build Your Own Calendar in Rails without any Plugins in less than 10 lines of Ruby Code


There are a number of terrific calendar plugins for Rails. But it's almost as easy, if not easier, to implement your own calendar.

The steps are pretty simple. First get the @beginning_of_month and @end_of_month and iterate over the days in between. In the loop we check if the day matches the @beginning_of_month and if it does we get the offset ( 0 - 6 ) because if the month doesn't start on a Sunday all our days won't match up correctly. We print out the offset number as table cells <td class='offset'></td>. We then need to consider that weeks 'restart' and restart our row if we're at the beginning of the week... this is accomplished with </tr><tr>. Then we just output the date contained in table cells <td>#{d.day}</td>. The code is below and it's pretty simple.

In this example I use haml, but you could just as easily use ERB (at the bottom). If you're not familiar with haml, check it out at http://haml-lang.com/ Haml automatically handles wrapping your html so you don't have to! The end result is that it cuts your html in half and makes it look pretty, which in turns makes it a lot more manageable long term.


    - @beginning_of_month = Date.civil(2009,12,1)
    - @end_of_month       = Date.civil(2009, 12, -1)

- (@beginning_of_month..@end_of_month).each do |d|
  - if d == @beginning_of_month
    - (d.wday).times do # offset beginning of calendar
     &lt; td class='offset'&gt; &lt;/td&gt;
  -if d.wday == 0 #restart the week

  == &lt;td class='#{d}'&gt; #{d.day} &lt;/td&gt;</code></pre>

Here it is in ERB

<table id='calendar'>
  <% @beginning_of_month = Date.civil(2009, 12, 1) %>
  <% @end_of_month = Date.civil(2009, 12, -1) %>

<% (@beginning_of_month..@end_of_month).each do |d| %> <% if d == @beginning_of_month %> <% d.wday.times do %> <td class='offset'></td> <% end %> <% end %>

&lt;% if d.wday == 0 %&gt; &lt;/tr&gt;&lt;tr&gt; &lt;% end %&gt;
&lt;td&gt; &lt;%= d.day %&gt; &lt;/td&gt;

<% end %> </tr> </table>

Tagged w/ #calendar #erb #haml #pluginsruby on rails

Apps I've Built

XPath Expression Editor
Practice and improve your XPath skills with XPath Editor
Click to buy on the App Store
Photo Location Changer
Easily change the location on your photos and videos
Click here for more info about the app
Photo Date Changer
Easily change the dates and times on your photos and videos
Click here for more info about the app
English dictionary with notifications so you won't forget what you're studying!
Click here for more info about the app
The app that quizzes and scores you on your vocabulary!
Click here for more info about the app