一:前提
[url]http://nubyonrails.com[/url] 提供的calendar_helper 并不支持ajax,而在我们平常应用,经常需要这样的功能:仅仅加载局部的日历。
二:动手
其实很简单,就是通过Ajax.Updater来更新日历即可。
第一步:修改calendar_helper 第100行起的代码,为:
[code]
cal = %(<table class="#{options[:table_class]}" border="0" cellspacing="0" cellpadding="0">)
cal << %(<thead><tr>)
cal << %(<th colspan="2"><a href='javascript:previous_month(#{options[:year]},#{options[:month]})'>#{options[:previous_month_text]}<a></th>)
colspan=3
cal << %(<th colspan="#{colspan}" class="#{options[:month_name_class]}">#{Date::MONTHNAMES[options[:month]]}</th>)
cal << %(<th colspan="2"><a href='javascript:next_month(#{options[:year]},#{options[:month]})'>#{options[:next_month_text]}</a></th>)
[/code]
修改default_options 中这两个label
[code]
:previous_month_text =>'Previous',
:next_month_text => 'Next'
[/code]
第二步:
新增route
[code]
map.calendar '/calendar/:year/:month', :controller=>'calendar'
[/code]
第三步:
具体实现,仅仅为演示,你可以自己实现你的代码
在页面上增加日历
[code]
new Ajax.Updater('calendar', '/calendar/2008/03')
[/code]
新增Action
[code]
def calendar
now =Time.now
@year = params[:year]||now.year
@month = params[:month]||now.month
…..
@dates = @someresults.collect(&:some_date_field)
render :partial=>'calendar'
End
[/code]
新增页面_partial.html.erb
[code]
<%=
calendar(:year => @year, :month => @month) do |d|
if @dates.include?(d)
[d.mday, {:class => "specialDay", :οnclick=>"go('/programs/#{d.to_s(:db)}')", :target=>'_blank'}]
else
[d.mday, {:class => "normalDay"}]
end
end
%>
[/code]
效果
[img]http://mmm.iteye.com/upload/picture/pic/9040/9c1b45b1-5d3e-36e7-8ec6-9bbb77f5a6b5.png[/img]
点击上一月,下一月,查看firebug的console,会看到发送不同的请求,日历部分的页面片段会同时改变。
Done。
[url]http://nubyonrails.com[/url] 提供的calendar_helper 并不支持ajax,而在我们平常应用,经常需要这样的功能:仅仅加载局部的日历。
二:动手
其实很简单,就是通过Ajax.Updater来更新日历即可。
第一步:修改calendar_helper 第100行起的代码,为:
[code]
cal = %(<table class="#{options[:table_class]}" border="0" cellspacing="0" cellpadding="0">)
cal << %(<thead><tr>)
cal << %(<th colspan="2"><a href='javascript:previous_month(#{options[:year]},#{options[:month]})'>#{options[:previous_month_text]}<a></th>)
colspan=3
cal << %(<th colspan="#{colspan}" class="#{options[:month_name_class]}">#{Date::MONTHNAMES[options[:month]]}</th>)
cal << %(<th colspan="2"><a href='javascript:next_month(#{options[:year]},#{options[:month]})'>#{options[:next_month_text]}</a></th>)
[/code]
修改default_options 中这两个label
[code]
:previous_month_text =>'Previous',
:next_month_text => 'Next'
[/code]
第二步:
新增route
[code]
map.calendar '/calendar/:year/:month', :controller=>'calendar'
[/code]
第三步:
具体实现,仅仅为演示,你可以自己实现你的代码
在页面上增加日历
[code]
new Ajax.Updater('calendar', '/calendar/2008/03')
[/code]
新增Action
[code]
def calendar
now =Time.now
@year = params[:year]||now.year
@month = params[:month]||now.month
…..
@dates = @someresults.collect(&:some_date_field)
render :partial=>'calendar'
End
[/code]
新增页面_partial.html.erb
[code]
<%=
calendar(:year => @year, :month => @month) do |d|
if @dates.include?(d)
[d.mday, {:class => "specialDay", :οnclick=>"go('/programs/#{d.to_s(:db)}')", :target=>'_blank'}]
else
[d.mday, {:class => "normalDay"}]
end
end
%>
[/code]
效果
[img]http://mmm.iteye.com/upload/picture/pic/9040/9c1b45b1-5d3e-36e7-8ec6-9bbb77f5a6b5.png[/img]
点击上一月,下一月,查看firebug的console,会看到发送不同的请求,日历部分的页面片段会同时改变。
Done。