looking for a javascript calendar...

[Stimp]

preferably one that when clicked can update three date dropdowns (day,
month, year) like

http://www.visitdublin.com/carhire/avis.asp

Don't mind paying for the file... anyone seen something like this?
--

"I hear ma train a comin'
.... hear freedom comin"

[Jarmo]

Re: looking for a javascript calendar...

Why can't you view the source/JS of that page?

"Stimp" <ren@spumco.com > wrote in message
news:slrnd13gri .fr2.ren@carbon .redbrick.dcu.i e...[color=blue]
> preferably one that when clicked can update three date dropdowns (day,
> month, year) like
>
> http://www.visitdublin.com/carhire/avis.asp
>
> Don't mind paying for the file... anyone seen something like this?
> --
>
> "I hear ma train a comin'
> ... hear freedom comin"[/color]

[Stimp]

Re: looking for a javascript calendar...

yeah I looked at that, but for some reason I couldn't get it to work on
my localhost.

[color=blue]
> Why can't you view the source/JS of that page?
>
> "Stimp" <ren@spumco.com > wrote in message
> news:slrnd13gri .fr2.ren@carbon .redbrick.dcu.i e...[color=green]
>> preferably one that when clicked can update three date dropdowns (day,
>> month, year) like
>>
>> http://www.visitdublin.com/carhire/avis.asp
>>
>> Don't mind paying for the file... anyone seen something like this?
>> --
>>
>> "I hear ma train a comin'
>> ... hear freedom comin"[/color]
>
>[/color]


--

"I hear ma train a comin'
.... hear freedom comin"

[Jarmo]

Re: looking for a javascript calendar...

Well there are plenty of places on the web to grab JavaScript calendars
from.

http://www.calendarzone.com/Interactive/

http://javascript.internet.com/calendars/

Personally I prefer the ones that *don't* spawn a new page. Any one of them
could easily be modified to populate the 3 dropdowns that you want.

"Stimp" <ren@spumco.com > wrote in message
news:slrnd143ui .7gj.ren@carbon .redbrick.dcu.i e...[color=blue]
> yeah I looked at that, but for some reason I couldn't get it to work on
> my localhost.
>
>[color=green]
> > Why can't you view the source/JS of that page?
> >
> > "Stimp" <ren@spumco.com > wrote in message
> > news:slrnd13gri .fr2.ren@carbon .redbrick.dcu.i e...[color=darkred]
> >> preferably one that when clicked can update three date dropdowns (day,
> >> month, year) like
> >>
> >> http://www.visitdublin.com/carhire/avis.asp
> >>
> >> Don't mind paying for the file... anyone seen something like this?
> >> --
> >>
> >> "I hear ma train a comin'
> >> ... hear freedom comin"[/color]
> >
> >[/color]
>
>
> --
>
> "I hear ma train a comin'
> ... hear freedom comin"[/color]

[Stimp]

Re: looking for a javascript calendar...

On Tue, 15 Feb 2005 Jarmo <jarmo@jarmo.co m> wrote:[color=blue]
> Well there are plenty of places on the web to grab JavaScript calendars
> from.
>
> http://www.calendarzone.com/Interactive/
> http://javascript.internet.com/calendars/
>
> Personally I prefer the ones that *don't* spawn a new page. Any one of them
> could easily be modified to populate the 3 dropdowns that you want.[/color]

I've seen a lot that output the clicked date to a text box like:

http://www.softcomplex.com/products/tigra_calendar/demo1.html

I'm pretty much a newb at javascript so would there be a way to use this
method to update 3 dropdowns.

i.e. Instead of a text box, use a hidden field, and set the value of the
hidden field when I click on the javascript calendar (instead of
outputting the text value of the date as is currently done)

Then once the the hidden field value changes it would parse the value in
the hidden field into three separate values and set the selected value
of the dropdowns accordingly.

Would this idea work? Could you give me some pointers? :)

Thanks!
--

"I hear ma train a comin'
.... hear freedom comin"

[Jarmo]

Re: looking for a javascript calendar...

Yes that would work. Assuming that you're happy to take apart the calendar
code, I'd re-populate the dropdowns from the calendar code where it
currently pushes the selected date into that edit field.

