jamesu/Making a Real Calendar in Rails.rb

## Making a Real Calendar in Rails.rb
##
# Calendar helper with proper events
# http://www.cuppadev.co.uk/webdev/making-a-real-calendar-in-rails/
#
# (C) 2009 James S Urquhart (jamesu at gmail dot com)
# Derived from calendar_helper
# (C) Jeremy Voorhis, Geoffrey Grosenbach, Jarkko Laine, Tom Armitage, Bryan Larsen
# Licensed under MIT. http://www.opensource.org/licenses/mit-license.php
##

# Ever wanted a calendar_helper with proper listed events, like all-day events in ical or google calendar?
# Well here is how you do it!

# Firstly, lets start off with the modified calendar_helper helpers.

  def calendar(options = {}, &block)
    block ||= Proc.new {|d| nil}

    defaults = {
      :year                => Time.now.year,
      :month               => Time.now.month,
      :table_class         => 'calendar',
      :month_name_class    => 'monthName',
      :other_month_class   => 'otherMonth',
      :day_name_class      => 'dayName',
      :day_class           => 'day',
      :abbrev              => (0..2),
      :first_day_of_week   => 0,
      :accessible          => false,
      :show_today          => true,
      :previous_month_text => nil,
      :next_month_text     => nil,
      :start               => nil,
      :event_strips        => nil,  # [[nil]*days, ...]
      :event_width         => 81,   # total width per day (including margins)
      :event_height        => 24,   # height
      :event_margin        => 2     # height margin
    }
    options = defaults.merge options

    options[:month_name_text] ||= Date::MONTHNAMES[options[:month]]

    first = Date.civil(options[:year], options[:month], 1)
    last = Date.civil(options[:year], options[:month], -1)

    start = options[:start]
    event_strips = options[:event_strips]
    event_width = options[:event_width]
    event_height = options[:event_height]
    event_margin = options[:event_margin]

    first_weekday = first_day_of_week(options[:first_day_of_week])
    last_weekday = last_day_of_week(options[:first_day_of_week])

    day_names = Date::DAYNAMES.dup
    first_weekday.times do
      day_names.push(day_names.shift)
    end

    # TODO Use some kind of builder instead of straight HTML
    cal = %(<table class="#{options[:table_class]}" border="0" cellspacing="0" cellpadding="0">)
    cal << %(<thead><tr>)
    if options[:previous_month_text] or options[:next_month_text]
      cal << %(<th colspan="2">#{options[:previous_month_text]}</th>)
      colspan=3
    else
      colspan=7
    end
    cal << %(<th colspan="#{colspan}" class="#{options[:month_name_class]}">#{options[:month_name_text]}</th>)
    cal << %(<th colspan="2">#{options[:next_month_text]}</th>) if options[:next_month_text]
    cal << %(</tr><tr class="#{options[:day_name_class]}">)
    day_names.each do |d|
      unless d[options[:abbrev]].eql? d
        cal << "<th scope='col'><abbr title='#{d}'>#{d[options[:abbrev]]}</abbr></th>"
      else
        cal << "<th scope='col'>#{d[options[:abbrev]]}</th>"
      end
    end
    cal << "</tr></thead><tbody><tr>"
    beginning_of_week(first, first_weekday).upto(first - 1) do |d|
      cal << %(<td class="#{options[:other_month_class]})
      cal << " weekendDay" if weekend?(d)
      if options[:accessible]
        cal << %(">#{d.day}<span class="hidden"> #{Date::MONTHNAMES[d.month]}</span></td>)
      else
        cal << %(">#{d.day}</td>)
      end
    end unless first.wday == first_weekday

    start_row = beginning_of_week(first, first_weekday)
    last_row = start_row
    first.upto(last) do |cur|
      cell_text, cell_attrs = nil#block.call(cur)
      cell_text  ||= cur.mday
      cell_attrs ||= {:class => options[:day_class]}
      cell_attrs[:class] += " weekendDay" if [0, 6].include?(cur.wday)
      cell_attrs[:class] += " today" if (cur == Date.today) and options[:show_today]
      cell_attrs = cell_attrs.map {|k, v| %(#{k}="#{v}") }.join(" ")
      cal << "<td #{cell_attrs}>#{cell_text}</td>"

      if cur.wday == last_weekday
        content = calendar_row(event_strips,
                               event_width,
                               event_height,
                               start_row,
                               last_row..cur,
                               &block)
        cal << "</tr>#{event_row(content, event_height, event_margin)}<tr>"
        last_row = cur + 1
      end
    end
    (last + 1).upto(beginning_of_week(last + 7, first_weekday) - 1)  do |d|
      cal << %(<td class="#{options[:other_month_class]})
      cal << " weekendDay" if weekend?(d)
      if options[:accessible]
        cal << %(">#{d.day}<span class='hidden'> #{Date::MONTHNAMES[d.mon]}</span></td>)
      else
        cal << %(">#{d.day}</td>)
      end
    end unless last.wday == last_weekday

    content = calendar_row(event_strips,
                           event_width,
                           event_height,
                           start_row,
                           last_row..(beginning_of_week(last + 7, first_weekday) - 1),
                           &block)
    cal << "</tr>#{event_row(content, event_height, event_margin)}</tbody></table>"
  end

  def calendar_row(event_strips, event_width, event_height, start, date_range, &block)
    start_date = date_range.first
    range = ((date_range.first - start).to_i)...((date_range.last - start + 1).to_i)
    idx = -1

    last_offs = 0
    event_strips.collect do |strip|
      idx += 1
      range.collect do |r|
        event = strip[r]

        if !event.nil?
          # Clip event dates (if it extends before or beyond the row)
          dates = event.clip_range(start_date, date_range.last)
          if dates[0] - start_date == r-range.first
            # Event somewhere on this row
            cur_offs = (event_width*(r-range.first))
            start_d = event.start_date.to_date
            end_d = event.end_date.nil? ? start_d+1 : event.end_date.to_date+1
            block.call(event, dates[1]-dates[0], cur_offs, idx)
          else
            nil
          end
        else
          nil
        end
      end.compact
    end
  end

  def event_row(content, height, margin)
    "<tr><td colspan=\"7\"><div class=\"events\" style=\"height:#{(height+margin)*content.length}px\">#{content.join}</div><div class=\"clear\"></div></td></tr>"
  end

##
## What is the difference?
##

# Instead of yielding for each day column, we yield for displaying each event displayed in the
# supplied event_strip.
# Instead of getting clumped in a single column, events are placed in rows after each set of day cells,
# so they can be spread over multiple days.

##
## Events?
##

# Events are merely ActiveRecord objects with the following schema:

    create_table :events do |t|
      t.integer  "calendar_id"

      t.string :title
      t.datetime :start_date
      t.datetime :end_date, :default => nil
      t.text :description
    end

# They also have two crucial helper functions:

  def to_date
    (end_date || start_date).to_date + 1
  end

  def clip_range(start_d, end_d)
    # Clip start date
    if (start_date < start_d and to_date > start_d)
      clipped_start = start_d
    else
      clipped_start = start_date.to_date
    end

    # Clip end date
    if (to_date >= end_d)
      clipped_end = end_d + 1
    else
      clipped_end = to_date
    end

    [clipped_start, clipped_end]
  end

##
## Event strip?
##

# An event strip is a list of arrays containing events corresponding to what goes on in a particular day,
# encompassing the whole period displayed in the calendar.
# An example is as follows:

# [
# [ Event(0), nil     ,Event(1), Event(1), Event(2), nil,      nil, ... ]
# [ Event(3), Event(3),Event(3), Event(3), Event(3), Event(3), Event(3), ... ]
# ]

# So we can see, the event strip closely resembles what should be displayed on the calendar,
# with each array representing a separate "row" in which the events should be placed.

# Events 0 through 2 dont conflict with one another, so they can exist on the same row.
# Event 3 however exists for a whole 7 days and thus conflicts with events 0 through 2,
# so it gets placed on its own row.

##
## Ok, so how do we generate these event strips?
##

# The algorithm is simple:
#   1) Start off with the initial blank event strip encompassing all the dates represented
#      in the calendar ends.
#   2) For each event:
#     3) Find out the range of dates it encompasses in the strip
#     4) For each existing strip
#       5) If the range is free, set it and go to the next event
#       6) Else, go to the next strip
#     7) If the event didn't fit in the existing strips, make a new strip
#       8) Fit the event in the new strip and go to the next event

# Thus in the controller you will need something like the following,
# which grabs all the events for the calendar and inserts them into the event strips
# according to the algorithm.

    @month = params[:month].nil? ? Time.now.month : params[:month].to_i
    @year = params[:year].nil? ? Time.now.year : params[:year].to_i

    # Start of month, end of month
    @now_date = Date.civil(@year, @month)
    @prev_date = @now_date - 1.month
    @prev_date = Date.civil(@prev_date.year, @prev_date.month, -1)
    @next_date = @now_date + 1.month
    @next_date = Date.civil(@next_date.year, @next_date.month)

    @first_day_of_week = 1

    # offset by weekdays
    @strip_start = beginning_of_week(@now_date, @first_day_of_week)
    @next_date = beginning_of_week(@next_date + 7, @first_day_of_week)-1

    # initial event strip
    @event_strips = [[nil] * (@next_date - @strip_start + 1)]

    @events = Event.find(:all,
               :include => :calendar,
               :conditions => ['((start_date >= ? AND start_date < ?) OR
                                (end_date NOT NULL AND
                                  (end_date > ? AND start_date < ?)
                                ))',
                @strip_start, @next_date,
                @strip_start, @next_date+1], :order => 'start_date ASC').collect do |evt|
      cur_date = evt.start_date.to_date
      end_date = evt.to_date
      cur_date, end_date = evt.clip_range(@strip_start, @next_date)

      range = ((cur_date - @strip_start).to_i)...((end_date - @strip_start).to_i)

      # Find strip
      found_strip = nil
      for strip in @event_strips
        is_in = true

        # Are all the spaces free?
        range.each do |r|
          if !strip[r].nil?
            is_in = false
            break
          end
        end

        # Found it yet?
        if is_in
          found_strip = strip
          break
        end
      end

      # Make strip or add to found strip
      if !found_strip.nil?
        range.each {|r| found_strip[r] = evt}
      else
        found_strip = [nil] * (@next_date - @strip_start + 1)
        range.each {|r| found_strip[r] = evt}
        @event_strips << found_strip
      end

      evt
    end

# (Note that i had to borrow the beginning_of_week function from calendar_helper to get the same dates)

##
## I've got events, but how do i display them?
##

# Somewhere in your view, you should have:

  calendar events_calendar_opts do |event, days, cur_offs, idx|
    "<div class=\"event\" style=\"background: #{event.color}; width: #{(81*days)-1}px; top: #{idx*18}px; left:#{cur_offs}px; \"><div>#{h(event.title)}</div></div>"
  end

# As for styling, ensure the following:
#   - Your events need to be absolutely positioned within the events block
#   - Width of the day column (in my case, 81) should match the event width specified for the helper.
#   - For columns, don't use border. Instead make a repeating background image

# i.e. somethng like this...

"
content { width: 600px; }

table.calendar {
  background-image: url('../images/cal.png');
  background-repeat: repeat-y;
}

.day { width: 100px; }
.events { position:relative; border-bottom: 1px solid #d5d5d5; }

.event {
  overflow:hidden;
  font-size: 12px;
  text-align: left;
  position:absolute;
  height: 16px;
}

.event div { cursor: pointer; padding-left: 6px; color:#ffffff; text-decoration: none; }
"

##
## To conclude
##

# Any suggestions or improvements? Feel free to fork this gist.

# - JamesU
	##
	# Calendar helper with proper events
	# http://www.cuppadev.co.uk/webdev/making-a-real-calendar-in-rails/
	#
	# (C) 2009 James S Urquhart (jamesu at gmail dot com)
	# Derived from calendar_helper
	# (C) Jeremy Voorhis, Geoffrey Grosenbach, Jarkko Laine, Tom Armitage, Bryan Larsen
	# Licensed under MIT. http://www.opensource.org/licenses/mit-license.php
	##

	# Ever wanted a calendar_helper with proper listed events, like all-day events in ical or google calendar?
	# Well here is how you do it!

	# Firstly, lets start off with the modified calendar_helper helpers.

	def calendar(options = {}, &block)
	block \|\|= Proc.new {\|d\| nil}

	defaults = {
	:year => Time.now.year,
	:month => Time.now.month,
	:table_class => 'calendar',
	:month_name_class => 'monthName',
	:other_month_class => 'otherMonth',
	:day_name_class => 'dayName',
	:day_class => 'day',
	:abbrev => (0..2),
	:first_day_of_week => 0,
	:accessible => false,
	:show_today => true,
	:previous_month_text => nil,
	:next_month_text => nil,
	:start => nil,
	:event_strips => nil, # [[nil]*days, ...]
	:event_width => 81, # total width per day (including margins)
	:event_height => 24, # height
	:event_margin => 2 # height margin
	}
	options = defaults.merge options

	options[:month_name_text] \|\|= Date::MONTHNAMES[options[:month]]

	first = Date.civil(options[:year], options[:month], 1)
	last = Date.civil(options[:year], options[:month], -1)

	start = options[:start]
	event_strips = options[:event_strips]
	event_width = options[:event_width]
	event_height = options[:event_height]
	event_margin = options[:event_margin]

	first_weekday = first_day_of_week(options[:first_day_of_week])
	last_weekday = last_day_of_week(options[:first_day_of_week])

	day_names = Date::DAYNAMES.dup
	first_weekday.times do
	day_names.push(day_names.shift)
	end

	# TODO Use some kind of builder instead of straight HTML
	cal = %(<table class="#{options[:table_class]}" border="0" cellspacing="0" cellpadding="0">)
	cal << %(<thead><tr>)
	if options[:previous_month_text] or options[:next_month_text]
	cal << %(<th colspan="2">#{options[:previous_month_text]}</th>)
	colspan=3
	else
	colspan=7
	end
	cal << %(<th colspan="#{colspan}" class="#{options[:month_name_class]}">#{options[:month_name_text]}</th>)
	cal << %(<th colspan="2">#{options[:next_month_text]}</th>) if options[:next_month_text]
	cal << %(</tr><tr class="#{options[:day_name_class]}">)
	day_names.each do \|d\|
	unless d[options[:abbrev]].eql? d
	cal << "<th scope='col'><abbr title='#{d}'>#{d[options[:abbrev]]}</abbr></th>"
	else
	cal << "<th scope='col'>#{d[options[:abbrev]]}</th>"
	end
	end
	cal << "</tr></thead><tbody><tr>"
	beginning_of_week(first, first_weekday).upto(first - 1) do \|d\|
	cal << %(<td class="#{options[:other_month_class]})
	cal << " weekendDay" if weekend?(d)
	if options[:accessible]
	cal << %(">#{d.day}<span class="hidden"> #{Date::MONTHNAMES[d.month]}</span></td>)
	else
	cal << %(">#{d.day}</td>)
	end
	end unless first.wday == first_weekday

	start_row = beginning_of_week(first, first_weekday)
	last_row = start_row
	first.upto(last) do \|cur\|
	cell_text, cell_attrs = nil#block.call(cur)
	cell_text \|\|= cur.mday
	cell_attrs \|\|= {:class => options[:day_class]}
	cell_attrs[:class] += " weekendDay" if [0, 6].include?(cur.wday)
	cell_attrs[:class] += " today" if (cur == Date.today) and options[:show_today]
	cell_attrs = cell_attrs.map {\|k, v\| %(#{k}="#{v}") }.join(" ")
	cal << "<td #{cell_attrs}>#{cell_text}</td>"

	if cur.wday == last_weekday
	content = calendar_row(event_strips,
	event_width,
	event_height,
	start_row,
	last_row..cur,
	&block)
	cal << "</tr>#{event_row(content, event_height, event_margin)}<tr>"
	last_row = cur + 1
	end
	end
	(last + 1).upto(beginning_of_week(last + 7, first_weekday) - 1) do \|d\|
	cal << %(<td class="#{options[:other_month_class]})
	cal << " weekendDay" if weekend?(d)
	if options[:accessible]
	cal << %(">#{d.day}<span class='hidden'> #{Date::MONTHNAMES[d.mon]}</span></td>)
	else
	cal << %(">#{d.day}</td>)
	end
	end unless last.wday == last_weekday

	content = calendar_row(event_strips,
	event_width,
	event_height,
	start_row,
	last_row..(beginning_of_week(last + 7, first_weekday) - 1),
	&block)
	cal << "</tr>#{event_row(content, event_height, event_margin)}</tbody></table>"
	end

	def calendar_row(event_strips, event_width, event_height, start, date_range, &block)
	start_date = date_range.first
	range = ((date_range.first - start).to_i)...((date_range.last - start + 1).to_i)
	idx = -1

	last_offs = 0
	event_strips.collect do \|strip\|
	idx += 1
	range.collect do \|r\|
	event = strip[r]

	if !event.nil?
	# Clip event dates (if it extends before or beyond the row)
	dates = event.clip_range(start_date, date_range.last)
	if dates[0] - start_date == r-range.first
	# Event somewhere on this row
	cur_offs = (event_width*(r-range.first))
	start_d = event.start_date.to_date
	end_d = event.end_date.nil? ? start_d+1 : event.end_date.to_date+1
	block.call(event, dates[1]-dates[0], cur_offs, idx)
	else
	nil
	end
	else
	nil
	end
	end.compact
	end
	end

	def event_row(content, height, margin)
	"<tr><td colspan=\"7\"><div class=\"events\" style=\"height:#{(height+margin)*content.length}px\">#{content.join}</div><div class=\"clear\"></div></td></tr>"
	end

	##
	## What is the difference?
	##

	# Instead of yielding for each day column, we yield for displaying each event displayed in the
	# supplied event_strip.
	# Instead of getting clumped in a single column, events are placed in rows after each set of day cells,
	# so they can be spread over multiple days.

	##
	## Events?
	##

	# Events are merely ActiveRecord objects with the following schema:

	create_table :events do \|t\|
	t.integer "calendar_id"

	t.string :title
	t.datetime :start_date
	t.datetime :end_date, :default => nil
	t.text :description
	end

	# They also have two crucial helper functions:

	def to_date
	(end_date \|\| start_date).to_date + 1
	end

	def clip_range(start_d, end_d)
	# Clip start date
	if (start_date < start_d and to_date > start_d)
	clipped_start = start_d
	else
	clipped_start = start_date.to_date
	end

	# Clip end date
	if (to_date >= end_d)
	clipped_end = end_d + 1
	else
	clipped_end = to_date
	end

	[clipped_start, clipped_end]
	end

	##
	## Event strip?
	##

	# An event strip is a list of arrays containing events corresponding to what goes on in a particular day,
	# encompassing the whole period displayed in the calendar.
	# An example is as follows:

	# [
	# [ Event(0), nil ,Event(1), Event(1), Event(2), nil, nil, ... ]
	# [ Event(3), Event(3),Event(3), Event(3), Event(3), Event(3), Event(3), ... ]
	# ]

	# So we can see, the event strip closely resembles what should be displayed on the calendar,
	# with each array representing a separate "row" in which the events should be placed.

	# Events 0 through 2 dont conflict with one another, so they can exist on the same row.
	# Event 3 however exists for a whole 7 days and thus conflicts with events 0 through 2,
	# so it gets placed on its own row.

	##
	## Ok, so how do we generate these event strips?
	##

	# The algorithm is simple:
	# 1) Start off with the initial blank event strip encompassing all the dates represented
	# in the calendar ends.
	# 2) For each event:
	# 3) Find out the range of dates it encompasses in the strip
	# 4) For each existing strip
	# 5) If the range is free, set it and go to the next event
	# 6) Else, go to the next strip
	# 7) If the event didn't fit in the existing strips, make a new strip
	# 8) Fit the event in the new strip and go to the next event

	# Thus in the controller you will need something like the following,
	# which grabs all the events for the calendar and inserts them into the event strips
	# according to the algorithm.

	@month = params[:month].nil? ? Time.now.month : params[:month].to_i
	@year = params[:year].nil? ? Time.now.year : params[:year].to_i

	# Start of month, end of month
	@now_date = Date.civil(@year, @month)
	@prev_date = @now_date - 1.month
	@prev_date = Date.civil(@prev_date.year, @prev_date.month, -1)
	@next_date = @now_date + 1.month
	@next_date = Date.civil(@next_date.year, @next_date.month)

	@first_day_of_week = 1

	# offset by weekdays
	@strip_start = beginning_of_week(@now_date, @first_day_of_week)
	@next_date = beginning_of_week(@next_date + 7, @first_day_of_week)-1

	# initial event strip
	@event_strips = [[nil] * (@next_date - @strip_start + 1)]

	@events = Event.find(:all,
	:include => :calendar,
	:conditions => ['((start_date >= ? AND start_date < ?) OR
	(end_date NOT NULL AND
	(end_date > ? AND start_date < ?)
	))',
	@strip_start, @next_date,
	@strip_start, @next_date+1], :order => 'start_date ASC').collect do \|evt\|
	cur_date = evt.start_date.to_date
	end_date = evt.to_date
	cur_date, end_date = evt.clip_range(@strip_start, @next_date)

	range = ((cur_date - @strip_start).to_i)...((end_date - @strip_start).to_i)

	# Find strip
	found_strip = nil
	for strip in @event_strips
	is_in = true

	# Are all the spaces free?
	range.each do \|r\|
	if !strip[r].nil?
	is_in = false
	break
	end
	end

	# Found it yet?
	if is_in
	found_strip = strip
	break
	end
	end

	# Make strip or add to found strip
	if !found_strip.nil?
	range.each {\|r\| found_strip[r] = evt}
	else
	found_strip = [nil] * (@next_date - @strip_start + 1)
	range.each {\|r\| found_strip[r] = evt}
	@event_strips << found_strip
	end

	evt
	end

	# (Note that i had to borrow the beginning_of_week function from calendar_helper to get the same dates)

	##
	## I've got events, but how do i display them?
	##

	# Somewhere in your view, you should have:

	calendar events_calendar_opts do \|event, days, cur_offs, idx\|
	"<div class=\"event\" style=\"background: #{event.color}; width: #{(81days)-1}px; top: #{idx18}px; left:#{cur_offs}px; \"><div>#{h(event.title)}</div></div>"
	end

	# As for styling, ensure the following:
	# - Your events need to be absolutely positioned within the events block
	# - Width of the day column (in my case, 81) should match the event width specified for the helper.
	# - For columns, don't use border. Instead make a repeating background image

	# i.e. somethng like this...

	"
	content { width: 600px; }

	table.calendar {
	background-image: url('../images/cal.png');
	background-repeat: repeat-y;
	}

	.day { width: 100px; }
	.events { position:relative; border-bottom: 1px solid #d5d5d5; }

	.event {
	overflow:hidden;
	font-size: 12px;
	text-align: left;
	position:absolute;
	height: 16px;
	}

	.event div { cursor: pointer; padding-left: 6px; color:#ffffff; text-decoration: none; }
	"

	##
	## To conclude
	##

	# Any suggestions or improvements? Feel free to fork this gist.

	# - JamesU