Agenda View

This commit is contained in:
Harry Bomrah 2012-10-29 19:52:34 +08:00
parent b73981b19a
commit 5da35ee65b
5 changed files with 283 additions and 215 deletions

View File

@ -44,12 +44,17 @@ var calendarAPI = function(){
this.cur_week = c.today.getWeek(); this.cur_week = c.today.getWeek();
this.cur_date = c.today.getDate(); this.cur_date = c.today.getDate();
this.view = null; this.view = null;
this.calendars = new Array();
this.monthlist = ["","January","February","March","April","May","June","July","August","September","October","November","December"]; this.monthlist = ["","January","February","March","April","May","June","July","August","September","October","November","December"];
this.initialize = function(){ this.initialize = function(){
$(window).load(function(){ $(window).load(function(){
// c.loadMonthView(c.cur_month,c.cur_year); // c.loadMonthView(c.cur_month,c.cur_year);
c.loadWeekView(c.cur_week,c.cur_year); // c.loadWeekView(c.cur_week,c.cur_year);
// c.loadDayView(c.cur_date,c.cur_month,c.cur_year); // c.loadDayView(c.cur_date,c.cur_month,c.cur_year);
c.loadAgendaView();
$(".calendar-filter-btn").each(function(){
c.calendars.push($(this).attr("href"));
})
bindHandlers(); bindHandlers();
}) })
var bindHandlers = function(){ var bindHandlers = function(){
@ -94,6 +99,16 @@ var calendarAPI = function(){
$("#create_event_btn").toggleClass("active"); $("#create_event_btn").toggleClass("active");
e.stopPropagation(); e.stopPropagation();
}) })
$(".calendar-filter-btn").click(function(){
$(this).toggleClass("active");
c.calendars = [];
$(".calendar-filter-btn").each(function(){
if($(this).hasClass("active"))
c.calendars.push($(this).attr("href"));
})
c.refresh();
})
$("#edit_event_btn").live("ajax:success",function(evt,form){ $("#edit_event_btn").live("ajax:success",function(evt,form){
c.event_quick_view_div.empty().hide(); c.event_quick_view_div.empty().hide();
c.updateEvent(form); c.updateEvent(form);
@ -225,6 +240,10 @@ var calendarAPI = function(){
} }
} }
this.loadMonthView = function(month,year){ this.loadMonthView = function(month,year){
$("#range_selection").hide();
$("#navigation").show();
$("#sec1").removeClass("span8").addClass("span3");
$("#sec2").show();
c.view = "month"; c.view = "month";
if(!month){ if(!month){
var dt = new Date(); var dt = new Date();
@ -265,7 +284,7 @@ var calendarAPI = function(){
this.getEventsForMonth = function(month,year){ this.getEventsForMonth = function(month,year){
$.getJSON("cals/getMonthEvents",{"month":month,"year":year},function(events){ $.getJSON("cals/getMonthEvents",{"month":month,"year":year,"calendars":c.calendars},function(events){
makerow(events); makerow(events);
}) })
var doneEventArray = new Array(); var doneEventArray = new Array();
@ -367,6 +386,10 @@ var calendarAPI = function(){
} }
this.loadWeekView = function(week,year){ this.loadWeekView = function(week,year){
$("#range_selection").hide();
$("#navigation").show();
$("#sec1").removeClass("span8").addClass("span3");
$("#sec2").show();
c.view = "week"; c.view = "week";
if(!week){ if(!week){
var dt = new Date(); var dt = new Date();
@ -383,7 +406,7 @@ var calendarAPI = function(){
}) })
} }
this.getEventsForWeek = function(week,year){ this.getEventsForWeek = function(week,year){
$.getJSON("cals/getWeekEvents",{"week":week,"year":year},function(events){ $.getJSON("cals/getWeekEvents",{"week":week,"year":year,"calendars":c.calendars},function(events){
var height = 15; var height = 15;
var full_day_count = 0; var full_day_count = 0;
var rowcount = 7; var rowcount = 7;
@ -487,6 +510,10 @@ var calendarAPI = function(){
}) })
} }
this.loadDayView = function(day,month,year){ this.loadDayView = function(day,month,year){
$("#range_selection").hide();
$("#navigation").show();
$("#sec1").removeClass("span8").addClass("span3");
$("#sec2").show();
c.view = "day"; c.view = "day";
if(!day){ if(!day){
var dt = new Date(); var dt = new Date();
@ -506,7 +533,7 @@ var calendarAPI = function(){
}) })
} }
this.getEventsForDay = function(day,month,year){ this.getEventsForDay = function(day,month,year){
$.getJSON("cals/getDayEvents",{"date":day,"month":month,"year":year},function(events){ $.getJSON("cals/getDayEvents",{"date":day,"month":month,"year":year,"calendars":c.calendars},function(events){
$.each(events,function(i,evnt){ $.each(events,function(i,evnt){
if(evnt.all_day){ if(evnt.all_day){
$(".all_day_event").append('<div class="event destroy" link="'+evnt.show_link+'" style="background-color: '+evnt.color+';color:#fff;">'+evnt.title+'</div>') $(".all_day_event").append('<div class="event destroy" link="'+evnt.show_link+'" style="background-color: '+evnt.color+';color:#fff;">'+evnt.title+'</div>')
@ -558,10 +585,35 @@ var calendarAPI = function(){
}) })
} }
this.loadAgendaView = function(){ this.loadAgendaView = function(start_month,start_year,end_month,end_year){
$('#view_holder').load("cals/agenda_view", function() { c.view = "agenda";
$('.current_day_title').text('September 2, 2012'); var url = "cals/agenda_view";
if(start_month && start_year && end_month && end_year)
var url = "cals/agenda_view?s_month="+start_month+"&s_year="+start_year+"&e_month="+end_month+"&e_year="+end_year ;
$('#view_holder').load(url, function() {
$("#navigation").hide();
$("#range_selection").html($("#agenda_date_range").html()).show();
$("#sec1").removeClass("span3").addClass("span8");
$("#sec2").hide();
bindHandlers();
}) })
var bindHandlers = function(){
$("select[name=start_year]").change(function(){
var x = parseInt($(this).val()) - parseInt($(this).find("option").eq(0).val());
$("select[name=end_year] option").removeAttr("disabled");
for(i=0;i<x;i++){
$("select[name=end_year] option").eq(i).attr("disabled","disabled");
}
})
$("#range_selection .bt-filter").click(function(){
var start_month = $("select[name=start_month]").val();
var start_year = $("select[name=start_year]").val();
var end_year = $("select[name=end_year]").val();
var end_month = $("select[name=end_month]").val();
c.loadAgendaView(start_month,start_year,end_month,end_year);
})
}
} }
this.newEvent = function(url,ref,date,month,year,time,ses){ this.newEvent = function(url,ref,date,month,year,time,ses){
var bindHandlers = function(){ var bindHandlers = function(){

View File

@ -3,7 +3,7 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
include Panel::Calendar::BackEnd::CalsHelper include Panel::Calendar::BackEnd::CalsHelper
def index def index
@calendars = Cal.all
end end
def new def new
@ -79,17 +79,133 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
end end
cur_month_days = getMonthDays(year) cur_month_days = getMonthDays(year)
@post_disabled_days = @pre_disabled_days + cur_month_days[month] @post_disabled_days = @pre_disabled_days + cur_month_days[month]
@dateset = getDateSet(month,year) @dateset = getDateSet(month,year,true)
render :layout => false render :layout => false
end end
def agenda_view def agenda_view
@start_year = params[:s_year].to_i
@start_month = params[:s_month].to_i
@end_year = params[:e_year].to_i
@end_month = params[:e_month].to_i
t = Time.now
if !params[:s_year]
@start_year = t.year
end
if !params[:s_month]
@start_month = t.month
@end_month = t.month + 3
if @end_month > 12
@end_month = @end_month - 12
@end_year = @start_year + 1
end
end
startdt = Date.new(@start_year,@start_month,1)
temp = getMonthDays(@end_year)
enddt = Date.new(@end_year,@end_month,temp[@end_month])
diff = enddt - startdt
diff = diff.to_i / 30
@d_s_year = @start_year - 5
@datesets = Array.new
@calendartitle = Array.new
@events = Array.new
events = Event.all.asc(:start_date).desc(:total_days)
@calevents = Array.new
y = @start_year
m = @start_month
for i in 0..diff-1
if m == 13
m = 1
y = y + 1
end
@calendartitle << [m,y]
@datesets << getDateSet(m,y,false)
e = Array.new
h = Array.new
events.each_with_index do |event,i|
# @temp = Array.new
startdt = Date.new(event.start_year,event.start_month)
enddt = Date.new(event.end_year,event.end_month)
range = startdt..enddt
dt = Date.new(y,m)
if range === dt
no_of_days = event.total_days
start_date = event.start_date
if event.start_year < y
no_of_days = temp[m] - event.start_date
no_of_days += 1
temp = m + 12
if event.start_month < temp
start_date = 1
end
end
if event.end_year > y
no_of_days = temp[m] - event.start_date
no_of_days += 1
temp = m + 12
end
if event.end_month > m
no_of_days = temp[m] - event.start_date
no_of_days += 1
elsif event.end_month == m
no_of_days = event.end_date
end
if event.start_month == m && event.end_month == m
no_of_days = event.total_days
no_of_days += 1
end
if event.start_month < m
start_date = 1
end
if event.start_date == event.end_date
display_date = getDayName(event.start_date,event.start_month,event.start_year) + ", " + Date::ABBR_MONTHNAMES[event.start_month] + " " + event.start_date.to_s
else
display_date = getDayName(event.start_date,event.start_month,event.start_year) + ", " + Date::ABBR_MONTHNAMES[event.start_month].to_s + " " + event.start_date.to_s + " - " + getDayName(event.end_date,event.end_month,event.end_year) + ", " + Date::ABBR_MONTHNAMES[event.end_month] + " " + event.end_date.to_s
end
if event.all_day
display_time = "All Day"
else
x = event.start_time.to_i
if event.start_time > x
est = x.to_s + ":30"
else
est = x.to_s
end
x = event.end_time.to_i
if event.end_time > x
eet = x.to_s + ":30"
else
eet = x.to_s
end
display_time = est + " " + event.start_am_pm + " - " + eet + " " + event.end_am_pm
end
for c in start_date..(start_date + no_of_days)
if h.index(c) == nil
h << c
end
end
color = Cal.find(event.cal_id).color
e << {"display_date"=>display_date,"show_link"=>panel_calendar_back_end_event_path(event), "display_time"=>display_time, "start_date"=>start_date,"end_date"=>event.end_date,"start_month"=>event.start_month,"end_month"=>event.end_month,"title" => event.title,"color"=>color}
end
end
@events << e
@calevents << h
m = m + 1
end
render :layout => false render :layout => false
end end
def get_month_events def get_month_events
month = params[:month].to_i month = params[:month].to_i
year = params[:year].to_i year = params[:year].to_i
fromcalendars = params[:calendars]
# events = Event.where(:start_month.lt => month).and(:start_year => year).and(:end_month.gte => month).asc(:start_date).desc(:total_days) # events = Event.where(:start_month.lt => month).and(:start_year => year).and(:end_month.gte => month).asc(:start_date).desc(:total_days)
@events = Array.new @events = Array.new
@ -121,7 +237,7 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
# color = Cal.find(event.cal_id).color # color = Cal.find(event.cal_id).color
# @events << {"id"=>event.id,"index"=>i,"start_date"=>event.start_date, "total_days" => no_of_days, "title" => event.title,"color"=>color,"show_link"=>panel_calendar_back_end_event_path(event)} # @events << {"id"=>event.id,"index"=>i,"start_date"=>event.start_date, "total_days" => no_of_days, "title" => event.title,"color"=>color,"show_link"=>panel_calendar_back_end_event_path(event)}
# end # end
events = Event.all.asc(:start_date).desc(:total_days) events = Event.all.where(:cal_id.in=>fromcalendars).asc(:start_date).desc(:total_days)
events.each_with_index do |event,i| events.each_with_index do |event,i|
# @temp = Array.new # @temp = Array.new
startdt = Date.new(event.start_year,event.start_month) startdt = Date.new(event.start_year,event.start_month)

View File

@ -6,7 +6,7 @@ module Panel::Calendar::BackEnd::CalsHelper
return startday return startday
end end
def getDateSet(month,year) def getDateSet(month,year,prepost)
dateset = Array.new dateset = Array.new
startday = monthStartDay(month,year) startday = monthStartDay(month,year)
monthsdays = getMonthDays(year) monthsdays = getMonthDays(year)
@ -20,7 +20,11 @@ module Panel::Calendar::BackEnd::CalsHelper
i = prev_month_days_to_add i = prev_month_days_to_add
while i > 0 do while i > 0 do
i -= 1 i -= 1
dateset << prev_month_days - i if prepost
dateset << prev_month_days - i
else
dateset << "NaN"
end
end end
i = 0 i = 0
@ -29,11 +33,21 @@ module Panel::Calendar::BackEnd::CalsHelper
i += 1 i += 1
end end
next_month_days_to_add = 42 - (prev_month_days_to_add + cur_month_days) total_days = 42
if !prepost
if (prev_month_days_to_add + cur_month_days) < 35
total_days = 35
end
end
next_month_days_to_add = total_days - (prev_month_days_to_add + cur_month_days)
i = 0 i = 0
while i < next_month_days_to_add do while i < next_month_days_to_add do
dateset << i + 1 if prepost
dateset << i + 1
else
dateset << "NaN"
end
i += 1 i += 1
end end

View File

@ -1,7 +1,49 @@
<div id="agenda_date_range" style="display:none;">
<label>From :</label> <select name="start_month" class='input-small'>
<% for i in 1..12 %>
<% if i == @start_month %>
<option value="<%= i %>" selected="selected"><%= Date::MONTHNAMES[i] %></option>
<% else %>
<option value="<%= i %>"><%= Date::MONTHNAMES[i] %></option>
<% end %>
<% end %>
</select>
<select name="start_year" class='input-small'>
<% for i in 1..10 %>
<% if (@d_s_year + i) == @start_year %>
<option value="<%= @d_s_year + i %>" selected="selected"><%= @d_s_year + i %></option>
<% else %>
<option value="<%= @d_s_year + i %>"><%= @d_s_year + i %></option>
<% end %>
<% end %>
</select>
<label>To :</label> <select name="end_month" class='input-small'>
<% for i in 1..12 %>
<% if i == @end_month %>
<option value="<%= i %>" selected="selected"><%= Date::MONTHNAMES[i] %></option>
<% else %>
<option value="<%= i %>"><%= Date::MONTHNAMES[i] %></option>
<% end %>
<% end %>
</select>
<select name="end_year" class='input-small'>
<% for i in 1..10 %>
<% if (@d_s_year + i) == @end_year %>
<option value="<%= @d_s_year + i %>" selected="selected"><%= @d_s_year + i %></option>
<% elsif (@d_s_year + i) <= @start_year %>
<option value="<%= @d_s_year + i %>" disabled='disabled'><%= @d_s_year + i %></option>
<% else %>
<option value="<%= @d_s_year + i %>"><%= @d_s_year + i %></option>
<% end %>
<% end %>
</select>
<button class="btn bt-filter">Show Events</button>
</div>
<div id="calendar_agenda"> <div id="calendar_agenda">
<% @datesets.each_with_index do |dateset,i| %>
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<h4>September</h4> <h4><%= Date::MONTHNAMES[@calendartitle[i][0]] + " - " + @calendartitle[i][1].to_s %></h4>
<div class="tiny_calendar"> <div class="tiny_calendar">
<table class="table"> <table class="table">
<tr> <tr>
@ -13,51 +55,19 @@
<th class="week_title">Fri</th> <th class="week_title">Fri</th>
<th class="week_title">Sat</th> <th class="week_title">Sat</th>
</tr> </tr>
<tr> <% x = 0 %>
<td></td> <% dateset.each do |date| %>
<td></td> <% x = x + 1 %>
<td></td> <% if x == 1 %>
<td></td> <tr>
<td></td> <% end %>
<td>1</td> <td <%= (@calevents[i].index(date.to_i) != nil ? "class=has_event" : "") %> ><%= (date=="NaN"? "" : date ) %></td>
<td>2</td> <% if x == 7 %>
</tr> <% x = 0 %>
<tr> </tr>
<td>3</td> <% end %>
<td>4</td> <% end %>
<td>5</td> <!-- <td class="has_event">13</td> -->
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td class="has_event">13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table> </table>
</div> </div>
</div> </div>
@ -71,155 +81,30 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <% lastday = "" %>
<th class="today">Thu, Sep 6</th> <% if @events[i].count > 0 %>
<td class="event_time">9:00am - 9:30am</td> <% @events[i].each do |event| %>
<td> <tr>
<div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div> <th>
</td> <% if event['display_date'] != lastday %>
</tr> <%= event['display_date'] %>
<tr> <% end %>
<th></th> </th>
<td class="event_time">9:30am - 12:00am</td> <td class="event_time"><%= event['display_time'] %></td>
<td> <td>
<div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div> <div class="event" link="<%= event['show_link'] %>" style="color: <%= event['color'] %>;"><%= event['title'] %></div>
</td> </td>
</tr> </tr>
<tr> <% lastday = event['display_date'] %>
<th></th> <% end %>
<td class="event_time">13:30pm - 18:00pm</td> <% else %>
<td> <tr>
<div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div> <td colspan='3'>No events for this month.</td>
</td> </tr>
</tr> <% end %>
<tr>
<th>Fri, Sep 7</th>
<td class="event_time">9:00am - 18:00pm</td>
<td>
<div class="event" style="color: #ddee00;">Take a day off</div>
</td>
</tr>
<tr>
<th>Sat, Sep 8</th>
<td class="event_time">7:00am - 7:50pm</td>
<td>
<div class="event" style="color: #00ddee;">Work out with Joseph</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<h4>October</h4>
<div class="tiny_calendar">
tiny calendar goes here
</div>
</div>
<div class="span9">
<table class="table event_list">
<thead>
<tr height="0">
<th class="span2"></th>
<th class="span2"></th>
<th class=""></th>
</tr>
</thead>
<tbody>
<tr>
<th>Thu, Sep 6</th>
<td class="event_time">9:00am - 9:30am</td>
<td>
<div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div>
</td>
</tr>
<tr>
<th></th>
<td class="event_time">9:30am - 12:00am</td>
<td>
<div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div>
</td>
</tr>
<tr>
<th></th>
<td class="event_time">13:30pm - 18:00pm</td>
<td>
<div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div>
</td>
</tr>
<tr>
<th>Fri, Sep 7</th>
<td class="event_time">9:00am - 18:00pm</td>
<td>
<div class="event" style="color: #ddee00;">Take a day off</div>
</td>
</tr>
<tr>
<th>Sat, Sep 8</th>
<td class="event_time">7:00am - 7:50pm</td>
<td>
<div class="event" style="color: #00ddee;">Work out with Joseph</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<h4>November</h4>
<div class="tiny_calendar">
tiny calendar goes here
</div>
</div>
<div class="span9">
<table class="table event_list">
<thead>
<tr height="0">
<th class="span2"></th>
<th class="span2"></th>
<th class=""></th>
</tr>
</thead>
<tbody>
<tr>
<th>Thu, Sep 6</th>
<td class="event_time">9:00am - 9:30am</td>
<td>
<div class="event" style="color: #ffcc00;">Commuting time, from home to RD</div>
</td>
</tr>
<tr>
<th></th>
<td class="event_time">9:30am - 12:00am</td>
<td>
<div class="event" style="color: #ffcc00;">Work on Thu project, and ask ika for help if possible</div>
</td>
</tr>
<tr>
<th></th>
<td class="event_time">13:30pm - 18:00pm</td>
<td>
<div class="event" style="color: #ffcc00;">Template design, at least finish 2 template</div>
</td>
</tr>
<tr>
<th>Fri, Sep 7</th>
<td class="event_time">9:00am - 18:00pm</td>
<td>
<div class="event" style="color: #ddee00;">Take a day off</div>
</td>
</tr>
<tr>
<th>Sat, Sep 8</th>
<td class="event_time">7:00am - 7:50pm</td>
<td>
<div class="event" style="color: #00ddee;">Work out with Joseph</div>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<% end %>
</div> </div>

View File

@ -3,7 +3,6 @@
<%= stylesheet_link_tag "calendar" %> <%= stylesheet_link_tag "calendar" %>
<%= javascript_include_tag "cals" %> <%= javascript_include_tag "cals" %>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/cupertino/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/cupertino/jquery-ui.css">
>>>>>>> gallery_orbit
<div id="filter" class="subnav"> <div id="filter" class="subnav">
<ul class="nav nav-pills filter"> <ul class="nav nav-pills filter">
<li class="accordion-group"> <li class="accordion-group">
@ -15,9 +14,9 @@
<div class="filters"> <div class="filters">
<div class="accordion-body collapse" id="collapse-categories"> <div class="accordion-body collapse" id="collapse-categories">
<div class="accordion-inner filter_btns cats" data-toggle="buttons-checkbox"> <div class="accordion-inner filter_btns cats" data-toggle="buttons-checkbox">
<a href="" class="btn" onclick="return false;"><span class="calendar_color_tag" style="background-color: #ffcc00;"></span>Calendar1</a> <% @calendars.each do |calendar| %>
<a href="" class="btn" onclick="return false;"><span class="calendar_color_tag" style="background-color: #ff6600;"></span>Calendar2</a> <a href="<%= calendar.id.to_s %>" class="btn active calendar-filter-btn" onclick="return false;"><span class="calendar_color_tag" style="background-color: <%= calendar.color %>;" ></span><%= calendar.name %></a>
<a href="" class="btn" onclick="return false;"><span class="calendar_color_tag" style="background-color: #ff4400;"></span>Calendar3</a> <% end %>
</div> </div>
<div class="filter-clear"> <div class="filter-clear">
<a href="" class="btn" onclick="return false;" for="cats"><i class="icons-brush-large"></i>Clear</a> <a href="" class="btn" onclick="return false;" for="cats"><i class="icons-brush-large"></i>Clear</a>
@ -27,8 +26,8 @@
</div> </div>
<div id="orbit_calendar" class="month_view"> <div id="orbit_calendar" class="month_view">
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3" id='sec1'>
<div class="btn-toolbar" style="margin:0;"> <div class="btn-toolbar" id="navigation" style="margin:0;">
<div class="btn-group"> <div class="btn-group">
<button class="btn" id="today_btn">Today</button> <button class="btn" id="today_btn">Today</button>
</div> </div>
@ -37,11 +36,13 @@
<button class="btn" id="next_month_btn"><span class="icon-chevron-right"></span></button> <button class="btn" id="next_month_btn"><span class="icon-chevron-right"></span></button>
</div> </div>
</div> </div>
<div class="form-inline" id="range_selection" style="display:none;margin:0;">
</div>
</div> </div>
<div class="span5"> <div class="span5" id='sec2'>
<h4 class="current_day_title"></h4> <h4 class="current_day_title"></h4>
</div> </div>
<div class="span4"> <div class="span4" id='sec3'>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button id="refresh_btn" class="btn icon-refresh"></button> <button id="refresh_btn" class="btn icon-refresh"></button>
</div> </div>