diff --git a/vendor/built_in_modules/calendar/app/assets/javascripts/calendarAPI.js.erb b/vendor/built_in_modules/calendar/app/assets/javascripts/calendarAPI.js.erb
index 09ef0195..31ef39ba 100644
--- a/vendor/built_in_modules/calendar/app/assets/javascripts/calendarAPI.js.erb
+++ b/vendor/built_in_modules/calendar/app/assets/javascripts/calendarAPI.js.erb
@@ -44,12 +44,17 @@ var calendarAPI = function(){
 	this.cur_week = c.today.getWeek();
 	this.cur_date = c.today.getDate();
 	this.view = null;
+	this.calendars = new Array();
 	this.monthlist = ["","January","February","March","April","May","June","July","August","September","October","November","December"];
 	this.initialize = function(){
 		$(window).load(function(){
 			// 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.loadAgendaView();
+			$(".calendar-filter-btn").each(function(){
+				c.calendars.push($(this).attr("href"));
+			})
 			bindHandlers();
 		})
 		var bindHandlers = function(){
@@ -94,6 +99,16 @@ var calendarAPI = function(){
 				$("#create_event_btn").toggleClass("active");
 				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){
 				c.event_quick_view_div.empty().hide();
 				c.updateEvent(form);
@@ -225,6 +240,10 @@ var calendarAPI = function(){
 		}
 	}
 	this.loadMonthView = function(month,year){
+		$("#range_selection").hide();
+		$("#navigation").show();
+		$("#sec1").removeClass("span8").addClass("span3");
+		$("#sec2").show();
 		c.view = "month";
 		if(!month){
 			var dt = new Date();
@@ -265,7 +284,7 @@ var calendarAPI = function(){
 	
 	
 	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);
 		})
 		var doneEventArray = new Array();		
@@ -367,6 +386,10 @@ var calendarAPI = function(){
 	}
 
 	this.loadWeekView = function(week,year){
+		$("#range_selection").hide();
+		$("#navigation").show();
+		$("#sec1").removeClass("span8").addClass("span3");
+		$("#sec2").show();
 		c.view = "week";
 		if(!week){
 			var dt = new Date();
@@ -383,7 +406,7 @@ var calendarAPI = function(){
 		})
 	}
 	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 full_day_count = 0;
 			var rowcount = 7;
@@ -487,6 +510,10 @@ var calendarAPI = function(){
 		})
 	}
 	this.loadDayView = function(day,month,year){
+		$("#range_selection").hide();
+		$("#navigation").show();
+		$("#sec1").removeClass("span8").addClass("span3");
+		$("#sec2").show();
 		c.view = "day";
 		if(!day){
 			var dt = new Date();
@@ -506,7 +533,7 @@ var calendarAPI = function(){
 		})
 	}
 	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){
 				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>')
@@ -558,10 +585,35 @@ var calendarAPI = function(){
 
 		})
 	}
