implemented callbacks for week and month, to use it for the navigation in the calendar

phpgwapi/inc/class.jscalendar.inc.php

@@ -27,16 +27,16 @@
 		@abstract constructor of the class
 		@param $do_header if true, necessary javascript and css gets loaded, only needed for input
 		*/
-		function jscalendar($do_header=True)
+		function jscalendar($do_header=True,$path='jscalendar')
 		{
-			$this->phpgwapi_js_url = $GLOBALS['phpgw_info']['server']['webserver_url'].'/phpgwapi/js';
+			$this->jscalendar_url = $GLOBALS['phpgw_info']['server']['webserver_url'].'/phpgwapi/js/'.$path;
 			$this->dateformat = $GLOBALS['phpgw_info']['user']['preferences']['common']['dateformat'];
 
 			if ($do_header && !strstr($GLOBALS['phpgw_info']['flags']['java_script'],'jscalendar'))
 			{
 				$GLOBALS['phpgw_info']['flags']['java_script'] .=
-'<link rel="stylesheet" type="text/css" media="all" href="'.$this->phpgwapi_js_url.'/jscalendar/calendar-win2k-cold-1.css" title="win2k-cold-1" />
+'<link rel="stylesheet" type="text/css" media="all" href="'.$this->jscalendar_url.'/calendar-win2k-cold-1.css" title="win2k-cold-1" />
-<script type="text/javascript" src="'.$this->phpgwapi_js_url.'/jscalendar/calendar.js"></script>
+<script type="text/javascript" src="'.$this->jscalendar_url.'/calendar.js"></script>
 <script type="text/javascript" src="'.ereg_replace('[?&]*click_history=[0-9a-f]*','',$GLOBALS['phpgw']->link('/phpgwapi/inc/jscalendar-setup.php')).'"></script>
 ';
 			}
@@ -79,7 +79,7 @@
 			return
 '<input type="text" id="'.$name.'" name="'.$name.'" size="10" value="'.$date.'"'.$options.'/>
 <script type="text/javascript">
-	document.writeln(\'<img id="'.$name.'-trigger" src="'.$this->phpgwapi_js_url.'/jscalendar/img.gif" title="'.lang('Select date').'" style="cursor:pointer; cursor:hand;"/>\');
+	document.writeln(\'<img id="'.$name.'-trigger" src="'.$this->jscalendar_url.'/img.gif" title="'.lang('Select date').'" style="cursor:pointer; cursor:hand;"/>\');
 	Calendar.setup(
 	{
 		inputField  : "'.$name.'",
@@ -90,6 +90,49 @@
 ';
 		}
 
+		function flat($url,$date=False,$weekUrl=False,$weekTTip=False,$monthUrl=False,$monthTTip=False,$id='calendar-container')
+		{
+			if ($date)	// string if format YYYYmmdd or timestamp
+			{
+				$date = is_int($date) ? date('m/d/Y',$date) :
+					substr($date,4,2).'/'.substr($date,6,2).'/'.substr($date,0,4);
+			}
+			return '
+<div id="'.$id.'"></div>
+
+<script type="text/javascript">
+  function dateChanged(calendar) {
+'.  // Beware that this function is called even if the end-user only
+    // changed the month/year.  In order to determine if a date was
+    // clicked you can use the dateClicked property of the calendar:
+    // redirect to $url extended with a &date=YYYYMMDD
+'    if (calendar.dateClicked) {
+     window.location = "'.$url.'&date=" + calendar.date.print("%Y%m%d");
+    }
+  };
+'.($weekUrl ? '
+  function weekClicked(calendar,weekstart) {
+     window.location = "'.$weekUrl.'&date=" + weekstart.print("%Y%m%d");
+  }
+' : '').($monthUrl ? '
+  function monthClicked(calendar,monthstart) {
+     window.location = "'.$monthUrl.'&date=" + monthstart.print("%Y%m%d");
+  }
+' : '').'
+  Calendar.setup(
+    {
+      flat         : "'.$id.'",
+      flatCallback : dateChanged,
+'.($weekUrl ? '      flatWeekCallback : weekClicked,
+' : '').($weekTTip ? '      flatWeekTTip : "'.addslashes($weekTTip).'",
+' : '').($monthUrl ? '      flatMonthCallback : monthClicked,
+' : '').($monthTTip ? '      flatMonthTTip : "'.addslashes($monthTTip).'",
+' : '').($date ? '      date : "'.$date.'",
+' : '').'    }
+  );
+</script>';
+		}
+
 		/*!
 		@function input2date
 		@syntax input2date( $datestr,$raw='raw',$day='day',$month='month',$year='year' )

phpgwapi/inc/jscalendar-setup.php

@@ -69,13 +69,19 @@ $jsLongDateFormat = '%a, '.($dayFirst ? '%e' : '%b').($dateformat[1] == '.' ? '.
  *   eventName     | event that will trigger the calendar, without the "on" prefix (default: "click")
  *   ifFormat      | date format that will be stored in the input field
  *   daFormat      | the date format that will be used to display the date in displayArea
+ *   titleFormat   | the format to show the month in the title, default '%B, %Y'
  *   singleClick   | (true/false) wether the calendar is in single click mode or not (default: true)
  *   firstDay      | numeric: 0 to 6.  "0" means display Sunday first, "1" means display Monday first, etc.
+ *   disableFirstDowChange| (true/false) disables manual change of first day of week
  *   align         | alignment (default: "Br"); if you don't know what's this see the calendar documentation
  *   range         | array with 2 elements.  Default: [1900, 2999] -- the range of years available
  *   weekNumbers   | (true/false) if it's true (default) the calendar will display week numbers
  *   flat          | null or element ID; if not null the calendar will be a flat calendar having the parent with the given ID
  *   flatCallback  | function that receives a JS Date object and returns an URL to point the browser to (for flat calendar)
+ *   flatWeekCallback| gets called if a weeknumber get clicked, params are the cal-object and a date-object representing the start of the week
+ *   flatWeekTTip  | Tooltip for the weeknumber (shown only if flatWeekCallback is set)
+ *   flatMonthCallback| gets called if a month (title) get clicked, params are the cal-object and a date-object representing the start of the month
+ *   flatMonthTTip | Tooltip for the month (shown only if flatMonthCallback is set)
  *   disableFunc   | function that receives a JS Date object and should return true if that date has to be disabled in the calendar
  *   onSelect      | function that gets called when a date is selected.  You don't _have_ to supply this (the default is generally okay)
  *   onClose       | function that gets called when the calendar is closed.  [default]
@@ -104,9 +110,11 @@ Calendar.setup = function (params) {
 	param_default("eventName",      "click");
 	param_default("ifFormat",      "<?php /* was "%Y/%m/%d" */ echo $jsDateFormat; ?>");
 	param_default("daFormat",      "<?php /* was "%Y/%m/%d" */ echo $jsDateFormat; ?>");
+	param_default("titleFormat",    "%B %Y");
 	param_default("singleClick",    true);
 	param_default("disableFunc",    null);
 	param_default("dateStatusFunc", params["disableFunc"]);	// takes precedence if both are defined
+	param_default("disableFirstDowChange", true);
 	param_default("firstDay",       <?php // was 0 defaults to "Sunday" first
 	$day2int = array('Sunday'=>0,'Monday'=>1,'Tuesday'=>2,'Wednesday'=>3,'Thursday'=>4,'Friday'=>5,'Saturday'=>6);
 	echo (int) @$day2int[$GLOBALS['phpgw_info']['user']['preferences']['calendar']['weekdaystarts']]; ?>); // <?php echo $GLOBALS['phpgw_info']['user']['preferences']['calendar']['weekdaystarts']."\n"; ?>
@@ -115,6 +123,10 @@ Calendar.setup = function (params) {
 	param_default("weekNumbers",    true);
 	param_default("flat",           null);
 	param_default("flatCallback",   null);
+	param_default("flatWeekCallback",null);
+	param_default("flatWeekTTip",   null);
+	param_default("flatmonthCallback",null);
+	param_default("flatmonthTTip",  null);
 	param_default("onSelect",       null);
 	param_default("onClose",        null);
 	param_default("onUpdate",       null);
@@ -175,6 +187,7 @@ Calendar.setup = function (params) {
 		cal.weekNumbers = params.weekNumbers;
 		cal.setRange(params.range[0], params.range[1]);
 		cal.setDateStatusHandler(params.dateStatusFunc);
+		cal.showsOtherMonths = params.showOthers;
 		cal.create(params.flat);
 		cal.show();
 		return false;

phpgwapi/js/jscalendar/calendar-setup.js

@@ -35,13 +35,19 @@
  *   eventName     | event that will trigger the calendar, without the "on" prefix (default: "click")
  *   ifFormat      | date format that will be stored in the input field
  *   daFormat      | the date format that will be used to display the date in displayArea
+ *   titleFormat   | the format to show the month in the title, default '%B, %Y'
  *   singleClick   | (true/false) wether the calendar is in single click mode or not (default: true)
  *   firstDay      | numeric: 0 to 6.  "0" means display Sunday first, "1" means display Monday first, etc.
+ *   disableFirstDowChange| (true/false) disables manual change of first day of week
  *   align         | alignment (default: "Br"); if you don't know what's this see the calendar documentation
  *   range         | array with 2 elements.  Default: [1900, 2999] -- the range of years available
  *   weekNumbers   | (true/false) if it's true (default) the calendar will display week numbers
  *   flat          | null or element ID; if not null the calendar will be a flat calendar having the parent with the given ID
  *   flatCallback  | function that receives a JS Date object and returns an URL to point the browser to (for flat calendar)
+ *   flatWeekCallback| gets called if a weeknumber get clicked, params are the cal-object and a date-object representing the start of the week
+ *   flatWeekTTip  | Tooltip for the weeknumber (shown only if flatWeekCallback is set)
+ *   flatMonthCallback| gets called if a month (title) get clicked, params are the cal-object and a date-object representing the start of the month
+ *   flatMonthTTip | Tooltip for the month (shown only if flatMonthCallback is set)
  *   disableFunc   | function that receives a JS Date object and should return true if that date has to be disabled in the calendar
  *   onSelect      | function that gets called when a date is selected.  You don't _have_ to supply this (the default is generally okay)
  *   onClose       | function that gets called when the calendar is closed.  [default]
@@ -68,15 +74,21 @@ Calendar.setup = function (params) {
 	param_default("eventName",      "click");
 	param_default("ifFormat",       "%Y/%m/%d");
 	param_default("daFormat",       "%Y/%m/%d");
+	param_default("titleFormat",    "%B, %Y");
 	param_default("singleClick",    true);
 	param_default("disableFunc",    null);
 	param_default("dateStatusFunc", params["disableFunc"]);	// takes precedence if both are defined
 	param_default("firstDay",       0); // defaults to "Sunday" first
+	param_default("disableFirstDowChange", false);
 	param_default("align",          "Br");
 	param_default("range",          [1900, 2999]);
 	param_default("weekNumbers",    true);
 	param_default("flat",           null);
 	param_default("flatCallback",   null);
+	param_default("flatWeekCallback",null);
+	param_default("flatWeekTTip",   null);
+	param_default("flatmonthCallback",null);
+	param_default("flatmonthTTip",  null);
 	param_default("onSelect",       null);
 	param_default("onClose",        null);
 	param_default("onUpdate",       null);
@@ -137,6 +149,7 @@ Calendar.setup = function (params) {
 		cal.weekNumbers = params.weekNumbers;
 		cal.setRange(params.range[0], params.range[1]);
 		cal.setDateStatusHandler(params.dateStatusFunc);
+		cal.showsOtherMonths = params.showOthers;
 		cal.create(params.flat);
 		cal.show();
 		return false;

phpgwapi/js/jscalendar/calendar.js

@@ -612,6 +612,12 @@ Calendar.cellClick = function(el, ev) {
 			date.setMonth(m);
 		};
 		switch (el.navtype) {
+			case 500:
+			cal.callWeekHandler(el.caldate);
+			return;
+			case 501:
+			cal.callMonthHandler();
+			return;
 		    case 400:
 			Calendar.removeClass(el, "hilite");
 			var text = Calendar._TT["ABOUT"];
@@ -765,7 +771,12 @@ Calendar.prototype.create = function (_par) {
 	(this.weekNumbers) && ++title_length;
 
 	hh("?", 1, 400).ttip = Calendar._TT["INFO"];
-	this.title = hh("", title_length, 300);
+	if (this.hasMonthHandler()) {
+		this.title = hh("", title_length, 501);
+		if (this.params.flatMonthTTip) this.title.ttip = this.params.flatMonthTTip;
+	} else {
+		this.title = hh("", title_length, 300);
+	}
 	this.title.className = "title";
 	if (this.isPopup) {
 		this.title.ttip = Calendar._TT["DRAG_TO_MOVE"];
@@ -817,8 +828,13 @@ Calendar.prototype.create = function (_par) {
 	for (i = 6; i > 0; --i) {
 		row = Calendar.createElement("tr", tbody);
 		if (this.weekNumbers) {
-			cell = Calendar.createElement("td", row);
+			if (this.hasWeekHandler()) {
-			cell.appendChild(document.createTextNode(""));
+				cell = hh("",1,500);
+				if (this.params.flatWeekTTip) cell.ttip = this.params.flatWeekTTip;
+			} else {
+				cell = Calendar.createElement("td", row);
+				cell.appendChild(document.createTextNode(""));
+			}
 		}
 		for (var j = 7; j > 0; --j) {
 			cell = Calendar.createElement("td", row);
@@ -1081,6 +1097,7 @@ Calendar.prototype._init = function (firstDayOfWeek, date) {
 		if (this.weekNumbers) {
 			cell.className = "day wn";
 			cell.firstChild.data = date.getWeekNumber();
+			if (this.hasWeekHandler) cell.caldate = new Date(date);
 			cell = cell.nextSibling;
 		}
 		row.className = "daysrow";
@@ -1140,7 +1157,8 @@ Calendar.prototype._init = function (firstDayOfWeek, date) {
 			row.className = "emptyrow";
 	}
 	this.ar_days = ar_days;
-	this.title.firstChild.data = Calendar._MN[month] + ", " + year;
+//	this.title.firstChild.data = Calendar._MN[month] + ", " + year;
+	this.title.firstChild.data = this.date.print(this.params.titleFormat);
 	this.onSetTime();
 	this.table.style.visibility = "visible";
 	// PROFILE
@@ -1196,6 +1214,30 @@ Calendar.prototype.callHandler = function () {
 	}
 };
 
+/** Calls the week-clicked user handler (selectedHandler). */
+Calendar.prototype.hasWeekHandler = function () {
+	return this.params.flat && this.params.flatWeekCallback;
+};
+
+Calendar.prototype.callWeekHandler = function (weekstart) {
+	if (this.hasWeekHandler()) {
+		this.params.flatWeekCallback(this, weekstart);
+	}
+};
+
+/** Calls the week-clicked user handler (selectedHandler). */
+Calendar.prototype.hasMonthHandler = function () {
+	return this.params.flat && this.params.flatMonthCallback;
+};
+
+Calendar.prototype.callMonthHandler = function () {
+	if (this.hasMonthHandler()) {
+		var monthstart = new Date(this.date);
+		monthstart.setDate(1);
+		this.params.flatMonthCallback(this, monthstart);
+	}
+};
+
 /** Calls the second user handler (closeHandler). */
 Calendar.prototype.callCloseHandler = function () {
 	if (this.onClose) {
@@ -1534,7 +1576,7 @@ Calendar.prototype._displayWeekdays = function () {
 	for (var i = 0; i < 7; ++i) {
 		cell.className = "day name";
 		var realday = (i + fdow) % 7;
-		if (i) {
+		if (i && !this.params.disableFirstDowChange) {
 			cell.ttip = Calendar._TT["DAY_FIRST"].replace("%s", Calendar._DN[realday]);
 			cell.navtype = 100;
 			cell.calendar = this;