Menu
Community /Pin to ProfileBookmarkQuestion ... Do you need to pick a date from both calendars
or do you just want to display two calendars side-by-side?
http://www.electricprism.com/aeron/calendar/
I am just wanting to display 2 months at a time, side by side. I am using this for a start and stop date...I will have a separate calendar for each field that will show 2 months at a time.
Along with the external js files from your original post.I don't see how that would change its current style. I am wanting to show 2 months at a time on each calendar..one for start and one for end. Sorry to be so dense, but could you draw me a picture of what you what it to look like?
Style changes are made with CSS modifications.
Are you expecting to select a start and stop date on each of the displayed calendars?
You would not be able to do that on a single calendar if the dates are in the same month
as it returns the picked info as soon as clicked. Okay. Lets just forget that I need 2 calenders. Lets start over haha.
I need one calendar.
Normal "datepickers" show one month at a time.
All I want is for it to show 2 months instead of 1.
Found an example finally haha. Go to expedia.com and check out the datepickers on the front page. Your example is just one datepicker duplicated with a different id.
Results in 2 datepickers.
What is the real problem?
[img]http://img231.imageshack.us/img231/6616/calendarqf7.gif [/img]Still working on it.
With the source you provided in post #1:
1. I can put two calendars side-by-side, but I cannot pick one date then.
2. I can create two inputs, but only one calendar shows at a time.
I'm trying to use one 'shown' and two 'hidden' fields for the start and end dates,
but having problems.
Have you looked at the expedia.com code to see what they are doing or using? You kind of have to fish for their code on the site...Ive found multiple JS pages and stuff but seems like they have multiple calendar code haha.
but here's some code to play with. ?
It does not use the referenced calendar in post #1 as I don't know how to change the parts I wanted changed. ?
The main routine to pick from:
Now the JS part:
Note, it is possible to pick from more that 2 calendars displayed (ie, 3,4,6,12)
by changing the CalSize and CalVert values in the JS section. ?
If you make significant changes, let me know.
Use it in good health!
?I can't really thank you enough for taking the time to do this. I am about to look into it. I keep getting errors so far...trying to figure out whats going on. I'm finalizing a working copy of it now. I'll post later.
In the meantime ...
What kind of errors are you getting?
What browser/system are you using?
Post a portion of what you think is not working right. I'm still getting the same errors, however the thing works fine on a blank page but if I try to integrate it into the page im working on, NO DICE.
Firefox/XP - clients use IE.
2Month Calender
Hey guys..im using the source from [URL=”http://www.nsftools.com/tips/DatePickerTest.htm”]THIS PAGE
Any advice on how to show 2 months at a time, rather then just 1?
Sign in
to post a comment17 Comments(s) ↴
0
@JMRKERDec 11.2007 — #or do you just want to display two calendars side-by-side?
reply?
0
@gomisuteDec 11.2007 — #this may or may not answer your question, but here is one that I like...and it can be easily customized...reply?
0
@altauthorDec 11.2007 — #Question ... Do you need to pick a date from both calendars
or do you just want to display two calendars side-by-side?[/QUOTE]
I am just wanting to display 2 months at a time, side by side. I am using this for a start and stop date...I will have a separate calendar for each field that will show 2 months at a time.
reply?
0
@JMRKERDec 11.2007 — #[code=php]
<form>
<b>Start Date:</b> <input name="StartDate">
<input type=button value="select" onclick="displayDatePicker('StartDate');">
<b>End Date:</b> <input name="EndDate">
<input type=button value="select" onclick="displayDatePicker('EndDate', this);">
</form>
<p>
[/code]Along with the external js files from your original post.
reply?
0
@altauthorDec 13.2007 — #reply?
0
@JMRKERDec 13.2007 — #Style changes are made with CSS modifications.
Are you expecting to select a start and stop date on each of the displayed calendars?
You would not be able to do that on a single calendar if the dates are in the same month
as it returns the picked info as soon as clicked.
reply?
0
@altauthorDec 14.2007 — #I need one calendar.
Normal "datepickers" show one month at a time.
All I want is for it to show 2 months instead of 1.
Found an example finally haha. Go to expedia.com and check out the datepickers on the front page.
reply?
0
@JMRKERDec 14.2007 — #Results in 2 datepickers.
What is the real problem?
reply?
0
@altauthorDec 14.2007 — #Okay..lawl. Here is what I want to do. This datepicker shows current month AS WELL as next month so that you have 2 months to work with before having to go to the Next set.[img]reply?
0
@JMRKERDec 14.2007 — #With the source you provided in post #1:
1. I can put two calendars side-by-side, but I cannot pick one date then.
2. I can create two inputs, but only one calendar shows at a time.
I'm trying to use one 'shown' and two 'hidden' fields for the start and end dates,
but having problems.
Have you looked at the expedia.com code to see what they are doing or using?
reply?
0
@altauthorDec 15.2007 — #reply?
0
@JMRKERDec 15.2007 — #The following is not perfect and it still need modification to return the date clicked rather than an alert message, :o but here's some code to play with. ?
It does not use the referenced calendar in post #1 as I don't know how to change the parts I wanted changed. ?
The main routine to pick from:
[code=php]
<html>
<head>
<title>Calendar</title>
<style type="text/css">
div.cal { height:auto; border: 1px solid blue; }
</style>
<script type="text/javascript" src="cals.js"></script>
</head>
<body>
<script type="text/javascript">
var calID = '';
var CalWide = CalSize / CalVert;
var CalHigh = CalWide * CalVert;
var str = '';
str += '<table border="0 width="50%">';
for (i=0; i<CalSize; i++) {
calID = 'cal'+i;
if ((i % CalWide) == 0) { str += '<tr>'; }
str += '<td valign="top"><div id="'+calID+'" class="cal">'
str += +displayCalendar(MonthsYears[0].Month+1,MonthsYears[0].Year)+'</div></td>';
if ((i % CalWide) == (CalWide-1)) { str += '</tr>'; }
}
// str += '</table>';
// str += '<table border="1" width="50%>';
// str += '<tr><th colspan="2">Month / Year</th></tr>';
str += '<tr><th colspan="2">';
str += '<button onClick="prevMonthYear( 0,-1);return false;"><<<</button>';
str += '<button onClick="prevMonthYear(-CalHigh, 0);return false;"><<</button>';
str += '<button onClick="prevMonthYear(-1, 0);return false;"><</button>';
str += '<button onClick="Initialize();Redisplay();return false;">Today</button>';
str += '<button onClick="nextMonthYear( 1, 0);return false;">></button>';
str += '<button onClick="nextMonthYear( CalHigh, 0);return false;">>></button>';
str += '<button onClick="nextMonthYear( 0, 1);return false;">>>></button>';
str += '</th></tr>';
str += '</table>';
document.write(str);
Redisplay();
</script>
</body>
</html>
[/code]Now the JS part:
[code=php]
// Calendar Display
var MonthOfYear = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var DayOfWeek = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
function displayCalendar(month, year) {
month = parseInt(month);
month--; // adjustment when 'month' parameter passed as "1"..."12"
year = parseInt(year);
var i = 0;
var days = getDaysInMonth(month+1,year);
var firstOfMonth = new Date (year, month, 1);
var startingPos = firstOfMonth.getDay();
days += startingPos;
var YMD = '';
var ymd = '';
var page = '';
page += '<b>'+MonthOfYear[month]+' '+year+'</b><br />';
for (i=0; i<7; i++) {
page += '<div style="float:left;width:14.25%;">'+DayOfWeek[i]+'</div>';
}
for (i = 0; i < startingPos; i++) {
if ( i%7 == 0 ) page += "<br />";
YMD = year+'/'+(month+1)+'/'+(i-startingPos+1);
ymd = i-startingPos+1;
if (ymd > 0) {
page += '<input type="text" readonly size="1" value="'+ymd+'" ';
page += ' onClick=alert("'+YMD+'")>';
} else {
page += '<input type="text" readonly size="1" value="">';
}
}
for (i = startingPos; i < days; i++) {
if ( i%7 == 0 ) page += "<br />";
YMD = year+'/'+(month+1)+'/'+(i-startingPos+1);
ymd = i-startingPos+1;
page += '<input type="text" readonly size="1" value="'+ymd+'" ';
page += ' onClick=alert("'+YMD+'")>';
}
for (i=days; i<42; i++) {
if ( i%7 == 0 ) page += "n ";
page += " ";
}
return page;
}
function getDaysInMonth(month,year) {
var days;
if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) days=31;
else if (month==4 || month==6 || month==9 || month==11) days=30;
else if (month==2) {
if (isLeapYear(year)) { days=29; }
else { days=28; }
}
return (days);
}
function isLeapYear (Year) {
if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return (true); } else { return (false); }
}
var MonthsYears = [ [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}],
[{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}],
[{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}], [{Month:0,Year:0}] ];
var month = 0; var year = 0;
var CalSize = 2; // allows 1..12;
// var CalVert = 2; // CalSize/3; // allows 1,2,3,4,6,12 as sizes
var CalVert = 3; // CalSize/3; // allows 1,2,3,4,6,12 as sizes
Initialize();
function Initialize() {
var now = new Date(); month = now.getMonth(); year = now.getFullYear();
for (i=0; i<CalSize; i++) {
MonthsYears[i].Month = month;
MonthsYears[i].Year = year;
}
Normalize(0);
}
function Normalize(amt) {
// Array return idea from:
// http://www.webdeveloper.com/forum/showthread.php?t=167956
var arr = new Array();
for (i=0; i<CalSize; i++) {
MonthsYears[i].Month = month+i;
MonthsYears[i].Year = year;
arr = Adjust(amt,MonthsYears[i].Month,MonthsYears[i].Year);
MonthsYears[i].Month = arr.AMonth;
MonthsYears[i].Year = arr.AYear;
}
/* for testing purposes
var str = 'MonthsYears Statusn';
for (i=0; i<CalSize; i++) {
str += i+': Month: '+MonthsYears[i].Month+' Year: '+MonthsYears[i].Year+'n'; }
alert(str);
*/
}
function Adjust(Direction,M,Y) {
M += Direction;
if (M < 0) { M += 12; Y = Y-1; }
if (M > 11) { M -= 12; Y = Y+1; }
return {AMonth:M, AYear:Y};
}
function Redisplay() {
var calID = '';
for (i=0; i<CalSize; i++ ) {
calID = 'cal'+i;
document.getElementById(calID).innerHTML = displayCalendar(MonthsYears[i].Month+1,MonthsYears[i].Year);
}
}
function AdjustMonthYear(Mamt,Yamt) {
var arr = new Array();
arr = Adjust(Mamt,month,year+Yamt);
month = arr.AMonth;
year = arr.AYear;
}
function prevMonthYear(Mamt,Yamt) { AdjustMonthYear(Mamt,Yamt); Normalize(0); Redisplay(); }
function nextMonthYear(Mamt,Yamt) { AdjustMonthYear(Mamt,Yamt); Normalize(0); Redisplay(); }
[/code]Note, it is possible to pick from more that 2 calendars displayed (ie, 3,4,6,12)
by changing the CalSize and CalVert values in the JS section. ?
If you make significant changes, let me know.
Use it in good health!
?
reply?
0
@altauthorDec 17.2007 — #reply?
0
@JMRKERDec 17.2007 — #In the meantime ...
What kind of errors are you getting?
What browser/system are you using?
Post a portion of what you think is not working right.
reply?
0
@altauthorDec 27.2007 — #Firefox/XP - clients use IE.
reply?