Javascript datepicker Calender Eightysix released

Where ist the Download Link?

Here

glad to see some requested features added like min and max date .. nice nice .. will comment when i upgrade to this version..

heatly thanks for all the time and effor you put into this version

ehab

Great in theory but:

Whatever I do, I'm getting:

Date.defineParser is not a function

under Moo 1.2.3 (including all dependencies)

Also, the script completely fails on 1.2.4.

this.target is null

Date.defineParser is a function from the MooTools More library, and should work just fine.
My guess is that you didn't include the nessesary MooTools More dependencies.

Calender Eightysix has been developed for MooTools 1.2.3, and will soon have 1.2.4 compatibility.

Tested compatibly with MooTools 1.2.4 as well. Works like a charm.

Oskar Krawczyk, my guess is that you are using it wrong. Try the provided examples in the download.

I must say that I really like your calendar script.

However, I am stuck.

I am trying to use the calendar for two input fields in the same form

The first field is the arrival date and the second field is the departure date

When someone selects a date in the arrival date field, and then clicks in the departure date field, then the initial date in the departure popup calendar should be AFTER the previously selected arrival date, and it should not be possible to select a date that is before the arrival date.

Is this possible with your calendar?

Quite easy. It's something like this (made the example by heart, didn't test it):

var calendarA = new CalendarEightysix('calendarA', { 'pickFunction': function(date) { calendarB.options.minDate = date; calendarB.render(); } });
var calendarB = new CalendarEightysix('calendarB');

Hey guys,

Great calendar, i'm using it in a intranet site, and i'm tryin to set a date field to none date, so I need a field with your calendar but without any date filled, and if the user don't pick the calendar, the field remain empty. It is possible with you script?

Thanks,

Hey,

I've solve the problem, I've used 'prefill': false in the options array,

Thanks anyway,

Great calendar script

I love the Calendar script, but I am a little stuck. When I attempt an edit an item in my DB, I want my value from within the DB to appear in the date input field box with the calendar selection. However, if I add a value=$blah it won't load the calendar on this input field and only display the stored date from the DB.

It should take the value from the input textbox (if written to the html from the start) and, with the option linkWithInput set to true, should parse this to the initial date.
You can try to set the defaultDate as well. See the documentation; the options and parsing chapters.

Very nice tool, but I have encountered a few issues that are preventing me from using it.
1) When you blank out a date in the text box, the calendar then defaults to December 31, 1969. Wouldn\'t the current date be a better choice?
2) I like the hidden field concept, but it appears to work only when the script creates the field. It does so with out defining an ID, only name. If createHiddenInput = false but hiddenInputName is defined, it should still populate the field in my view.

I welcome your thoughts.
Jeff

Hi Jeffrey,

About your thoughts:
1) Totally agree . Good feature for the next release.
2) createHiddenInput is just an extra feature for ppl that want the date in another way then that it is shown. Only the name field can be changed because in my opinion id is not needed. If you do want extra functionality besides the createHiddenInput function you can either use a custom pickfunction or can always gain access to the hidden field with $$('input[name="name"]').

Hi,

Thanks for your great script :)
I\'d like to use it on several commercial projects (so i\'ll pay for commercial license) and I ran some tests before icluding it on my projects.
I found a bug linked to localization (reproduced on Firefox and Safari for Mac). I can\'t find the origin and I can\'t say if it\'s a Calender Eightysix bug, a Mootools bug or something wrong on my side.
Could you have a look to this test page : http://labs.adaptools.net/calendar-bug/
All instructions to reproduce the bug are on the page.
Manu

When I try to implement this, I got the following error...

Error: element is null
Source File: http://***********/js/mootools-1.2.3-core.js
Line: 1596

and it doesn't work. Anyone have any idea?

Nice calendar. You should put comments in the source code. Let's say i want to change date; it was difficult to find the right way.

c_from.selectedDate = new Date(2003,01,01);c_from.pick();

And my code above does not work

Many thanks, its working great.

Just released version 1.0.1 which fixes both bugs:

and Extra functionality for easy date changing has been added as well Senayi.

See the script page for the new version and updated documentation .

Wow! Let me start by saying that this date picker surpasses all the others I've come across in looks and usability. It worked perfectly and you've done a great job. Thank you for sharing this. Only thing I've seen elsewhere which would be a nice feature in the future was date range selecting between 2 calendars. (google analytics date picker for example).Thanks again.

@John, my best guess is that the script is unable to find one of your elements. Make sure the id is set properly on any elements your using with the calendar with and that you are passing the id's value to the calendar class.

Small issue here, I have a mindate set for the 18th of nov, and max set for the 9th of dec, but no arrow is available to move forward to december. can click the greyed 9 though, and can switch to month view, click december, click back to november, but again not forward to december.

