It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming JavaScript Forum

Calendar Control

Calendar Control

Postby jakesterguy on Sun Apr 20, 2008 2:01 am

Hello,

Can't figure out how and where to add a line of code, so that a user is not allowed to click back past the current month. Please see code below:

<script language="javascript" src="/web/js/calendar/searchcodefunctions.js"></script>
<script language="javascript" src="/web/js/calendar/datefunctions.js"></script>
<script language="javascript" src="/web/js/calendar/IBECalUtil.js"></script>
<script language="javascript" src="/web/js/calendar/popupcalendar.js"></script>
<SCRIPT LANGUAGE="JavaScript">

<!--
var currentDate = new Date();
var currentMonth= eval(currentDate.getMonth()+1);
var currentDay = currentDate.getDate();
var currentYear = currentDate.getFullYear();
var InventoryMonth= 18;

var InventoryDate = new Date(currentYear, (currentMonth + InventoryMonth -1), currentDay);
//-->

</SCRIPT>
<script language="javascript">
var Labels = new Array();



Labels[0] = "Next Year";



Labels[1] = "Previous Year";



Labels[2] = "Previous Month";



Labels[3] = "Next Month";



Labels[4] = "Sun";



Labels[5] = "Mon";



Labels[6] = "Tue";



Labels[7] = "Wed";



Labels[8] = "Thu";



Labels[9] = "Fri";



Labels[10] = "Sat";



Labels[11] = "January";



Labels[12] = "February";



Labels[13] = "March";



Labels[14] = "April";



Labels[15] = "May";



Labels[16] = "June";



Labels[17] = "July";



Labels[18] = "August";



Labels[19] = "September";



Labels[20] = "October";



Labels[21] = "November";



Labels[22] = "December";



Labels[23] = "S";



Labels[24] = "M";



Labels[25] = "T";



Labels[26] = "W";



Labels[27] = "T";



Labels[28] = "F";



Labels[29] = "S";



Labels[30] = "Within Walking Distance";



Labels[31] = "Close";



Labels[32] = "Jan";



Labels[33] = "Feb";



Labels[34] = "Mar";



Labels[35] = "Apr";



Labels[36] = "May";



Labels[37] = "Jun";



Labels[38] = "Jul";



Labels[39] = "Aug";



Labels[40] = "Sep";



Labels[41] = "Oct";



Labels[42] = "Nov";



Labels[43] = "Dec";



Labels[44] = "Sunday";



Labels[45] = "Monday";



Labels[46] = "Tuesday";



Labels[47] = "Wednesday";



Labels[48] = "Thursday";



Labels[49] = "Friday";



Labels[50] = "Saturday";



<!--
var monthName = new Array (Labels[11], Labels[12], Labels[13], Labels[14],Labels[15], Labels[16], Labels[17],Labels[18], Labels[19], Labels[20], Labels[21], Labels[22]);
var dayName = new Array (Labels[44], Labels[45], Labels[46], Labels[47], Labels[48], Labels[49], Labels[50]);
var calendarCtrlStrings = new Array ("","",Labels[31]);
//-->

</script>


<SCRIPT LANGUAGE="JavaScript">
<!--
//************************************************************************
// Global variables
//************************************************************************

var CALCTRLSTR_NEXT = 0;
var CALCTRLSTR_PREV = 1;
var CALCTRLSTR_CNCL = 2;
var dateSelectedYear;
var InventoryDate ;
var initMonth;
var initYear;
var initDay;
var initNoN;


//************************************************************************
// Function: getCalendarCtrlString
// Purpose: Return the appropriate localized calendar control string.
// (eg: prev, cancel, next).
// Input: stringID - Control string to return.
// language - language used by the WEB page.
// locale - locale used by the WEB page.
// Output: String containing the Calendar Control string.
//************************************************************************


function getCalendarCtrlString (stringID, language, locale)
{
// var enCalendarCtrlStrings = new Array ("Next", "Prev", "Close");
// var esCalendarCtrlStrings = new Array ("Despu&#233s", "Anterior", "Cancelan");

return (calendarCtrlStrings [stringID]);
}

//************************************************************************
// Function: parseYear
// Purpose: Find the index of the year in a HTML SELECT control.
// Input: year - year to locate in the control.
// inY - the control to search.
// Output: Index into the SELECT control.
//************************************************************************

function parseYear(year, yearCtrlStr)
{
dateSelectedYear=year;
var retval=0;
var i=0;
var formyear=0;
//for (i=0; i<=5; i++)
//{
//eval ("formyear = document.getElementById('" + yearCtrlStr + "').options[" + i + "].text;");
eval ("formyear = document.getElementById('" + yearCtrlStr + "').value;");
if (year == formyear)
{
retval=i;
//break;
}
//}
return retval;
}