To select the appropriate values from the dropdowns use a bit of code like
this:

function selectOption(op tionset, value)
{
for (var ii = 0; ii < optionset.optio ns.length; ii++)
{
if (optionset.opti ons[ii].value == value)
{
optionset.optio ns[ii].selected = true;
break;
}
}
}

<select name=month>
<option value=1>January
<option value=12>Decemb er
</select>

selectOption(mo nth, "12");

"Stimp" <ren@spumco.com > wrote in message
news:slrnd1470e .3k8.ren@carbon .redbrick.dcu.i e...[color=blue]
> On Tue, 15 Feb 2005 Jarmo <jarmo@jarmo.co m> wrote:
>
> http://www.softcomplex.com/products/...dar/demo1.html
> I'm pretty much a newb at javascript so would there be a way to use this
> method to update 3 dropdowns.
>
> i.e. Instead of a text box, use a hidden field, and set the value of the
> hidden field when I click on the javascript calendar (instead of
> outputting the text value of the date as is currently done)
>
> Then once the the hidden field value changes it would parse the value in
> the hidden field into three separate values and set the selected value
> of the dropdowns accordingly.
>
> Would this idea work? Could you give me some pointers? :)
>
> Thanks![/color]

[Stimp]

Re: looking for a javascript calendar...

On Tue, 15 Feb 2005 Jarmo <jarmo@jarmo.co m> wrote:[color=blue]
> Yes that would work. Assuming that you're happy to take apart the calendar
> code, I'd re-populate the dropdowns from the calendar code where it
> currently pushes the selected date into that edit field.
>
> To select the appropriate values from the dropdowns use a bit of code like
> this:
>
> function selectOption(op tionset, value)
> {
> for (var ii = 0; ii < optionset.optio ns.length; ii++)
> {
> if (optionset.opti ons[ii].value == value)
> {
> optionset.optio ns[ii].selected = true;
> break;
> }
> }
> }
>
><select name=month>
> <option value=1>January
> <option value=12>Decemb er
></select>
>
> selectOption(mo nth, "12");[/color]

great I'll try that tommorrow. Cheers!

--

"I hear ma train a comin'
.... hear freedom comin"

[Jarmo]

Re: looking for a javascript calendar...

That should read :

- selectOption(do cument.forms[0].month, "12"), or
- selectOption(do cument.myform.m onth, "12")

as appropriate.

"Stimp" <ren@spumco.com > wrote in message
news:slrnd14csn .osl.ren@carbon .redbrick.dcu.i e...[color=blue]
> On Tue, 15 Feb 2005 Jarmo <jarmo@jarmo.co m> wrote:[color=green]
> >
> > selectOption(mo nth, "12");[/color][/color]

[David Dorward]

Re: looking for a javascript calendar...

Stimp wrote:
[color=blue]
> preferably one that when clicked can update three date dropdowns (day,
> month, year)[/color]

I'd use <http://www.dynarch.com/projects/calendar/>, but have it update a
regular text input, and couple that with Date::Parse
<http://search.cpan.org/~gbarr/TimeDate-1.16/lib/Date/Parse.pm> to allow
users to enter freeform dates.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Matt Kruse]

Re: looking for a javascript calendar...

Stimp wrote:[color=blue]
> preferably one that when clicked can update three date dropdowns (day,
> month, year) like
> http://www.visitdublin.com/carhire/avis.asp[/color]

You can check out mine, which has an example of updating 3 fields just like
at your URL:

http://www.JavascriptToolbox.com/calendarpopup/

--
Matt Kruse

http://www.JavascriptToolbox.com

[RobG]

Re: looking for a javascript calendar...

Matt Kruse wrote:[color=blue]
> Stimp wrote:
>[color=green]
>>preferably one that when clicked can update three date dropdowns (day,
>>month, year) like
>>http://www.visitdublin.com/carhire/avis.asp[/color]
>
>
> You can check out mine, which has an example of updating 3 fields just like
> at your URL:
> http://www.JavascriptToolbox.com/calendarpopup/
>[/color]

Crikey Matt, is that really "The Simplest Possible
Implementation Of A Calendar Popup" ?