Firgured out a quick solution to my issue.. on line 179 in the renderMonth method after emptying the container I inserted "this.currentContainer.store('month', this.viewDate.format('%m'));" to store the months id using mootools element store capabilities.. then only line 317 using mootools retrieve added "&& (this.currentContainer.retrieve('month')==this.format(this.options.maxDate, '%m'))" before the timestamp comparison. Can now move forward into december as expected.

Thx :) I'm going to try it tomorrow :)

Hello, I just wanted to let you know about another free calendar control that is easy-to-customize and works as a date picker, time picker or both date/time picker! Learn more at http://www.ama3.com/anytime/ and feel free to contact me directly with any questions or constructive criticism.

hi,
Sorry i try to use it in my intranet application but it does'nt work ):

i have the same motool core and more files and i have this error

this.target is null

how i can resolved that?

Ps : i'm french sorry for my english :$

Did you provide the first argument?
It should be the ID of an element, preferbly an input text element.

new CalendarEightysix('inputElement');

See the documentation, or provided examples in the download for correct uses.

I need to call a javascript function that takes a date object and determines when a traffic fine is due, taking into account weekends and company holidays. I'm having trouble doing this with the pickFunction option. Can you provide more detail on how to call a function and pass it the date selected on the calendar?

Bug.. I think I've found another bug.. I'm using the new v1.0.1 release with the LinkWithInput fix. However, the calendar's display is still NOT changing when the input field when manually modified either by the user or by a php $blah variable. Inside the javascript for my calender, I have

'format': '%d-%m-%Y',

. My input field reads dd-mm-yyyy. However when I change my day, or month or year manually, the calender is not self updating the display with it's results. But if I type the date in backwards in the input field yyyy-mm-dd it is updating the calendar display accordingly even though I have specified the date format to be %d-%m-%Y.. Any answer?

Hi Julian. This is no bug. The formatting doens't have anything to do with the parsing. If you change the date manually it will parse the value from the input to a date. This will use the Lang localization feature of Mootools. The standard is set to en-US which has m-d-y parsing. See the Localization chapter of the documentation. Try setting the date order correctly.

Hi, I have added the following into the javascript area directly below the closing comment that contains my calendar and configuration.

        MooTools.lang.set('en-GB', 'Date', {         months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],         days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],         dateOrder: ['date', 'month', 'year', '-']         });         MooTools.lang.setLanguage('en-GB');

However, it still will not change the calendar's displayed date when I manually modify or pull data from a php variable.

Example, even when using the above code, my date in the input field will show 20-11-2009. When I try to manually change this to 19-11-2009, it's not changing the display of the calendar at all and the calendar is still just showing the 20-11-2009. Again, if I remove the data in the input field and put in 2009-11-19, it will change it on the calendar.

Even on the given example.html within the download pack of v1.0.1.. the first calendar Example I does the same thing.. click on the localization date formatting down bottom to nl-NL.. Now go manually change the date of the first example calendar.. Does the same on that.. Date format is showing DD-MM-YYYY, but when you change the day or change the month or the year in that format, the calendar isn't changing with it..

Sorry rcz, I do not mean to spam, but this is what I just noticed.. when my date format is set to %d-%m-%Y, the calendar display will not change upon manual change of the input field.. But if I change it to %d/%m/%Y it will then work and the calendar display will change according to manual user entry or a php $ variable. Just simply won't work when a Hyphen - is used as a separator :( Can this be fixed?

Great stuff RCZ!

For the localization, we need to turn to the mootools stuff.

To achieve what Julian Krys mentions.
I use:
MooTools.lang.set('da-DK', 'Date', {
months: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
days: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
dateOrder: ['date', 'month', 'year', '-']
});
MooTools.lang.setLanguage('da-DK');

AND

Date.defineParser('%d-%m-%Y');

Before calling the new CalendarEightysix

Best Regards\\MaxEmil

Problems arise when JQuery is included in the page with Mootools. Different errors arise when either the compressed or the standard version of the js is used. The example.html does not seem to work either.

