Calendar styles: More fun with rcss and image controllers


By Josh Adams.

Here’s the latest bit of design work I did: a calendar. I wanted to make it reminiscent of a post-it note, and I don’t really know why. The colors are all themeable anyway (I just use a palette hash, so I can swap it out with another and keep a library of them on hand). Less talk, more photo:

isotope11 pete_and_dave

This is just the dynamic calendar helper for rails that you can find around. I use my rcss controller and the image controller (to generate gradients) on this thing. The rcss to style the calendar:

 palette = {
  :color1 => '#a6b6c6',
  :color2 => '#d4ddee',
  :text_color => '#333',
  :color3 => '#feffc4',
  :color4 => '#e6e7a8',
  :color5 => '#cecf96'
# Just getting rid of the '#' for the gradient helper, he wants numbers.
 calendar_gradient = [palette[:color3].gsub(/#/,''),palette[:color4].gsub(/#/,'')]
 background: <%=gradient(:colors => calendar_gradient,
                      :height => '200')-%>;
 margin:2.5em 1em 1em 1em;
 text-align: center;
 border:<%=2.px.to_em-%> solid <%=palette[:color4]-%>;
table.calendar td{
 padding: .25em .6em;
table.calendar tr.dayName th{
 text-align: center;
table.calendar tr.monthName th{
 font-size: 2em;
 text-align: center;
 background: <%=gradient(:colors => calendar_gradient.reverse,
                      :height => '20')-%>;
table.calendar td.otherMonth{
 border:<%=1.px.to_em-%> solid <%=palette[:color1]-%>;
table.calendar td.weekendDay{
 background-color: <%=palette[:color3]-%>;

See? Simple…


2 Responses to “Calendar styles: More fun with rcss and image controllers”

  1. 1 Bill

    Do you know if there is a way to do this with an external style sheet?

    Could you create a link to stylesheet.rb?


  2. 2 onlyjustwords

    I think like it. What would you use it for? 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: