Screencast: Kalender-Funktion

Es gibt verschiedene Möglichkeiten um einem Benutzer ein Datum auswählen zu lassen oder einen Kalender zu präsentieren. In dieser Woche zeigt Ryan einige Beispiele und Lösungen dafür.

 

Download:

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

 

Resourcen:

 

Quellcode:

[bash]
script/plugin install git://github.com/p8/table_builder.git
[/bash]

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

[html]
<!– 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 %>
[/html]

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

[css]
#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;
}
[/css]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.