According to FireBug:
(example.html) window.addEvent is not a function
l is null
[Break on this error] }},after:function(m,l){if(!l.parentNode)...,bottom:function(m,l){l.appendChild(m);\n

The calendar works great when JQuery is commented out.

Great work though. Love the design. Cheers.

Hey guys,
kudos for the calendar, now, I don\'t know if this is the expected behavior but when you assign the pickFunction option inside the constructor, the function gets called. This would not be normal since, say the variable that holds the calendar and apparently being used in that function would be null or undefined since it has not been assigned the \"calendar\" object instance.
That would happen if you want to control 2 calendars according to their date.
A workaround is to instantiate the calendars and then do for both (i.e.):
cal_a.options.pickFunction = function(d){ // adjust_dates };

Hi,

What is the code to show the calendar after the dom is ready. I do not want to use it as a date picker of an input. I want to show off the calendar.

Also, how do I set and array of Dates to be clicked and other class name?

Thanks.

I was seeking something like Example V of Vista Calendar: http://dev.base86.com/app/pages/scripts/vista-like_ajax_calendar_version_2/

And I would like to have some dates to use different class style and be clicked to some link ID....

I was seeking something like Example V of Vista Calendar: http://dev.base86.com/app/pages/scripts/vista-like_ajax_calendar_version_2/

And I would like to have some dates to use different class style and be clicked to some link ID....

I can open the calendar.. I just can't set an array of dates to display in the calender using another style and be clickable...

also, I'm stuck with the calendar Allways open.. How can I close or hide the calender via mootools javascript??

Thanks in advance.

I'm using this:
$$('.calendar-eightysix').each(function(el, i){

el.dispose();

});

Now.. All I need is to set an Array of Dates to display in the Calendar.. Any help?!

Thanks.

I am interested in purchasing this product if I can figure out how to just select a month?
I don't need to know or deal with the days and it would be a confusing step for my users.
Cheers.

I can confirm what Leslie in comment 35 has said regarding the inclusion of jQuery.

If you have anything else on the page that needs jQuery the Calendar will not work, however should jQuery be removed everything works fine.

Various different errors occur when trying the current versions of MooTools and jQuery and also some backdated versions

However, love the Calendar ! and it would be great if a fix for this could be found.

It's great calendar picker. Is there a way that I can input the time too ? :D

Regarding the inclusion of two Javascript frameworks: this is not done, and will never be supported. You won't ride with two bicycles on a road would you ?

Time-picking will be a feature in the next release.

I noticed that the rendering of the calendar is slightly off in IE8. Are there plans for supporting IE8 in the near future?

Hello !
excellent script , but i noticed a bug in IE6 (XPSP2) The arrows doesnt show .... can it be fixed ?

I fixed a bug with the visibility of the left/right arrows when the min/max dates were outside the current calendar setting but inside the constraints of the current container. For example, set the maxDate to Dec 3, 2009, then go to November 2009 (arrow will be missing).

I also updated the code to add Today and None options in.

If anyone is interested in the code, email me. Thanks...

how i can use this calendar with
innerHTML Like this....

<--! This 's the page which in iframe (iframe style="display:none;") ,and innerHTML to main page in index.php at div tag -->

<script language="JavaScript" type="text/JavaScript">
function load_content () {
if (parent.document.getElementById('main_div')) {
parent.document.getElementById('main_div').innerHTML=document.getElementById('inner_frame').innerHTML;
}
if (!parent.document.getElementById('main_div')) {
window.location=('index.php') ;
}
}
</script>
<body onload="load_content()">
<div id="inner_frame">
<table cellpadding="0">

<tr>
<th>Example III</th>
<td>
<input id="exampleIII" name="dateIII" type="text" maxlength="10" style="padding-right: 22px;" />
<div class="picker inElement" id="exampleIII-picker"></div>
</td>
</tr>
</table>
</div>
</body>

A Problem is ....
In iframe it work good
But in main div which innerHTML from Above Script ,It does not working.

Sorry About My English.
Any one help me.

This calendar works with AJAX? I've tried several ways and I do not work, saludos

Hello!

First of all, congratulate you on your calendar!

I have a question however, is not programmed with jQuery?

Your CSS class names conflicts with mine. I had to edit your code to rename your classes from generics such as "header" to "calheader".

It's best you rename all your css classes with unique names to your calendar app, or conflicts will continue to arise.

Hi Jeff!

Thank you for your great Job.

Now i have a question (or problem maybe).

For the hidden field this datepicker created, when the user give or select a date and submit, will the value in this hidden field or on that visible input field be submitted?

This is important because i need to do something with date localization. That means the user can input date in localized format of his language, but when he submits, always only 'standard' format (that i defined for hidden field, i.e. YYYY-MM-DD) should be submitted. So i can just easily save it in database.

But so far i've tested, both value in hidden and visible field will be submitted, is ok, but wouldn't it be nice if only the value in hidden field is submitted and make our server backend think this value come from a normal visible field?

I have a big problem to change to date..?

Under Functions i found this source...

var calendar = new CalendarEightysix('e_date');
calendar.setDate('01.01.2000');

But it doenst work ?

How can i change the date..?
Does anybody can help me?

Thanks a lot!

I found antoher problem...
if i change prefill attribute to false

there will be a crazy default value

01.01.1970 <-- ?

is there antoher option i blank the form field @ start?

Hello,
I think this calendar is great. However, for me I am getting this error: \"this.target is null\" when the page has a MasterPage.
Otherwise the calendar work just fine on a page without MasterPage. What am I missing

Hi
This is a great calendar, thanks.

I have found one problem with Example IX when using drop downs. When I update the drop downs and then click on the calendar, the date is not updated to the new ones selected on the drop down.

In IE6, on the page where I use this, the browser CRASHES, when you change the url (go to another page or submit the form). Anybody else running into this? (Yes, I have a situation where I actually HAVE to use the dreaded IE6 - not by choice).

Hello,

We will like to use this for our commercial product and would like to purchase this. Before we can buy this, I would like to know if it supports the below features.

1) Can it just act like a month picker instead of showing the dates? We would like to use this to pass parameters to a monthly report

2) Is there a way to disable any future dates or months?

Your response will be greatly appreciated.

Thanks,
Sreekanth

Hello,

i found this great calendar and be very happy for that. Only one problem for me.

On the formular i will show the date in format : %d.%m.%Y and the output, if the user is pressing "send", should be in format %t.
How can i ge this work? Is it possible?
Can anyone help me?

1) This is currently being developed in the new version.
2) Yes. Set maxDate to 'today'.