For the record, here's one that, to me, is considerably simpler
- but I make no claims regarding "simplest possible"!!

Oh, it doesn't use a popup...

--
Rob

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Ca lendar</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
body {font-family: sans-serif;}
..mainDiv
{text-align: center; border: 1px solid red;
width: 14em; height: 17em; position: absolute;
top:4em; left: 1em;
}
..dateHolder
{text-align: center; /* border: 1px solid blue; */
width: 14em; height: 12em; position: absolute;
top:5em; left: 0em;
}
..dateLabel, .monthLabel
{width: 2em; height: 1em; display: block;
position: absolute; top: 4em;
}
..monthLabel
{width: 10em; top: 0em; left: 2em;
}
..dateCell, .weCell, .nodateCell
{text-align: center; border-top: 1px solid white;
border-left: 1px solid white; font-weight: normal;
width: 2em; height: 2em; position: absolute;
line-height: 2; background-color: #333366; color: #ffffff;
}
.weCell
{background-color: #445577; font-weight: normal;}
.nodateCell
{background-color: #ddddff; display: none;}
</style>

<script type="text/javascript">
var startYear = '',
startMonth = '',
selectedYear,
selectedMonth;
var months = ['January','Febr uary','March',' April','May','J une',
'July','August' ,'September','O ctober','Novemb er','December'];

/*************** **********
Puts dates in the date cells
*************** **********/
function genDates(ref,yr ,mon,t) {
// Calc day number of 1st day of month &
// first cell to put a date in
var refDate= new Date(yr,mon,1);
var startCell = refDate.getDay( )-1;
if (startCell < 0) startCell = 6;

var cellDate = 0 - startCell;
var daysInMonth = getMonthDays(yr ,mon+1);

document.getEle mentById('month Label').innerHT ML =
months[mon] + ' ' + yr;

// If ref cell has kids, then just update
if ( ref.firstChild
&& ref.firstChild. nodeName.toLowe rCase() == 'div') {
currentCell = ref.firstChild;
var cellCount = 0;
cellDate++;
// Assign different classNames to dates
while (currentCell) {
// If there's no date for this cell
if (cellDate <= 0 || cellDate > daysInMonth) {
currentCell.cla ssName = 'nodateCell';
// If it's Saturday or Sunday
} else if ( cellCount%7-5 == 0 || cellCount%7-6 == 0) {
currentCell.cla ssName = 'weCell';
// Must be a week day
} else {
currentCell.cla ssName = 'dateCell';
}
currentCell.fir stChild.data = cellDate;
cellCount++ ;
cellDate++ ;
currentCell = currentCell.nex tSibling;
}
return;
}

// Otherwise, build table from scratch
// Only runs when first created (onload)
var cellWidth = '2',
cellHeight = '2',
cellUnit = 'em',
lineHeight = '2';
clearKids(ref);
for (var i=0; i<6; i++) {
for (var j=0; j<7; j++) {
var oDiv = document.create Element('div');
oDiv.style.widt h = cellWidth + cellUnit;
oDiv.style.heig ht = cellHeight + cellUnit;
oDiv.style.left = j * cellWidth + cellUnit;
oDiv.style.top = i * cellHeight + cellUnit;
oDiv.style.line Height = lineHeight;
// Assign class for no date, weekend, week as above
if (cellDate < 0 || cellDate >= daysInMonth) {
oDiv.className = 'nodateCell';
} else if ( j == 5 || j == 6) {
oDiv.className = 'weCell';
} else {
oDiv.className = 'dateCell';
}
cellDate++;
oDiv.appendChil d(document.crea teTextNode(cell Date));
oDiv.onclick = sayDate;
ref.appendChild (oDiv);
}
}
}

/*************** **********
Removes all child nodes
*************** **********/
function clearKids(ref){
while(ref.first Child){
ref.removeChild (ref.firstChild );
}
}

/*************** **********
Builds the calendar
*************** **********/
function initCal(yr,mon) {
var now = new Date();

// If have been passed a month, assume also got a year
if (typeof mon == 'number') {
now.setMonth(mo n);
now.setYear(yr) ;

// Otherwise, declare mon & yr and set selectors
} else {
var mon = now.getMonth();
var yr = now.getFullYear ();
}

// If not initialising from initCal, put selector
// setters inside above else statement.
// Add options to month select
var y = document.dateSe l.monthSel;
// If options don't exist, build 'em
var len = months.length;
if (y.length != len) {
y.length = len;
for (var i=0; i<len; i++) {
y[i].text = months[i];
}
}
// Select the current month
y.selectedIndex = mon;

// Add years to year selector (current year +-5)
// Select the current year
var yrRange = 6;
var z = document.dateSe l.yearSel;
len = yrRange*2 + 1;
if (z.length != len) {
z.length = len;
var t = yr - yrRange;
for (var k=0; k<len; k++){
z[k].text = t;
if (z[k].text == yr) z[k].selected = true;
t++;
}
} else {
for (var k=0; k<len; k++){
if (z[k].text == yr) {
z[k].selected = true;
}
}
}

if (startYear == '') startYear = yr;
if (startMonth == '') startMonth = mon;
selectedYear = yr; // Remember year & month selected
selectedMonth = mon; // as global variables

if (document.getEl ementById) {
genDates(docume nt.getElementBy Id('dateBlock') ,yr,mon);
}
}

/*************** **********
Returns the number of days in the month,
given year and month (1-12) numbers
*************** **********/
function getMonthDays(Y, M){
if ( M==4 || M==6 || M==9 || M==10){
return 30;
} else if ( M==2 && Y%4==0){
if ( Y%100!=0 || Y%400==0){
return 29;
}
} else if ( M==2 ) {
return 28;
}
return 31;
}

/*************** **********
Sets the calendar back to the initial month
and resets the form (which is pretty pointless...)
*************** **********/
function resetForm(){
document.dateSe l.reset();
if (startYear != '' && startMonth != '')
initCal(startYe ar,startMonth);
}

/*************** **********
Does something when a cell is clicked on
Could return the date to a form
*************** **********/
function sayDate(e) {
// var e = e || window.event;
var srcEle = (e)?e.target : window.event.sr cElement;
var dateISO = selectedYear + '-'
+ addZ(selectedMo nth+1) + '-'
+ addZ(srcEle.fir stChild.data);
alert(dateISO);
}

/*************** **********
Adds a leading zero to single digit numbers
Only used by sayDate function
*************** **********/
function addZ(x){
return (x<10)?'0'+x:x;
}

/*************** **********
Displays or hides the calendar
*************** **********/
function showHideCal(c){
var ele = document.getEle mentById(c);
if (ele.style)
ele.style.displ ay = (ele.style.disp lay == '')?'none':'';
}

/*************** **********
Displays the next month - pass the
value to change months (0-11) by:
1 to get next month
-1 to get last month
*************** **********/
function changeMonth(n){
var x = +selectedMonth+ n;
if ( x > 11 ) {
x -= 12;
selectedYear -= -1;
}
if ( x < 0 ) {
x -= -12;
selectedYear -= 1;
}
initCal(selecte dYear,x);
}

/*************** **********
Displays the next year
*************** **********/
function changeYear(n){
initCal(+select edYear+n,select edMonth);
}

</script>

</head>
<body onload="
// If initialising from a server, call using current
// year and month (0-11) e.g. initCal(2005,1) ;
resetForm();ini tCal();
">
<button onclick="
showHideCal('ma inDiv');
if (this.blur) this.blur();
">Show/hide calendar</button>
<button onclick="resetF orm();">Reset
(back to this month)</button>
<br>
<button onclick="change Month(-1);">Previous Month</button>
<button onclick="change Month(1);">Next Month</button>
<button onclick="change Year(-1);">Previous Year</button>
<button onclick="change Year(1);">Next Year</button>

<div class="mainDiv" id="mainDiv" style="display: ;">
<div class="dateLabe ls">
<div class="monthLab el" id="monthLabel" ></div>
<br>
<form name="dateSel" action="">
<select name="monthSel" onchange="
initCal(
this.form.yearS el[this.form.yearS el.selectedInde x].text,
this.selectedIn dex
);
">
<!-- month options added by script -->
</select>
<select name="yearSel" onchange="
initCal(
this[this.selectedIn dex].text,
this.form.month Sel.selectedInd ex
);
">
<!-- year options added by script -->
</select><br>
<a href="#" onclick="
showHideCal('ma inDiv'); return false;
">Close</a>
</form>
<div class="dateLabe l" style="left:0em ">M</div>
<div class="dateLabe l" style="left:2em ">T</div>
<div class="dateLabe l" style="left:4em ">W</div>
<div class="dateLabe l" style="left:6em ">T</div>
<div class="dateLabe l" style="left:8em ">F</div>
<div class="dateLabe l" style="left:10e m">S</div>
<div class="dateLabe l" style="left:12e m">S</div>
<div class="dateHold er" id="dateBlock"> </div>
</div>
</body>
</html>

[Stimp]

Re: looking for a javascript calendar...

On Fri, 18 Feb 2005 RobG <rgqld@iinet.ne t.auau> wrote:[color=blue]
> Matt Kruse wrote:[color=green]
>> Stimp wrote:
>>[/color]
> Crikey Matt, is that really "The Simplest Possible
> Implementation Of A Calendar Popup" ?
>
> For the record, here's one that, to me, is considerably simpler
> - but I make no claims regarding "simplest possible"!!
>
> Oh, it doesn't use a popup...[/color]

<SNIP!>

Thanks I'll try that one if Matt's doesn't suit :)

[Stimp]

Re: looking for a javascript calendar...

On Thu, 17 Feb 2005 Matt Kruse <newsgroups@mat tkruse.com> wrote:[color=blue]
> Stimp wrote:[color=green]
>> preferably one that when clicked can update three date dropdowns (day,
>> month, year) like
>> http://www.visitdublin.com/carhire/avis.asp[/color]
>
> You can check out mine, which has an example of updating 3 fields just like
> at your URL:
> http://www.JavascriptToolbox.com/calendarpopup/[/color]

That actually looks perfect... Thanks!!

--

"I hear ma train a comin'
.... hear freedom comin"

[Dr John Stockton]

Re: looking for a javascript calendar...

JRS: In article <%3gRd.598$Ud4. 46497@news.optu s.net.au>, dated Fri, 18
Feb 2005 06:38:51, seen in news:comp.lang. javascript, RobG
<rgqld@iinet.ne t.auau> posted :
[color=blue]
> function getMonthDays(Y, M){
> if ( M==4 || M==6 || M==9 || M==10){
> return 30;
> } else if ( M==2 && Y%4==0){
> if ( Y%100!=0 || Y%400==0){
> return 29;
> }
> } else if ( M==2 ) {
> return 28;
> }
> return 31;
> }[/color]

So October has 30 days in .auau ?

After if (...) return there is no need for an else.

No need to test M==2 more than once.

function getMonthDays(Y, M) {
if ( M==4 || M==6 || M==9 || M==11) return 30
if ( M==2 ) return 28 + (Y%4==0 && ( Y%100!=0 || Y%400==0))
return 31 }

function getMonthDays(Y, M) {
return M==4 || M==6 || M==9 || M==11 ? 30 :
M==2 ? 28 + (Y%4==0 && ( Y%100!=0 || Y%400==0)) : 31 }

function getMonthDays(Y, M) {
return M==4 || M==6 || M==9 || M==11 ? 30 :
M==2 ? Y%4!=0 ? 28 : Y%100!=0 ? 29 : Y%400!=0 ? 28 : 29 : 31 }

function getMonthDays(Y, M){
return M==4 || M==6 || M==9 || M==11 ? 30 :
M!=2 ? 31 : Y%4!=0 ? 28 : Y%100!=0 ? 29 : Y%400!=0 ? 28 : 29 }


The first two make a redundant test for non-centurial leap years. The
rest would be efficient if compiled, but maybe not so when interpreted.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demo n.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demo n.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.

[Matt Kruse]

Re: looking for a javascript calendar...

RobG wrote:[color=blue]
> Crikey Matt, is that really "The Simplest Possible
> Implementation Of A Calendar Popup" ?[/color]

No, you misunderstood. Perhaps I'll change the wording. The link is to an
example page which is the simplest possible implementation of my calendar
popup. It's easier for some beginners to work from a very simple example.

--
Matt Kruse

http://www.JavascriptToolbox.com