//************************************************************************
// Function: nextMonth
// Purpose: Increment the month.
// Input: month
// Output: month + 1
//************************************************************************

function nextMonth (month)
{
if (month==12)
{
return 1;
}
else
{
return (month+1);
}
}

//************************************************************************
// Function: prevMonth
// Purpose: Previous month.
// Input: month
// Output: month - 1
//************************************************************************

function prevMonth (month)
{
var prevMonth = (month - 1)
if (month==1)
{
prevMonth = 12;
}
return prevMonth
}

//************************************************************************
// Function: changeYear
// Purpose: Updates the year if incrementing or decrementing into the
// previous or following year.
// Input: direction - incrementing or decrementing
// month - month that is being updated.
// year - current year value.
// Output: Updated year.
//************************************************************************

function changeYear (direction, month, year)
{
// increments or decrements month when it goes past Jan or Dec
var theYear = year
if (direction=='next')
{
if (month == 12)
{
theYear = (year + 1)
}
}
if (direction=='prev')
{
if (month == 1)
{
theYear = (year - 1)
}
}
return theYear
}





//************************************************************************
// Function: generateCalendar
// Purpose: create HTML to be embedded in the page
// Input: target - Target browser window for the calendar.
// month - Month of the calendar top create.
// year - Year of the calendar to create.
// formStr - HTML name of the form that contains the date controls.
// dayCtrlStr - HTML name of the day drop down.
// monthCtrlStr - HTML name of the month drop down.
// yearCtrlStr - HTML name of the year drop down.
// dowCtrlStr - HTML name of the day of week control.
// language - language used by the WEB page.
// locale - locale used by the WEB page.
// callBackFn - JavaScript function to call when closing the calendar.
// Output: none
//************************************************************************

