Skip to main content

← Back to the blog

SimpleCalendar 1.1 released!

This post was written by Chris Oliver on May 14, 2014.

Having spent a significant time over the years playing with various calendar gems, I felt they were all lacking in different ways. Some were overbearing providing you CSS stylesheets when all I wanted was a plain calendar. Others were a bit too involved, there was a lot of work on my end and all I wanted to do was render a simple table for the calendar.

Calendars also aren't necessarily a month anyways. Sometimes you want to see 6 weeks at a time. Sometimes 2 weeks. Sometimes you only want 4 days. But none of the gems seemed to care.

Seeing all this, I decided to make my own: github.com/excid3/simple_calendar

At the simplest version, simple_calendar renders a table for your calendar.

You can make a month calendar:

<%= month_calendar do |date| %>
<%= date %>
<% end %>

You can make a 2 week calendar:

<%= week_calendar number_of_weeks: 2 do |date| %>
<%= date %>
<% end %>

You can make a 4 day agenda calendar:

<%= calendar number_of_days: 4 do |date| %>
<%= date %>
<% end %>

The calendar just generates some basic HTML for you that you are free to work with, complete with navigation links and a header (if you want it).

<div>
  <a href="/events?start_date=2014-05-13">«</a>
  <a href="/events?start_date=2014-05-18">»</a>
</div>
<table class="table table-bordered">
  <tbody>
    <tr>
      <td class="day today current-month wday-3" current="2014-05-14" start="2014-05-14">
        2014-05-14
      </td>
      <td class="day future current-month wday-4" current="2014-05-15" start="2014-05-14">
        2014-05-15
      </td>
      <td class="day future current-month wday-5" current="2014-05-16" start="2014-05-14">
        2014-05-16
      </td>
      <td class="day future current-month wday-6" current="2014-05-17" start="2014-05-14">
        2014-05-17
      </td>
    </tr>
  </tbody>
</table>

These are fine and dandy, but what is a calendar without events? We've got that too.

Because we need to know what attribute on your model is the event's start time, we have a simple include in your model that lets you define it:

class Event < ActiveRecord::Base
extend SimpleCalendar
has_calendar attribute: :start_time
end

You define which attribute to use in your model and then simply pass them into your view to have them all sorted out by day.

<%= month_calendar events: Event.all do |date, events| %>
<%= date %>
<% events.each do |event %>
<div><%= event.name %></div>
<% end %>
<% end %>

This will yield the date and all the events sorted by start time for the given date to your code. Do with them however you please, it is up to you.

I'm pleased with the end result currently and look forward to improving it more in the future. If you have any suggestions or improvements to make, make a Github issue and let's make the easiest calendar for Rails we can!

Try it out at https://github.com/excid3/simple_calendar

P.S. You might enjoy following me on Twitter.