-	this.loadAgendaView = function(){
-		$('#view_holder').load("cals/agenda_view", function() { 
-			$('.current_day_title').text('September 2, 2012');
+	this.loadAgendaView = function(start_month,start_year,end_month,end_year){
+		c.view = "agenda";
+		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){
 		var bindHandlers = function(){
diff --git a/vendor/built_in_modules/calendar/app/controllers/panel/calendar/back_end/cals_controller.rb b/vendor/built_in_modules/calendar/app/controllers/panel/calendar/back_end/cals_controller.rb
index 33cb286d..3369db71 100644
--- a/vendor/built_in_modules/calendar/app/controllers/panel/calendar/back_end/cals_controller.rb
+++ b/vendor/built_in_modules/calendar/app/controllers/panel/calendar/back_end/cals_controller.rb
@@ -3,7 +3,7 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
 	include Panel::Calendar::BackEnd::CalsHelper
 
 	def index
-		
+		@calendars = Cal.all
 	end
 
 	def new
@@ -79,17 +79,133 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
 		end
 		cur_month_days = getMonthDays(year)
 		@post_disabled_days = @pre_disabled_days + cur_month_days[month]
-		@dateset = getDateSet(month,year)
+		@dateset = getDateSet(month,year,true)
 		render :layout => false
 	end
 
 	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
 	end
 
 	def get_month_events
 		month = params[:month].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 = Array.new
@@ -121,7 +237,7 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
 		# 	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)}
 		# 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|
 			# @temp = Array.new
 			startdt = Date.new(event.start_year,event.start_month)
diff --git a/vendor/built_in_modules/calendar/app/helpers/panel/calendar/back_end/cals_helper.rb b/vendor/built_in_modules/calendar/app/helpers/panel/calendar/back_end/cals_helper.rb
index 6377debb..17760629 100644
--- a/vendor/built_in_modules/calendar/app/helpers/panel/calendar/back_end/cals_helper.rb
+++ b/vendor/built_in_modules/calendar/app/helpers/panel/calendar/back_end/cals_helper.rb
@@ -6,7 +6,7 @@ module Panel::Calendar::BackEnd::CalsHelper
 		return startday
 	end
 
-	def getDateSet(month,year)
+	def getDateSet(month,year,prepost)
 		dateset = Array.new
 		startday = monthStartDay(month,year)
 		monthsdays = getMonthDays(year)
@@ -20,7 +20,11 @@ module Panel::Calendar::BackEnd::CalsHelper
 		i = prev_month_days_to_add
 		while i > 0 do
 			i -= 1
-			dateset << prev_month_days - i
+			if prepost
+				dateset << prev_month_days - i
+			else
+				dateset << "NaN"
+			end
 		end
 
 		i = 0
@@ -29,11 +33,21 @@ module Panel::Calendar::BackEnd::CalsHelper
 			i += 1
 		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 
 		while i < next_month_days_to_add do
-			dateset << i + 1
+			if prepost
+				dateset << i + 1
+			else
+				dateset << "NaN"
+			end	
 			i += 1
 		end
 
diff --git a/vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/agenda_view.html.erb b/vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/agenda_view.html.erb
index 8d217587..d6761d88 100644
--- a/vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/agenda_view.html.erb
+++ b/vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/agenda_view.html.erb
@@ -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">
+	<% @datesets.each_with_index do |dateset,i| %>
 	<div class="row-fluid">
 		<div class="span3">
-			<h4>September</h4>
+			<h4><%= Date::MONTHNAMES[@calendartitle[i][0]] + " - " + @calendartitle[i][1].to_s %></h4>
 			<div class="tiny_calendar">
 				<table class="table">
 					<tr>
@@ -13,51 +55,19 @@
 						<th class="week_title">Fri</th>
 						<th class="week_title">Sat</th>
 					</tr>
-					<tr>
-						<td></td>
-						<td></td>
-						<td></td>
-						<td></td>
-						<td></td>
-						<td>1</td>
-						<td>2</td>
-					</tr>
-					<tr>
-						<td>3</td>
-						<td>4</td>
-						<td>5</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>
+					<% x = 0 %>
+					<% dateset.each do |date| %>
+						<% x = x + 1 %>
+						<% if x == 1 %>
+							<tr>
+						<% end %>
+						<td <%= (@calevents[i].index(date.to_i) != nil ? "class=has_event" : "") %> ><%= (date=="NaN"? "" : date ) %></td>
+						<% if x == 7 %>
+							<% x = 0 %>
+							</tr>
+						<% end %>
+					<% end %>
+						<!-- <td class="has_event">13</td> -->				
 				</table>
 			</div>
 		</div>
@@ -71,155 +81,30 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr>
-						<th class="today">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>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>
+					<% lastday = "" %>
+					<% if @events[i].count > 0 %>
+						<% @events[i].each do |event| %>
+							<tr>
+								<th>
+									<% if event['display_date'] != lastday %>
+										<%= event['display_date'] %>
+									<% end %>
+								</th>
+								<td class="event_time"><%= event['display_time'] %></td>
+								<td>
+									<div class="event" link="<%= event['show_link'] %>" style="color: <%= event['color'] %>;"><%= event['title'] %></div>
+								</td>
+							</tr>
+							<% lastday = event['display_date'] %>
+						<% end %>
+					<% else %>
+						<tr>
+							<td colspan='3'>No events for this month.</td>
+						</tr>
+					<% end %>
 				</tbody>
 			</table>
 		</div>
 	</div>
+	<% end %>
 </div>
\ No newline at end of file
diff --git a/vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/index.html.erb b/vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/index.html.erb
index c5d4b861..9300eaad 100644
--- a/vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/index.html.erb
+++ b/vendor/built_in_modules/calendar/app/views/panel/calendar/back_end/cals/index.html.erb
@@ -13,9 +13,9 @@
   <div class="filters">
     <div class="accordion-body collapse" id="collapse-categories">
       <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>
-            <a href="" class="btn" onclick="return false;"><span class="calendar_color_tag" style="background-color: #ff6600;"></span>Calendar2</a>
-            <a href="" class="btn" onclick="return false;"><span class="calendar_color_tag" style="background-color: #ff4400;"></span>Calendar3</a>
+      	<% @calendars.each do |calendar| %>
+            <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>
+     	<% end %>
       </div>
       <div class="filter-clear">
         <a href="" class="btn" onclick="return false;" for="cats"><i class="icons-brush-large"></i>Clear</a>
@@ -25,8 +25,8 @@
 </div>
 <div id="orbit_calendar" class="month_view">
 	<div class="row-fluid">
-		<div class="span3">
-			<div class="btn-toolbar" style="margin:0;">
+		<div class="span3" id='sec1'>
+			<div class="btn-toolbar" id="navigation" style="margin:0;">
 				<div class="btn-group">
 					<button class="btn" id="today_btn">Today</button>
 				</div>
@@ -35,11 +35,13 @@
 					<button class="btn" id="next_month_btn"><span class="icon-chevron-right"></span></button>
 				</div>
 			</div>
+			<div class="form-inline" id="range_selection" style="display:none;margin:0;">
+			</div>
 		</div>
-		<div class="span5">
+		<div class="span5" id='sec2'>
 			<h4 class="current_day_title"></h4>
 		</div>
-		<div class="span4">
+		<div class="span4" id='sec3'>
 			<div class="btn-group pull-right">
 				<button id="refresh_btn" class="btn icon-refresh"></button>
 			</div>