function generateCalendar(aord, cal, month, year, formStr, dayCtrlStr, monthCtrlStr, yearCtrlStr, dowCtrlStr, language, locale, callBackFn, action)
{



var today = new Date();
calendar = ""
calendar +=" <table class=\"calendarTable\" cellspacing=0 cellpadding=2>"
calendar +="<tr valign=top>"
var mthIdx = month;
var endday = getDaysInMonth(mthIdx, year)
var changingmonth=mthIdx;
var index = (mthIdx-1)
var goPrevMonth = prevMonth(mthIdx)
var goNextMonth = nextMonth(mthIdx)
var nextYear = changeYear ('next', parseInt (month, 10), parseInt (year, 10))
var prevYear = changeYear ('prev', parseInt (month, 10), parseInt (year, 10))


// Create the calendar header
var inventoryYr = new Date().getFullYear();
if (InventoryDate.getFullYear() != null)
{
inventoryYr = InventoryDate.getFullYear();
}


if (prevYear >= today.getFullYear())
{
calendar +=" <td colspan=1 align=left class=\"calend34\">"
if(cal=="cal1"){
calendar +=" <a href='javascript:generateCalendar(\""+aord+ "\", \"" + cal + "\", " + goPrevMonth + "," + prevYear + ",\"" + formStr + "\",\"" + dayCtrlStr + "\",\"" + monthCtrlStr + "\",\"" + yearCtrlStr + "\",\""
calendar += dowCtrlStr + "\", \"" + language + "\",\" " + locale + "\",\" " + callBackFn + "\",\"premo\")'>"
calendar += "<u class=\"calend34\">&lt;</u> </a>"
}
calendar +=" </td>"
}
else
{
calendar +=" <td colspan=1 align=left class=\"calend34\">"
if(cal=="cal1"){
calendar +=" <a style='text-decoration: none' 'javascript:generateCalendar(\""+aord+ "\", \"" + cal + "\", " + goPrevMonth + "," + prevYear + ",\"" + formStr + "\",\"" + dayCtrlStr + "\",\"" + monthCtrlStr + "\",\"" + yearCtrlStr + "\",\""
calendar += dowCtrlStr + "\", \"" + language + "\",\" " + locale + "\",\" " + callBackFn + "\",\"premo\")'><u class=\"calend34\">&lt;</u></a>"
}
calendar +=" </td>"

}
calendar +=" <td colspan=5 align=center class=\"calend34\">"
calendar += getMonth (mthIdx) + " " + year
calendar +=" </td>"



if (nextYear <= inventoryYr)
{

calendar +=" <td colspan=1 align=right class=\"calend34\">"
if(cal=="cal2"){
calendar +="<a href='javascript:generateCalendar(\""+aord+ "\", \"" + cal + "\", " + goNextMonth + "," + nextYear + ",\"" + formStr + "\",\"" + dayCtrlStr + "\",\"" + monthCtrlStr + "\",\"" + yearCtrlStr + "\",\""
calendar += dowCtrlStr + "\", \"" + language + "\",\" " + locale + "\",\" " + callBackFn + "\",\"nextmo\")'><u class=\"calend34\">&gt;</u></a>"
}
calendar += "</td></tr>"
}else
{
calendar +=" <td colspan=1 align=right class=\"calend34\">"
if(cal=="cal2"){
calendar +="<a style='text-decoration: none' 'javascript:generateCalendar(\""+aord+ "\", \"" + cal + "\", " + goNextMonth + "," + nextYear + ",\"" + formStr + "\",\"" + dayCtrlStr + "\",\"" + monthCtrlStr + "\",\"" + yearCtrlStr + "\",\""
calendar += dowCtrlStr + "\", \"" + language + "\",\" " + locale + "\",\" " + callBackFn + "\",\"nextmo\")'><u class=\"calend34\">&gt;</u></a>"
}
calendar += "</td></tr>"
}

calendar +=" </tr><tr>"
calendar +=" <td align=center width=\"14%\" class=\"daytitle\">"+Labels[23]+"</td>"
calendar +=" <td align=center width=\"14%\" class=\"daytitle\">"+Labels[24]+"</td>"
calendar +=" <td align=center width=\"14%\" class=\"daytitle\">"+Labels[25]+"</td>"
calendar +=" <td align=center width=\"14%\" class=\"daytitle\">"+Labels[26]+"</td>"
calendar +=" <td align=center width=\"14%\" class=\"daytitle\">"+Labels[27]+"</td>"
calendar +=" <td align=center width=\"14%\" class=\"daytitle\">"+Labels[28]+"</td>"
calendar +=" <td align=center width=\"14%\" class=\"daytitle\">"+Labels[29]+"</td>"
calendar +=" </tr>"

// Create the days.
wholeDate = month + "/01/" + year
thedate = new Date(wholeDate)
firstDay = thedate.getDay()
selectedmonth = mthIdx;
var today = new Date();

var month=today.getMonth();
var presentMonth=eval(today.getMonth()+1);
var presentDay= today.getDate();

var presentYear = today.getFullYear();
var presentDate =new Date(presentMonth + "/" + presentDay + "/" + presentYear);



var currentYear=today.getYear();
var nextYear2=currentYear + 1;
var thisyear = today.getYear() + 1900;
selectedyear = year
var lastDay = (endday + firstDay+1)
var iRows =0
calendar +=" <tr>"
for (var i = 1; i < lastDay; i++)
{
var changeingDay =(i-firstDay);
var changigDate =new Date(changingmonth + "/" + (i-firstDay) + "/" + year)
if ( changigDate == presentDate )
{
changeingDay = "<span class='calend33'>" + changeingDay + "</span>" ;
}
if (i <= firstDay)
{
calendar +=" <td class='emptyDay'>&nbsp;</td>"
}
else
{

if(changigDate <= InventoryDate)
{

if( changigDate >= presentDate)
{
var changingTime = changigDate.getTime();
var presentTime= presentDate.getTime();
if(changingTime==presentTime)
{
changeingDay = "<span class='today'>" + changeingDay + "</span>" ;
}


var sday = i-firstDay;
var smonth = selectedmonth;

if (selectedmonth < 10) { smonth="0"+selectedmonth;}
if (sday < 10) { sday = "0"+sday;}


var aDateObj = new Date(parent.getcurrentADay());
var dDateObj = new Date(parent.getcurrentDDay());
var sDateObj = new Date(smonth+"/"+sday+"/"+selectedyear);

if (sDateObj.valueOf()==aDateObj.valueOf())
{
calendar +=" <td class='calArrival' align=center>"
}
else if (sDateObj.valueOf() == dDateObj.valueOf())
{

calendar +=" <td class='calDepart' align=center>"
}
else if (sDateObj.valueOf() < dDateObj.valueOf() && sDateObj.valueOf() > aDateObj.valueOf())
{
calendar +=" <td class='betweenAD' align=center>"
}

else
{
calendar +=" <td class='afterToday' align=center>"
}


calendar +="<span ID='"+cal+(i-firstDay)+"'><a href='JavaScript:parent.clickedCalendar(\""+aord+ "\", \"" + cal + "\"," + (i-firstDay) + ","+ selectedmonth + ","+ selectedyear + ", \"" + formStr + "\", \"" + dayCtrlStr + "\", \"" + monthCtrlStr + "\",\"" + yearCtrlStr + "\",\"" + dowCtrlStr
calendar += "\", \"" + language + "\", \"" + locale + "\",\"" + callBackFn + "\");'>"+ changeingDay +"</a></span></td>"
}

else
{
calendar +=" <td class='beforeToday' align=center><span ID='"+cal+(i-firstDay)+"'><a 'JavaScript:parent.clickedCalendar(\""+aord+ "\", \"" + cal + "\"," + (i-firstDay) + ","+ selectedmonth + ","+ selectedyear + ", \"" + formStr + "\", \"" + dayCtrlStr + "\", \"" + monthCtrlStr + "\",\"" + yearCtrlStr + "\",\"" + dowCtrlStr
calendar += "\", \"" + language + "\", \"" + locale + "\",\"" + callBackFn + "\");'>"+(i-firstDay) +"</a></span></td>"

}
}

else
{
var sday = i-firstDay;
var smonth = selectedmonth;

if (selectedmonth < 10) { smonth="0"+selectedmonth;}
if (sday < 10) { sday = "0"+sday;}


var aDateObj = new Date(parent.getcurrentADay());
var dDateObj = new Date(parent.getcurrentDDay());
var sDateObj = new Date(smonth+"/"+sday+"/"+selectedyear);

if (sDateObj.valueOf()==aDateObj.valueOf())
{
calendar +=" <td class='calArrival' align=center>"
}
else if (sDateObj.valueOf() == dDateObj.valueOf())
{

calendar +=" <td class='calDepart' align=center>"
}
else if (sDateObj.valueOf() < dDateObj.valueOf() && sDateObj.valueOf() > aDateObj.valueOf())
{
calendar +=" <td class='betweenAD' align=center>"
}

else
{
calendar +=" <td class='afterToday' align=center>"
}

calendar +="<div align=center><span ID='"+cal+(i-firstDay)+"'><a 'JavaScript:parent.clickedCalendar(\""+aord+ "\", \"" + cal + "\"," + (i-firstDay) + ","+ selectedmonth + ","+ selectedyear + ", \"" + formStr + "\", \"" + dayCtrlStr + "\", \"" + monthCtrlStr + "\",\"" + yearCtrlStr + "\",\"" + dowCtrlStr
calendar += "\", \"" + language + "\", \"" + locale + "\",\"" + callBackFn + "\");'>"+(i-firstDay) +"</a></span></font></font></div></td>"

}


}
if (i % 7 == 0 )
{
if (i != lastDay-1)
{
calendar +=" </tr><tr>"
iRows = iRows + 1
}
else
{
iRows = iRows
}
}
}

if (iRows == 4){
calendar +=" </tr><tr><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td></tr>";
}
else if (iRows == 3){
calendar +=" </tr><tr><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td></tr>";
calendar +=" </tr><tr><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td><td class='calend35'>&nbsp;</td></tr>";
}

calendar +=" </table>"
sdiv = document.getElementById(cal);
sdiv.innerHTML = calendar;

if(action=="nextmo"){
generateCalendar(aord,"cal1",goPrevMonth ,prevYear ,formStr ,dayCtrlStr, monthCtrlStr ,yearCtrlStr ,dowCtrlStr ,language ,locale,callBackFn,"")
//parent.setCurrFcs("nocal");
parent.document.getElementById(dowCtrlStr).focus(true);
// var clickCount = 0;
}
else if(action=="premo"){
yr = year;
if(goNextMonth==1){
yr = nextYear;
}
generateCalendar(aord,"cal2",goNextMonth ,yr ,formStr ,dayCtrlStr, monthCtrlStr ,yearCtrlStr ,dowCtrlStr ,language ,locale,callBackFn,"")
parent.document.getElementById(dowCtrlStr).focus(true);
}



}

-->
</script>

Thanks,

jake
jakesterguy
 
Posts: 0
Joined: Sun Apr 20, 2008 1:55 am

Postby rangana on Tue Apr 22, 2008 2:09 am

P.S., place your codes inside the [ code ] [/code ] tags of this forum :)

...Also, could you show us your markups too ;)

...And by the way, what do you mean by "so that a user is not allowed to click back past the current month"?..What does it mean..... ;)
User avatar
rangana
500+ Club
 
Posts: 935
Joined: Wed Feb 27, 2008 5:14 am
Location: Cebu City Philippines


Who is online

Users browsing this forum: No registered users and 4 guests