Connect calendar buttons to actions

4 files changed, 39 insertions, 31 deletions

diff --git a/apps/calendar/css/style.css b/apps/calendar/css/style.css
index 1f95e9f2ddf..78d26bb99a3 100644
--- a/apps/calendar/css/style.css
+++ b/apps/calendar/css/style.css
@@ -17,17 +17,12 @@
 #editentry_dialog {display: none;}
 #parsingfail_dialog{display: none;}
 
-#calendar_holder {height: 100%; width: 100%;}
-#onedayview, #oneweekview, #fourweeksview, #onemonthview, #listview {display: none; position: absolute;bottom: 0; right: 0; left: 160px; top: 80px;}
-#onedayview table {margin: 0; padding: 0; width: 100%; height: 100%; border-spacing:1px; background: #EEEEEE;}
-#oneweekview table {margin: 0; padding: 0; width: 100%; height: 100%; border-spacing:1px; background: #EEEEEE;}
-#fourweeksview table {margin: 0; padding: 0; width: 100%; height: 100%; border-spacing:1px; background: #EEEEEE;overflow: hidden;}
-#onemonthview table {margin: 0;	padding: 0; width: 100%; height: 100%; border-spacing:1px; background: #EEEEEE;}
+#calendar_holder {position: relative;bottom: 0; right: 0; left: 0; top: 3em;}
+.fc-content{padding:2px 4px;}
 #listview {margin: 0; padding: 10px; background: #EEEEEE;}
 #listview #more_before, #listview #more_after {border: 1px solid #1a1a1a; width:25em;padding: 3px;text-align: center;}
 #listview #events {width:25em;padding: 4px;}
 #listview #events .day {width:auto;padding-left:10px;border-bottom: 2px solid #EEEEEE;text-align:left;}
-#fourweeksview .calw{vertical-align: middle;text-align: center;width: 50px;}
 
 #sysbox{display: none;}
 
@@ -60,5 +55,3 @@ button.category{margin:0 3px;}
 
 .calendar-colorpicker-color{display:inline-block;width:20px;height:20px;margin-right:2px;cursor:pointer;border:2px solid transparent;}
 .calendar-colorpicker-color.active{border:2px solid black;}
-
-.fc-content{padding:2px 4px;}
diff --git a/apps/calendar/index.php b/apps/calendar/index.php
index 9584e62e449..5f37d67a707 100644
--- a/apps/calendar/index.php
+++ b/apps/calendar/index.php
@@ -19,7 +19,8 @@ $eventSources = array();
 foreach($calendars as $calendar){
 	$eventSources[] = array(
 		'url' => 'ajax/events.php?calendar_id='.$calendar['id'],
-		'color' => '#'.$calendar['calendarcolor'],
+		'backgroundColor' => '#'.$calendar['calendarcolor'],
+		'borderColor' => '#888',
 		'textColor' => 'black',
 	);
 }
diff --git a/apps/calendar/js/calendar.js b/apps/calendar/js/calendar.js
index 033eec8714c..876465a0e53 100644
--- a/apps/calendar/js/calendar.js
+++ b/apps/calendar/js/calendar.js
@@ -658,6 +658,29 @@ $(document).ready(function(){
 	$('#listview #more_before').click(Calendar.UI.List.renderMoreBefore);
 	$('#listview #more_after').click(Calendar.UI.List.renderMoreAfter);
 	Calendar.UI.initscroll();
+	$('#calendar_holder').fullCalendar({
+		header: false,
+		firstDay: 1,
+		editable: true,
+		eventSources: eventSources,
+		viewDisplay: function(view) {
+			$('#datecontrol_date').html(view.title);
+		}
+	});
+	$('#oneweekview_radio').click(function(){
+		$('#calendar_holder').fullCalendar('changeView', 'agendaWeek');
+	});
+	$('#onemonthview_radio').click(function(){
+		$('#calendar_holder').fullCalendar('changeView', 'month');
+	});
+	//$('#listview_radio').click();
+	$('#today_input').click(function(){
+		$('#calendar_holder').fullCalendar('today');
+	});
+	$('#datecontrol_left').click(function(){
+		$('#calendar_holder').fullCalendar('prev');
+	});
+	$('#datecontrol_right').click(function(){
+		$('#calendar_holder').fullCalendar('next');
+	});
 });
-//event vars
-Calendar.UI.loadEvents();
diff --git a/apps/calendar/templates/calendar.php b/apps/calendar/templates/calendar.php
index 3aa6ef66dc7..d09a5d45a1a 100644
--- a/apps/calendar/templates/calendar.php
+++ b/apps/calendar/templates/calendar.php
@@ -1,40 +1,31 @@
+<script type='text/javascript'>
+var eventSources = <?php echo json_encode($_['eventSources']) ?>;
+</script>
 				<div id="sysbox"></div>
 				<div id="controls">
 					<div>
 						<form>
 							<div id="view">
-								<!-- <input type="button" value="1 <?php echo $l->t('Day');?>" id="onedayview_radio" onclick="Calendar.UI.setCurrentView('onedayview');"/> -->
-								<input type="button" value="<?php echo $l->t('Week');?>" id="oneweekview_radio" onclick="Calendar.UI.setCurrentView('oneweekview');"/>
-								<!-- <input type="button" value="4 <?php echo $l->t('Weeks');?>" id="fourweeksview_radio" onclick="Calendar.UI.setCurrentView('fourweeksview');"/> -->
-								<input type="button" value="<?php echo $l->t('Month');?>" id="onemonthview_radio" onclick="Calendar.UI.setCurrentView('onemonthview');"/>
-								<input type="button" value="<?php echo $l->t('List');?>" id="listview_radio" onclick="Calendar.UI.setCurrentView('listview');"/>
+								<input type="button" value="<?php echo $l->t('Week');?>" id="oneweekview_radio"/>
+								<input type="button" value="<?php echo $l->t('Month');?>" id="onemonthview_radio"/>
+								<input type="button" value="<?php echo $l->t('List');?>" id="listview_radio"/>
 							</div>
 						</form>
 						<form>
 							<div id="choosecalendar">
-								<input type="button" id="today_input" value="<?php echo $l->t("Today");?>" onclick="Calendar.UI.switch2Today();"/>
+								<input type="button" id="today_input" value="<?php echo $l->t("Today");?>"/>
 								<input type="button" id="choosecalendar_input" value="<?php echo $l->t("Calendars");?>" onclick="Calendar.UI.Calendar.overview();" />
 							</div>
 						</form>
 						<form>
 							<div id="datecontrol">
-								<input type="button" value="&nbsp;&lt;&nbsp;" id="datecontrol_left" onclick="Calendar.UI.updateDate('backward');"/>
-								<input id="datecontrol_date" type="button" value=""/>
-								<input type="button" value="&nbsp;&gt;&nbsp;" id="datecontrol_right" onclick="Calendar.UI.updateDate('forward');"/>
+								<input type="button" value="&nbsp;&lt;&nbsp;" id="datecontrol_left"/>
+								<span id="datecontrol_date"></span>
+								<input type="button" value="&nbsp;&gt;&nbsp;" id="datecontrol_right"/>
 							</div>
 						</form>
 					</div>
 				</div>
-<script type='text/javascript'>
-	$(document).ready(function() {
-		$('#calendar_holder').fullCalendar({
-			editable: true,
-			eventSources: <?php echo json_encode($_['eventSources']) ?>
-		});
-
-	});
-
-</script>
 				<div id="calendar_holder">
 				</div>
 				<!-- Dialogs -->