You can create a hidden input element with createHiddenInput = true. This can contain a different format you will need, invisible for the user. See datepicker_calendar_eightysix.html#options

No. However a jQuery version will be developed in the near future.

It's on my big to-do-list

When do you add this amazing plugin to the MooTools Forge. Then it would be even more amazing

Hi, first of all, thx for scaring this with us. I love the calendar.

There is just one problem that I have found:

If you change: ('maxDate': null,) -> ('maxDate': 'today',)

Then you will not be allowed to go forward again, if the pick a day before: 2000.

How can that be? And what can I do to change this failure?

One suggestion which i implemented myself into your latest release is to transport the Calendar-Object itself by the pickFunction.

I just replaced "this.selectedDate" with "this"

this.options.pickFunction(this);

and within the pickFunction itself i can reference to all of the functions to have more options to work with.

As i #56 - is it possible to have a blank field - and how?

This looks fantastic!

Is there a way to make a certain set of dates selectable? Anotherwords, I would like to have more precision that minDate/maxDate.

Thanks!

#66

Where do you replaced this? I have't found any place in the code where it says anything about:

\"this.selectedDate\" - or - this.options.pickFunction(this);

?? :)

"var calendarA = new CalendarEightysix('calendarA', { 'pickFunction': function(date) { calendarB.options.minDate = date; calendarB.render(); } });
var calendarB = new CalendarEightysix('calendarB');" - I can't get this code to work, can anyone help me?

Hi, I have the same problem. I have just found out something to do:

var calendarA = new CalendarEightysix('calendarA', { 'minDate': 'today', 'pickFunction': function(date) { calendarB.options.minDate = date; calendarB.render(); } }); 			var calendarB = new CalendarEightysix('calendarB', { 'pickFunction': function(date) { calendarA.options.maxDate = date; calendarA.render(); } });         });

The only problem I have, is that I can't inset following, without the code crash!!

'prefill': 'null'

Can anyone help me?

var miDate = new Date(2010,01,01);
var calendar = new CalendarEightysix('calendar', { 'theme': 'default red', 'startMonday': true, 'format': '%d-%m-%Y', 'minDate': 'today', 'defaultDate': miDate, 'slideTransition': Fx.Transitions.Back.easeOut, 'draggable': true, 'offsetY': -4 , 'disallowUserInput' : true, 'toggler': 'calendar-picker'});

Hi there! Thanks for great stuff. Sorry for annoying, but it means stuff is REALLY useful or otherwise there wouldn't be any comments :)

