Why isn't my calendar showing up?

sw9 · February 25, 2010

I'm using a script that puts an interactive calendar onto a page via a style id. I can't for the life of me figure out why it's not showing up. You can see the page in action that's not working here:http://dev.retn.org/calendar.php

At the bottom of the script you can see a line which says

  
Calendar.setup(
    {
      flat         : "calendar-container", // ID of the parent element
      flatCallback : dateChanged
    }

which is referencing the style id to put it inside of.

The reason I'm scratching my head is this code is working on my live site without a problem here: http://www.retn.org/tv-schedules

It's the same code, so I don't understand why I can't get it to work on my dev site.

Thanks so much in advance!

If you need it, here's the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Calendar</title>
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/retn/jscalendar/calendar-blue.css" />
</head><body>
<p>The calendar container:</p>
<div id="calendar-container"></div>
<script type="text/javascript">

Calendar.setup = function (params) {
function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } };

param_default("inputField",     null);
param_default("displayArea",    null);
param_default("button",         null);
param_default("eventName",      "click");
param_default("ifFormat",       "%Y/%m/%d");
param_default("daFormat",       "%Y/%m/%d");
param_default("singleClick",    true);
param_default("disableFunc",    null);
param_default("dateStatusFunc", params["disableFunc"]);	// takes precedence if both are defined
param_default("dateText",       null);
param_default("firstDay",       null);
param_default("align",          "Br");
param_default("range",          [<?php echo date("Y")-1; ?>, <?php echo date("Y")+5; ?>]);
param_default("weekNumbers",    true);
param_default("flat",           null);
param_default("flatCallback",   null);
param_default("onSelect",       null);
param_default("onClose",        null);
param_default("onUpdate",       null);
param_default("date",           null);
param_default("showsTime",      false);
param_default("timeFormat",     "24");
param_default("electric",       true);
param_default("step",           2);
param_default("position",       null);
param_default("cache",          false);
param_default("showOthers",     false);
param_default("multiple",       null);

var tmp = ["inputField", "displayArea", "button"];
for (var i in tmp) {
	if (typeof params[tmp[i]] == "string") {
		params[tmp[i]] = document.getElementById(params[tmp[i]]);
	}
}
if (!(params.flat || params.multiple || params.inputField || params.displayArea || params.button)) {
	alert("Calendar.setup:\n  Nothing to setup (no fields found).  Please check your code");
	return false;
}

function onSelect(cal) {
	var p = cal.params;
	var update = (cal.dateClicked || p.electric);
	if (update && p.inputField) {
		p.inputField.value = cal.date.print(p.ifFormat);
		if (typeof p.inputField.onchange == "function")
			p.inputField.onchange();
	}
	if (update && p.displayArea)
		p.displayArea.innerHTML = cal.date.print(p.daFormat);
	if (update && typeof p.onUpdate == "function")
		p.onUpdate(cal);
	if (update && p.flat) {
		if (typeof p.flatCallback == "function")
			p.flatCallback(cal);
	}
	if (update && p.singleClick && cal.dateClicked)
		cal.callCloseHandler();
};

if (params.flat != null) {
	if (typeof params.flat == "string")
		params.flat = document.getElementById(params.flat);
	if (!params.flat) {
		alert("Calendar.setup:\n  Flat specified but can't find parent.");
		return false;
	}
	var cal = new Calendar(params.firstDay, params.date, params.onSelect || onSelect);
	cal.showsOtherMonths = params.showOthers;
	cal.showsTime = params.showsTime;
	cal.time24 = (params.timeFormat == "24");
	cal.params = params;
	cal.weekNumbers = params.weekNumbers;
	cal.setRange(params.range[0], params.range[1]);
	cal.setDateStatusHandler(params.dateStatusFunc);
	cal.getDateText = params.dateText;

	if (params.ifFormat) {
		cal.setDateFormat(params.ifFormat);
	}
	if (params.inputField && typeof params.inputField.value == "string") {
		cal.parseDate(params.inputField.value);
	}
	cal.create(params.flat);
	cal.setDate(new Date("<?php echo $year."/".$month."/".$day; ?>") );
	cal.show();
	return false;
}

