» Forums
» DynarchMenu forum
» Support
» Highlight the selected Date
Highlight the selected Date
2007/11/21 11:10
Viewed 1984 times
Replies: 1/1

Hi,
First of all thank you so much for provinding such a wonderful calendar. its of grt use. Am using calendar-setup.js, v 1.7 which is very old version i guess. i've checked most of the posts in your forums. but all are related to recent versions. Actually i need to highlight a selected date in the calendar. but always its showing the current date only. I need to display the current date by defualt and if I change the date and submit the form after refreshing, it should highlight the new date rather than the current date. please can anyone give me a solution for this???

Thank you

Re: Highlight the selected Date
2007/11/28 08:16
Viewed 3323 times
Replies: 0/0

OK am giving the code. Please help me out

calendar-setup.js:

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("mondayFirst", true);
param_default("align", "Bl");
param_default("range", [1900, 2999]);
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");

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.inputField || params.displayArea || params.button)) {
alert("Calendar.setup:\n Nothing to setup (no fields found). Please check your code");
return false;
}

function onSelect(cal) {
if (cal.params.flat) {
if (typeof cal.params.flatCallback == "function") {
cal.params.flatCallback(cal);
} else {
alert("No flatCallback given -- doing nothing.");
}
return false;
}
if (cal.params.inputField) {
cal.params.inputField.value = cal.date.print(cal.params.ifFormat);
}
if (cal.params.displayArea) {
cal.params.displayArea.innerHTML = cal.date.print(cal.params.daFormat);
}
if (cal.params.singleClick && cal.dateClicked) {
cal.callCloseHandler();
}
if (typeof cal.params.onUpdate == "function") {
cal.params.onUpdate(cal);
}
};

if (params.flat != null) {
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.mondayFirst, params.date, params.onSelect || onSelect);
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.create(params.flat);
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 (!window.calendar) {
window.calendar = cal = new Calendar(params.mondayFirst,
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 {
cal.hide();
}
cal.setRange(params.range[0], params.range[1]);
cal.params = params;
cal.setDateStatusHandler(params.dateStatusFunc);
cal.setDateFormat(dateFmt);
if (mustCreate)
cal.create();
cal.parseDate(dateEl.value || dateEl.innerHTML);
cal.refresh();
cal.showAtElement(params.displayArea || params.inputField, params.align);
if (dateEl && (dateEl.value || dateEl.innerHTML))
params.date = Date.parseDate(dateEl.value || dateEl.innerHTML, dateFmt);

return false;
};
};

And here is the script where am calling the calendar

<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:

if (calendar.dateClicked) {
// OK, a date was clicked, redirect to /yyyy/mm/dd/index.php

var y = calendar.date.getFullYear();
//alert(y)
var m = calendar.date.getMonth()+1; // integer, 0..11
// alert(m)
var d = calendar.date.getDate(); // integer, 1..31
var expdt1 = new Date();
var expdt11=expdt1.getYear();
var expdt12=expdt1.getMonth();
expdt12++;
if(expdt12<10)
{
expdt12="0"+expdt12;
}
var expdt13=expdt1.getDate();
var expdat=new Date();
var s= expdat.setFullYear(expdt11,expdt12,expdt13);
var s1= expdt1.setFullYear(y, m, d);
var expdiffdays = (expdat.valueOf() - expdt1.valueOf()) / (60 60 24 * 1000);
if(expdiffdays>0)
{
alert("You Cannot Select The Previous Dates ");
return(false);
}
// redirect...
var path= "showPMSSchedule1.do?id=<%=docid1%>&docname=<%=fname1%>&doclname=<%=lname1%>&spec=<%=spec1%>&timefrom=<%=newapptimefrom%>&timeto=<%=newapptimeto%>&caldate="+y + "-" + m + "-" + d;

// var path= "showPMSSchedule1.do?id=<%=docname%>&spec=<%=docspec%>&docid=<%=docid1%>&caldate="+y + "-" + m + "-" + d;
// alert(path);
window.location = path;
}
};

myDate = new Date();
myDate.setDate(myDate.getDate() + 5); //set new date after 5 days

Calendar.setup(
{
button : "end_date_icon",
inputField : "end_date", // ID of the input field
daFormat : "%d-%m-%Y",
ifFormat : "%Y%m%d", // the date format
firstDay : 1,
date : myDate
}
)

{

flat : "calendar-container", // ID of the parent element

flatCallback : dateChanged // our callback function

}

);
</script>

last
Google