But I have problem too, please help :(

var calendarS = new CalendarEightysix('t_start', { 'startMonday':'true', 'defaultView': 'year', 'format': '%d/%m/%Y' }); 

.......
//somewhere in onClick:
calendarS.setDate('06/05/2001');

It don't work for me completely.
I tried with/without 'format', MooTools.lang.set (..... dateOrder: ['date', 'month', 'year', '/']), and wonder what I have to do?

First impression: This is a very well designed calendar. Will have a look into its funcionality now. Cheers.

Really great calendar!
It works really good for me, thanks!

I had been used the previos version. It was very good. I am using the new version now. It also very good. Thanks a lot.

Hi, I have a problem using this calender. I need a way to define the default location to right beside the text box, as right now, the calender is appearing all over the place, and 1 unique place for each browser (so a simple offset does not work). I am thinking about doing a browser detect, but not really sure where the best place and the best way to make the change. (Just a side note, I haven't worked with javascript before)

An update to my problem from above, it seems the reason for it acting wierd is because it tries to auto center on the page. Therefore the calender moves as my browser's size change. Can anyone help me remove this feature (from css I'm guessing, but can't seem to find the "margin:auto" code)

By the way, this is a great program, and will work even better if I can get this problem out of the way. Thank you

How can i create the calendar object after this event? window.addEvent('domready'
i want to create a input with javascript and use the Calendar without reload the page.
thanks!

Sorry for basic question but have the same needs as "Pasci" above. That is to force the second calendar (called "departure") to select only from dates later than the first calendar (called "arrival").

I saw the suggested solution but am a newbie and don't know how or where to implement this.

Any help would be appreciated.

Hi, rcz,

There is a bug with the 'format' Option against 'linkWithInput' Option.

If you set 'format': '%d.%m.%Y' (which should be day.month.year), and change the date in input field like '10.03.2001' (day=10, month=3, year=2010), but the datepicker shows me the date 2001->october ->03.

somehow it always thinks '%d' is month.

Feature request:

"includedDates" array!

works same as "excluded" array function.

Great script, thanks

Add in this code for "includedDates" function:

line 126:

//Included dates
		if($defined(this.options.includedDates)) {
			var includedDates = [];
			this.options.includedDates.each(function(date) {
				includedDates.include(this.format(new Date().parse(date).clearTime(), \'%t\'));
			}.bind(this));
			this.options.includedDates = includedDates;
		}

line: 246

($defined(this.options.includedDates) && !this.options.includedDates.contains(this.format(date, '%t'))))

I have an application that adds and removes content with or without date-fields in a <div> element using ahah.js.

So far I have not been ale to use the calendar. This is primarily caused because the date-field is not available at the moment the js library is loaded.

Is there a way to circumvent this?

If you don't want the picker to change the "Hours" and "Minutes" you can add this to the "pick" function.

	pick: function(e) {
		if($defined(e)) {
			e.target.date.set("Hours", this.selectedDate.get("Hours")); // ADDED
			e.target.date.set("Minutes", this.selectedDate.get("Minutes"));
			this.selectedDate = e.target.date; // ADDED
			this.element.getElements('.selected').removeClass('selected');
			e.target.addClass('selected');
		}

I love this, but i have a problem. Once someone picks a date, i have to use that date to fill in 7 other dates on the form.
If i use "onblur" it works, but only if i click it and change the date, then click it again to have it run the javascript.

Here is the code im using:

					<input id="WeekEnding" name="date" type="text" style="width: 80px;" maxlength="10"   					 class="TS-Bold-Left"  					 		 onblur="ShowDates()" /> 

the ShowDates is the javascript im using to change the other date fields.

Any ideas?

Thanks!

First off, great calendar. I use it extensively.

Sorry to be dense, but could use some guidance about pickFunction.

What I have is multiple date fields on the page (eta for a list of products), each date field within a unique Ajax form. What I would like to accomplish is to submit that form upon a date pick.

It seems that the calendar does not trigger an onchange event, so I need another way to fire off the form when a date is picked.

Thanks in advance!

I can't make the custom event to work. It's always show that calendar.addEvent is not a function. I have checking on mootools version, included files, javascript code on & on, but really can't figure out why. See my code below:

mootools framework & calendar plugin:

<script type="text/javascript" src="mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="mootools-1.2.4.4-more.js"></script>
<script type="text/javascript" src="calendar-eightysix-v1.0.1.js"></script>
<link rel="stylesheet" type="text/css" href="calendar-eightysix-vista.css" media="all" />

script code:

window.addEvent('domready', function(){
    var calendar = new CalendarEightysix('calendar', {
        'alwaysShow': true,
        'injectInsideTarget': true,
        'theme': 'vista'
    });
    
    calendar.addEvent('change', function(date){
        //TODO
    });
    calendar.pick();
});

Any ideas?

Thanks in advanced.

Hi Brian B, the addEvent feature is for version 1.1 not 1.0.1. Download the latest version.

Thanks rcz! it's ok now.

Hi, nice work great calendar ! but it doesn't seem to work properly on iexplorer 6 (navigation buttons and month name doesn't appear and there is trouble with calendar position in the container). For info, with the vlacalendar there isn't this kind of problems . Can you fix that ? thanks !

Ah thanks I tried it on IE6 and you are right. The Vista and OSX Dashboard themes work properly though.
Death to IE6! This site is knowingly not working for IE6 at all ;). But the calendar should; will fix the default theme soon

Update The IE6 CSS is fixed. It was just a tiny fix. The change is embedded in the current version.

Hi! Big thanks for the calendar. I consider it is the best calendar for Mootools. I now use it in all my projects but i have stucked with some problems:

I one of my projects I need to restrict speciefic week dates and I use `excludedWeekdays` for it greatly. But I need also, in this case, if some week dates are already restricted to enable some dates too. If there is any method like `includeDates` to make something like:

CalendarEightysix.implement({ enable_includedDates:function(includedDates){ this.options.includedDates=includedDates; this.render(); }});

and then:

calendar.enable_includedDates([\"27.05.2010\",\"28.05.2010\"]);

to have \"27.05.2010\" and \"28.05.2010\" dates enabled together with excludedWeekDays.

By the way, the most used date format in Russia is \"%d.%m.%Y\" and tried to enable it with \"Mootools.lang.Dates\" but somehow the Calendar parses all dates of `excludedDates` and `defaultDate` as \"%m/%d/%Y\"

Hey, thank you for the calendar, it is a great tool, but I had to make a change.

On line 551 I changed this code:

case 't': return (date.getTime() / 1000).toInt();

to this:

case 't': return Date.UTC(date.get('fullyear'), date.get('month'), date.get('date')) / 1000;

Without that change the unix timestamp calculated was always 2 hours behind (mid-europe) the real date. It seems that it doesn't respect the timezone offset.

Hey, great calendar, but how I can had hours and minute to the date picker ?

Math.

Hi,
first, THANKS for the Calendar,

but i have some kind of problem,the year dose not appear , instead \"%Y\" is appear
and if you go year tag the title become \"NaN-NaN\"

what i have is master page with the links.
and in the some page i use the calendar.

Please help ASAP

My quess is that you didn't include the correct MooTools classes. (In this case the extended date class.) Try to use the MooTools files provided in the download.

Thanks for fast replay, My code :

In master Page:
<script type="text/javascript" src="../Calendar/js/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="../Calendar/js/mootools-1.2.4.4-more.js" ></script>
<script type="text/javascript" src="../Calendar/js/calendar-eightysix-v1.1.js"></script>
<link href="../Calendar/css/calendar-eightysix-v1.1-default.css"rel="stylesheet" type="text/css") />

In page:

window.addEvent('domready', function() {
new CalendarEightysix('<%= txtFirstName.ClientID %>', { 'theme': 'default blue','minDate': 'today' ,'prefill':false});
});

Thanks "rcz" again

i found the real problem, which is if the page contain "ScriptManager" the calendar will not load , and will give the "NaN-NaN" to year .

So please i really need help with this,
note : I cant remove the "ScriptManager" from the page !

Microsoft ASP.net is really nasty and I'm not going anywhere near it.
I think ASP.net uses it's own library which shouldn't be used along with MooTools anyhow. Try to load MooTools and the calendar after the ASP.net scripts. If this doesn't work I can't help you.

Hello ! I would use your calendar for a school project. The internaute must can be choose the start date of her ski package and so i would restrict the available dates at the begining of season (12/01/YYYY) to the end (03/31/YYYY).
But i would to apply this on few years.
For exemple on two seasons like this :
available on 12/01/2011 to 03/31/2012, and on 12/01/2012 to 03/31/2013.
That's my problem. I dont found how to do that.
Can you help me please ?
that's very important !
thanx

Sorry I wrote the stupid things...
For my example, it was :

01/12/2011 to 03/31/2012 .
And next season :
01/12/2013 to 03/31/2014.

So finaly you'll understand i just want propose to user to select a date of current season or of next season.

Me again... obviously still js/mootools challenged. I know I'm making this harder than it needs to be, but I'm missing the boat.

Got the latest version but still can't figure out how to fire my little form when a date is picked.

Each form is a single date field that needs to be submitted when a date is picked.

Thanks in advance.

Great! Do you have a rough idea of when the jQuery release will be and will the current license cover that release as well? I have to integrate a calendar into a new project and this is just perfect.

Awesome work

I really do like your calendar. I was looking for one on the net and then I found your old vista calendar that i liked it but when i saw your new one it was amazing!

Although your work is nice, I have a question to ask you. Why if I use google api your calendar doesn't work? Is it because there is some conflict between mootools and jQuery?

You can't use both Mootools and jQuery. I don't understand the connection Google API and jQuery though, could you explain?

The thing is that if you want to use google api for display a map chart you need to include jquery library because this chart uses jquery so I'm unable to use your calendar

Have you created this calendar with jquery?

Great calendar, I just had a suggestion that maybe toy could add a class to make the days header stylable. In the mean time you can use div.c86-month > div:first-child { font-weight:bold; } to style the days.

The default and vista theme are still not working well in IE6. It will be pretty great to fix them.Thanks.

May be there is something wrong with the parameters, \'maxdate\' and \'excludedWeekdays\', when I use them at the same time, just as below

new CalendarEightysix(\'example\', { \'excludedWeekdays\': [0, 6], \'maxdate\': \'today\' });

Then, when it comes the weekends, Saturday or Sunday, Calender Eightysix can\'t work right.

hi there!

does anyone know if this calendar aloows to use with an overlib feature??

basically what i want to do is when hovering on specif dates (let's say 13th of january) a small pop up window appears with extra info!

does anyone knows how to make this happen?

cheers

ps - i'm already trying to use overlib.js but i can't make it work with the calendar

Dear Eightysix Developers:

I have written a small article regarding this application and other JavaScript calendars:

https://www.icts.uiowa.edu/confluence/display/ICTSit/JavaScript+Date+Section+Calendars

Regarding features, have you given any thought regarding adding a time option? It would be nice to be able to easily specify a specific time of day, along with the date, for example:

2009-11-14 13:01

There's still an issue with IE6. If there is a <select> element around the calendar they "bleed-through" the calendar. In addition, the arrow keys do not seem to be working in IE6. Firefox is awesome and it works so well but IE6 is another issue.

I have a suggestion adding a new function.
I edited the CSS file and I made RED the excludedWeekdays and the excludedDates customizing the "non_selectable" selector, but I would to click on these dates!

How can I make RED the excluded dates and selecting them at the same time?

Thanks and great work!

Fabio
Creations Garage

Do you have a recommended way of triggering a function on a month change? The addEvent.rendermonth triggers when the first one is created, but what I want is only if the month is changed from the default.

Thanks,
Tony
great calendar!

I need to have a tooltip or title on the dates with more than 1 line. (day.set('title','I want multiline\nsecondline') I've tried using <br> \n...neither worked. Is this possible somehow? Can someone point me to where in calendar or mooltools or where ever the code might be that controls this?

P.S.
I have figured out a way to do what I needed for the month change (previous post), mainly by adding a new function....

getViewDate: function ()
{
return this.viewDate;
}

I then check this on a rendermonth against a variable I stored on first page load

again, I came up with a solution to the multi-line tool tip....again, upon iteration through the days on the rendermonth function, I add 'mouseover' and 'mouseout' events for each day that I have an event that I want the multi-line tooltip...events set up in an array(32) . Then I use the technique described in

http://www.texsoft.it/index.php?c=software&m=sw.js.htmltooltip&l=it

to actually do it. Only issue is that I have to create a hidden div for each day that there is an event (done dynamically via server script). but works.

Dose anyone know why when I submit the form my date reverts to 01-01-1970? It happens if i try to display a past date.

I have no idea how to use the getDate function... The calendar is created with the Domready - how do I then get a date from an existing calendar on say a later onclick event?

Someone - PLEASE explain!

Hi all,

A few people on here were wondering how to implement a date range picker - e.g. if you were booking a hotel using 2 calendars, one for arrival, one for departure.

The problem is with linking the 2 calendars so that when, say, the arrival date is set further into the future than the departure date is currently set at, then the departure date alters accordingly.

And likewise backwards..

I\'ve spent all bloody day on this problem and I have a solution which is working in IE and FF (all I can test locally at present).

So here it is, Explanation first..

Firstly - rcz had hinted at solution in the comments above, but people couldn\'t get it to work - and as far as I can see it won\'t.

This is because he\'s referencing the second calendar in the pick function of the first before the 2nd calendar exists - so it crashes. (The pick is happening when calendar1 initializes).

The solution is to set up the PickFunction for each calendar in separate code before hand, then created the 2 calendars without the pick function declaration, then after the 2 calendars exist, attach the defined functions to them accordingly.

In my code I was using the exampleIX with the additional drop downs, and in order to post the 2 dates to the next page (in my case a 3rd party availability service) I set up a couple of hidden fields.

Anyway - here\'s the code (it works):

(Where dothis() is being called by a simple button on the page acting as a submit)

function dothis() {
var checkindate= $(\'checkinb\').value + \"/\" + $(\'checkina\').value + \"/\" + $(\'checkinc\').value;
var checkoutdate= $(\'checkoutb\').value + \"/\" + $(\'checkouta\').value + \"/\" + $(\'checkoutc\').value;

$(\'checkin\').value = checkindate;
$(\'checkout\').value = checkoutdate;
document.bookingform.submit();
}

</script>
<script type=\"text/javascript\">

var checkincalPF = function(date) {
$(\'checkina\').set(\'value\', date.get(\'month\') + 1);
$(\'checkinc\').set(\'value\', date.get(\'year\'));

var outdate = checkoutcal.selectedDate;
var nextday = date;
nextday.setDate(nextday.getDate()+1);

if (outdate < nextday) {
checkoutcal.setDate(nextday, false);
$(\'checkouta\').set(\'value\', nextday.get(\'month\') + 1);
$(\'checkoutb\').set(\'value\', nextday.get(\'date\'));
$(\'checkoutc\').set(\'value\', nextday.get(\'year\'));
}
};

var checkoutcalPF = function(date) {
$(\'checkouta\').set(\'value\', date.get(\'month\') + 1);
$(\'checkoutc\').set(\'value\', date.get(\'year\'));

var indate = checkincal.selectedDate;
var prevday = date;
prevday.setDate(prevday.getDate()-1);

if (indate > prevday) {
checkincal.setDate(prevday, false);
$(\'checkina\').set(\'value\', prevday.get(\'month\') + 1);
$(\'checkinb\').set(\'value\', prevday.get(\'date\'));
$(\'checkinc\').set(\'value\', prevday.get(\'year\'));
}
};

window.addEvent(\'domready\', function() {
checkincal = new CalendarEightysix(\'checkinb\', {
\'pickFunction\': function(date) {
$(\'checkina\').set(\'value\', date.get(\'month\') + 1);
$(\'checkinc\').set(\'value\', date.get(\'year\'));
},
\'linkWithInput\': true, \'format\': \'%d\', \'toggler\': \'checkin-picker\', \'offsetY\': -4, \'offsetX\': 76, \'minDate\': \'today\', \'defaultDate\': \'today\'
});

checkoutcal = new CalendarEightysix(\'checkoutb\', {
\'pickFunction\': function(date) {
$(\'checkouta\').set(\'value\', date.get(\'month\') + 1);
$(\'checkoutc\').set(\'value\', date.get(\'year\'));
},
\'linkWithInput\': true, \'format\': \'%d\', \'toggler\': \'checkout-picker\', \'offsetY\': -4, \'offsetX\': 76, \'minDate\': \'tomorrow\', \'defaultDate\': \'tomorrow\'
});
checkincal.options.pickFunction = checkincalPF;
checkoutcal.options.pickFunction = checkoutcalPF;

});

</script>

I hope that helps someone - apologies if what I\'ve written is stupid or overkill or could have been achieved more easily - I\'ve not been programming for about 8 years and it\'s the best this weary old brain can do today!

The \'real\' solution I\'m sure is to extend the class - but me and OOP are not friends!

In my solution above you'll have to remove the escape backslashes from the code which this site has just added!

function dothis() { var checkindate= $('checkinb').value + "/" + $('checkina').value + "/" + $('checkinc').value; var checkoutdate= $('checkoutb').value + "/" + $('checkouta').value + "/" + $('checkoutc').value; //alert("here");  $('checkin').value = checkindate; $('checkout').value = checkoutdate; document.bookingform.submit(); }  </script> <script type="text/javascript"> 	 var checkincalPF = function(date) { $('checkina').set('value', date.get('month') + 1); $('checkinc').set('value', date.get('year'));  var outdate = checkoutcal.selectedDate; var nextday = date; nextday.setDate(nextday.getDate()+1);  if (outdate < nextday) { //checkoutcal.options.minDate = date; //checkoutcal.render(); //checkoutcal.pick(); checkoutcal.setDate(nextday, false); $('checkouta').set('value', nextday.get('month') + 1); $('checkoutb').set('value', nextday.get('date')); $('checkoutc').set('value', nextday.get('year')); } };  var checkoutcalPF = function(date) { $('checkouta').set('value', date.get('month') + 1); $('checkoutc').set('value', date.get('year'));  var indate = checkincal.selectedDate; var prevday = date; prevday.setDate(prevday.getDate()-1);  if (indate > prevday) { checkincal.setDate(prevday, false); $('checkina').set('value', prevday.get('month') + 1); $('checkinb').set('value', prevday.get('date')); $('checkinc').set('value', prevday.get('year')); } };  		window.addEvent('domready', function() { 			checkincal = new CalendarEightysix('checkinb',	 { 				'pickFunction': function(date) { 					$('checkina').set('value', date.get('month') + 1); 					$('checkinc').set('value', date.get('year')); 				}, 				'linkWithInput': true,  'format': '%d', 'toggler': 'checkin-picker', 'offsetY': -4, 'offsetX': 76, 'minDate': 'today', 'defaultDate': 'today' 			}); 			 			checkoutcal = new CalendarEightysix('checkoutb',	 { 				'pickFunction': function(date) { 					$('checkouta').set('value', date.get('month') + 1); 					$('checkoutc').set('value', date.get('year')); 				}, 				'linkWithInput': true,  'format': '%d', 'toggler': 'checkout-picker', 'offsetY': -4, 'offsetX': 76, 'minDate': 'tomorrow', 'defaultDate': 'tomorrow' 			}); 			 			 			checkincal.options.pickFunction = checkincalPF; 			checkoutcal.options.pickFunction = checkoutcalPF;  			//$('checkinb').addEvent('click', function() { alert(checkincal.selectedDate); }); 			//$('checkoutb').addEvent('click', function() { alert(checkoutcal.selectedDate); }); 			 //var calendarA = new CalendarEightysix('calendarA', { 'pickFunction': function(date) { calendarB.options.minDate = date; calendarB.render(); } });  //var calendarB = new CalendarEightysix('calendarB'); 		});	  	</script>

As MooTools.lang has been deprecated and replaced by Locale in MooTools 1.3, do you have any indication when a new version which supports MooTools 1.3 Locale will be available?