var triggerEl = params.button || params.displayArea || params.inputField;
triggerEl["on" + params.eventName] = function() {
	var dateEl = params.inputField || params.displayArea;
	var dateFmt = params.inputField ? params.ifFormat : params.daFormat;
	var mustCreate = false;
	var cal = window.calendar;
	if (dateEl)
		params.date = Date.parseDate(dateEl.value || dateEl.innerHTML, dateFmt);
	if (!(cal && params.cache)) {
		window.calendar = cal = new Calendar(params.firstDay,
						     params.date,
						     params.onSelect || onSelect,
						     params.onClose || function(cal) { cal.hide(); });
		cal.showsTime = params.showsTime;
		cal.time24 = (params.timeFormat == "24");
		cal.weekNumbers = params.weekNumbers;
		mustCreate = true;
	} else {
		if (params.date)
			cal.setDate(params.date);
		cal.hide();
	}
	if (params.multiple) {
		cal.multiple = {};
		for (var i = params.multiple.length; --i >= 0;) {
			var d = params.multiple[i];
			var ds = d.print("%Y%m%d");
			cal.multiple[ds] = d;
		}
	}
	cal.showsOtherMonths = params.showOthers;
	cal.yearStep = params.step;
	cal.setRange(params.range[0], params.range[1]);
	cal.params = params;
	cal.setDateStatusHandler(params.dateStatusFunc);
	cal.getDateText = params.dateText;
	cal.setDateFormat(dateFmt);
	if (mustCreate)
		cal.create();
	cal.refresh();
	if (!params.position)
		cal.showAtElement(params.button || params.displayArea || params.inputField, params.align);
	else
		cal.showAt(params.position[0], params.position[1]);
	return false;
};

return cal;
};

  var SPECIAL_DAYS = {
    //0 : [ 16 ],		// special days in January
    //2 : [ 1, 6, 8, 12, 18 ],	// special days in March
   // 8 : [ 21, 11 ]		// special days in September
  };
  
  

  function dateIsSpecial(year, month, day) {
    var m = SPECIAL_DAYS[month];
    if (!m) return false;
    for (var i in m) if (m[i] == day) return true;
    return false;
  };
  
    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:
    if (calendar.dateClicked) {
      // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
      var y = calendar.date.getFullYear();
      var m = calendar.date.getMonth();     // integer, 0..11
      var d = calendar.date.getDate();      // integer, 1..31
      // redirect...
      window.location = "http://www.retn.org/tv-schedules/?y="+y+"&m="+(m+1)+"&d="+d+"&c="+<?php echo $_GET["c"]; ?>;

    }
  };

  Calendar.setup(
    {
      flat         : "calendar-container", // ID of the parent element
      flatCallback : dateChanged
    }
  );
</script>

</body></html>

straylight · February 25, 2010

I'm getting a syntax error for this line of code in firebug:

window.location = "http://www.retn.org/tv-schedules/?y="+y+"&m="+(m+1)+"&d="+d+"&c="+;

It's breaking the script and preventing the rest from working. The "+;" bit right at the end looks like the source of the problem.

sw9 · February 25, 2010

sorry, i didn't include my php code in that which fills that line. it still doesn't work, though. still scratching my head! here's the new code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Calendar</title>
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/retn/jscalendar/calendar-blue.css" />
</head><body>
<?php

    if($_GET['c'] == ''){ 
    $channel = '10'; 
    $_GET['c'] = '10';

    }else{
    $channel = $_GET['c'];
    }
    if($_GET['y'] == ''){ $_GET['y'] = date("Y");}
    if($_GET['m'] == ''){ $_GET['m'] = date("m");}
    if($_GET['d'] == ''){ $_GET['d'] = date("d");}
$year = $_GET['y'];
$month = $_GET['m'];
$day = $_GET['d'];

?>
<p>The calendar container:</p>
<div id="calendar-container"></div>
<script type="text/javascript">

Calendar.setup = function (params) {
function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } };

param_default("inputField",     null);
param_default("displayArea",    null);
param_default("button",         null);
param_default("eventName",      "click");
param_default("ifFormat",       "%Y/%m/%d");
param_default("daFormat",       "%Y/%m/%d");
param_default("singleClick",    true);
param_default("disableFunc",    null);
param_default("dateStatusFunc", params["disableFunc"]);	// takes precedence if both are defined
param_default("dateText",       null);
param_default("firstDay",       null);
param_default("align",          "Br");
param_default("range",          [<?php echo date("Y")-1; ?>, <?php echo date("Y")+5; ?>]);
param_default("weekNumbers",    true);
param_default("flat",           null);
param_default("flatCallback",   null);
param_default("onSelect",       null);
param_default("onClose",        null);
param_default("onUpdate",       null);
param_default("date",           null);
param_default("showsTime",      false);
param_default("timeFormat",     "24");
param_default("electric",       true);
param_default("step",           2);
param_default("position",       null);
param_default("cache",          false);
param_default("showOthers",     false);
param_default("multiple",       null);

var tmp = ["inputField", "displayArea", "button"];
for (var i in tmp) {
	if (typeof params[tmp[i]] == "string") {
		params[tmp[i]] = document.getElementById(params[tmp[i]]);
	}
}
if (!(params.flat || params.multiple || params.inputField || params.displayArea || params.button)) {
	alert("Calendar.setup:\n  Nothing to setup (no fields found).  Please check your code");
	return false;
}

