· 2 min read
Screencast: Kalender-Funktion
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:
[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] <%= 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” %>
<%= 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") %>
<% 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 %>- <% for article in articles %>
- <%= link\_to h(article.name), article %> <% end %>
[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]