Download:

Download(15.6 MB, 9:50)
Alternativer Downloadfür iPod & Apple TV(14.9 MB, 9:50)

Resourcen:

• calendar_date_select
• jQuery UI Datepicker
• event_calendar
• table_builder
• Episode 205: Unobtrusive Javascript
• Full episode source code

Quellcode:

script/plugin install git://github.com/p8/table_builder.git

# articles_controller.rb
def index
  @articles = Article.find(:all)
  @date = params[:month] ? Date.parse(params[:month]) : Date.today
endv

<!-- layouts/application.html.erb -->
<%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css", "application" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js", "application" %>

<!-- articles/index.html.erb -->
<div id="calendar">
  <h2 id="month">
    <%= link_to "<", :month => (@date.beginning_of_month-1).strftime("%Y-%m") %>
    <%=h @date.strftime("%B %Y") %>
    <%= link_to ">", :month => (@date.end_of_month+1).strftime("%Y-%m") %>
  </h2>
  <% calendar_for @articles, :year => @date.year, :month => @date.month do |calendar| %>
    <%= calendar.head('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday') %>
    <% calendar.day(:day_method => :published_on) do |date, articles| %>
      <%= date.day %>
      <ul>
        <% for article in articles %>
          <li><%= link_to h(article.name), article %></li>
        <% end %>
      </ul>
    <% end %>
  <% end %>
</div>

<!-- articles/_form.html.erb -->
<%= f.text_field :published_on %>

// application.js
$(function() {
  $("#article_published_on").datepicker();
});

#calendar table {
  border-collapse: collapse;
  width: 100%;
}

#calendar td,
#calendar th {
  font-family: "Lucida Grande",arial,helvetica,sans-serif;
  font-size: 10px;
  padding: 6px;
  border: 1px solid #999;
}

#calendar th {
  background: #DDD;
  color: #666;
  text-align: center;
  width: 14.2857142857143%;
}

#calendar td {
  background: #FFF;
  color: #777;
  height: 80px;
  vertical-align: top;
  font-size: 16px;
}

#calendar .notmonth {
  color: #CCC;
}

#calendar #month {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

#calendar #month a, #calendar #month a:hover {
  text-decoration: none;
  padding: 0 10px;
  color: #999;
}

#calendar .today {
  background-color: #D7F2FF;
}

#calendar ul {
  margin: 0;
  margin-top: 5px;
  padding: 0;
  list-style: none;
}

#calendar li {
  margin: 0;
  padding: 0;
  font-size: 11px;
  text-align: center;
}