function onSelect(cal) {
	var p = cal.params;
	var update = (cal.dateClicked || p.electric);
	if (update && p.inputField) {
		p.inputField.value = cal.date.print(p.ifFormat);
		if (typeof p.inputField.onchange == "function")
			p.inputField.onchange();
	}
	if (update && p.displayArea)
		p.displayArea.innerHTML = cal.date.print(p.daFormat);
	if (update && typeof p.onUpdate == "function")
		p.onUpdate(cal);
	if (update && p.flat) {
		if (typeof p.flatCallback == "function")
			p.flatCallback(cal);
	}
	if (update && p.singleClick && cal.dateClicked)
		cal.callCloseHandler();
};

if (params.flat != null) {
	if (typeof params.flat == "string")
		params.flat = document.getElementById(params.flat);
	if (!params.flat) {
		alert("Calendar.setup:\n  Flat specified but can't find parent.");
		return false;
	}
	var cal = new Calendar(params.firstDay, params.date, params.onSelect || onSelect);
	cal.showsOtherMonths = params.showOthers;
	cal.showsTime = params.showsTime;
	cal.time24 = (params.timeFormat == "24");
	cal.params = params;
	cal.weekNumbers = params.weekNumbers;
	cal.setRange(params.range[0], params.range[1]);
	cal.setDateStatusHandler(params.dateStatusFunc);
	cal.getDateText = params.dateText;

	if (params.ifFormat) {
		cal.setDateFormat(params.ifFormat);
	}
	if (params.inputField && typeof params.inputField.value == "string") {
		cal.parseDate(params.inputField.value);
	}
	cal.create(params.flat);
	cal.setDate(new Date("<?php echo $year."/".$month."/".$day; ?>") );
	cal.show();
	return false;
}

var triggerEl = params.button || params.displayArea || params.inputField;
triggerEl["on" + params.eventName] = function() {
	var dateEl = params.inputField || params.displayArea;
	var dateFmt = params.inputField ? params.ifFormat : params.daFormat;
	var mustCreate = false;
	var cal = window.calendar;
	if (dateEl)
		params.date = Date.parseDate(dateEl.value || dateEl.innerHTML, dateFmt);
	if (!(cal && params.cache)) {
		window.calendar = cal = new Calendar(params.firstDay,
						     params.date,
						     params.onSelect || onSelect,
						     params.onClose || function(cal) { cal.hide(); });
		cal.showsTime = params.showsTime;
		cal.time24 = (params.timeFormat == "24");
		cal.weekNumbers = params.weekNumbers;
		mustCreate = true;
	} else {
		if (params.date)
			cal.setDate(params.date);
		cal.hide();
	}
	if (params.multiple) {
		cal.multiple = {};
		for (var i = params.multiple.length; --i >= 0;) {
			var d = params.multiple[i];
			var ds = d.print("%Y%m%d");
			cal.multiple[ds] = d;
		}
	}
	cal.showsOtherMonths = params.showOthers;
	cal.yearStep = params.step;
	cal.setRange(params.range[0], params.range[1]);
	cal.params = params;
	cal.setDateStatusHandler(params.dateStatusFunc);
	cal.getDateText = params.dateText;
	cal.setDateFormat(dateFmt);
	if (mustCreate)
		cal.create();
	cal.refresh();
	if (!params.position)
		cal.showAtElement(params.button || params.displayArea || params.inputField, params.align);
	else
		cal.showAt(params.position[0], params.position[1]);
	return false;
};

return cal;
};

  var SPECIAL_DAYS = {
    //0 : [ 16 ],		// special days in January
    //2 : [ 1, 6, 8, 12, 18 ],	// special days in March
   // 8 : [ 21, 11 ]		// special days in September
  };
  
  

  function dateIsSpecial(year, month, day) {
    var m = SPECIAL_DAYS[month];
    if (!m) return false;
    for (var i in m) if (m[i] == day) return true;
    return false;
  };
  
    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:
    if (calendar.dateClicked) {
      // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
      var y = calendar.date.getFullYear();
      var m = calendar.date.getMonth();     // integer, 0..11
      var d = calendar.date.getDate();      // integer, 1..31
      // redirect...
      window.location = "http://dev.retn.org/calendar.php?y="+y+"&m="+(m+1)+"&d="+d+"&c="+<?php echo $_GET["c"]; ?>;

    }
  };

  Calendar.setup(
    {
      flat         : "calendar-container", // ID of the parent element
      flatCallback : dateChanged
    }
  );
</script>

</body></html>

Sign In

Why isn't my calendar showing up?

Recommended Posts

sw9

Link to comment

Share on other sites

straylight

Link to comment

Share on other sites

sw9

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information