122

Javascript datepicker Calender Eightysix released

Oct 11, 2009

After a stunning 55,000 downloads of vlaCalendar version 2 and two years after vlaCalendar version 1, the Vista-like Ajax Calendar is finally ready for its successor, Calender Eightysix!

Where the vlaCalendar fails, having disadvantages like making use of AJAX and PHP, Calendar Eightysix succeeds; being completely build from scratch with pure javascript, making use of some of the superb features the latest MooTools javascript framework has to offer.

Calendar Eightysix is an unobtrusive developer friendly javascript calendar and datepicker offering a better user experience for date related functionalities.

Key features:

  • Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
  • Highly and easily customizable
  • Packed with three themes
  • Lightweight (9.5 kB compressed)
  • Purely javascript; AJAX-less and no PHP needed
     

Examples, documentation and the download
are available
here.

Update November 11, 2009: Version 1.0.1 released.
Update April 27, 2010: Version 1.1 released.

Javascript datepicker Calender Eightysix released
Add comment ↓

Comments (122)

kiff
Oct 14, 2009
Where ist the Download Link?
rcz
Oct 14, 2009
ehab
Oct 19, 2009
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 Face: Happy

ehab
Oskar Krawczyk
Oct 27, 2009
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

rcz
Oct 27, 2009
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.
rcz
Oct 29, 2009
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.
Pasci
Oct 30, 2009
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?
rcz
Oct 31, 2009
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');
Cristian Tirado
Oct 31, 2009
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,
Cristian Tirado
Oct 31, 2009
Hey,

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

Thanks anyway,

Great calendar script
Julz Andrews
Nov 3, 2009
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.
rcz
Nov 4, 2009
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.
Jeffrey Ropp
Nov 8, 2009
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
rcz
Nov 8, 2009
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 Face: Happy. 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"]').
Manu Bes
Nov 10, 2009
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
John
Nov 11, 2009
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?
senayi
Nov 11, 2009
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();
senayi
Nov 11, 2009
And my code above does not work Face: Monkey
Daniel Silva
Nov 11, 2009
Many thanks, its working great.
rcz
Nov 11, 2009
Just released version 1.0.1 which fixes both bugs:

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.
and
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?
Extra functionality for easy date changing has been added as well Senayi.

See the script page for the new version and updated documentation Face: Monkey.
Kevin A
Nov 12, 2009
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.
Kevin A
Nov 12, 2009
@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.
Kevin A
Nov 12, 2009
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.
Kevin A
Nov 12, 2009
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.
Manu Bes
Nov 12, 2009
Just released version 1.0.1 which fixes both bugs:
Thx :) I'm going to try it tomorrow :)
Andrew M. Andrews III
Nov 14, 2009
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.
nounet
Nov 17, 2009
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 :$
rcz
Nov 17, 2009
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.
Randy
Nov 18, 2009
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?
Julian Krys
Nov 19, 2009
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?
rcz
Nov 19, 2009
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 view source print? 1.'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.
Julian Krys
Nov 19, 2009
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.
Julian Krys
Nov 19, 2009
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..
Julian Krys
Nov 19, 2009
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?
MaxEmil
Nov 25, 2009
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
Leslie
Nov 25, 2009
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.
Steve
Nov 25, 2009
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 };
lq.
Nov 27, 2009
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.
lq.
Nov 27, 2009
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....
lq.
Nov 27, 2009
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....
lq.
Nov 27, 2009
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.
lq.
Nov 27, 2009
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.
diogenes
Dec 2, 2009
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.
bob
Dec 11, 2009
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.
Dimas
Dec 12, 2009
It's great calendar picker. Is there a way that I can input the time too ? :D
rcz
Dec 13, 2009
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 Face: Glasses?

Time-picking will be a feature in the next release.
Scott
Dec 17, 2009
I noticed that the rendering of the calendar is slightly off in IE8. Are there plans for supporting IE8 in the near future?
Damien
Dec 18, 2009
Hello !
excellent script , but i noticed a bug in IE6 (XPSP2) The arrows doesnt show .... can it be fixed ?
Scott
Dec 21, 2009
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...
Neopalm
Dec 21, 2009
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.
reycanedo
Dec 23, 2009
This calendar works with AJAX? I've tried several ways and I do not work, saludos
Pere
Jan 5, 2010
Hello!

First of all, congratulate you on your calendar!

I have a question however, is not programmed with jQuery?
Richard Catto
Jan 6, 2010
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.
HJM
Jan 8, 2010
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?
machIT
Jan 8, 2010
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!
ToM
Jan 8, 2010
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?
MB
Jan 11, 2010
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
Nigel
Jan 12, 2010
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.
jay
Jan 13, 2010
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).
Sreekanth
Jan 21, 2010
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
MarkSpoon
Jan 24, 2010
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?
rcz
Jan 28, 2010
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?
1) This is currently being developed in the new version.
2) Yes. Set maxDate to 'today'.

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

I have a question however, is not programmed with jQuery?
No. However a jQuery version will be developed in the near future.
rcz
Feb 2, 2010
When do you add this amazing plugin to the MooTools Forge. Then it would be even more amazing
It's on my big to-do-list Face: Monkey
Arian
Feb 2, 2010
When do you add this amazing plugin to the MooTools Forge. Then it would be even more amazing
Alexander Christensen
Feb 5, 2010
Hi, first of all, thx for scaring this with us. I love the calendar.Face: Happy

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?
Fli7e
Feb 9, 2010
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.
Aage
Feb 10, 2010
As i #56 - is it possible to have a blank field - and how?
Stefan
Feb 12, 2010
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!
Alexander Christensen
Feb 13, 2010
#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?
Henrik
Feb 13, 2010
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?
Eduard
Feb 25, 2010
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'});
Putnik
Mar 2, 2010
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?
Helfer
Mar 8, 2010
First impression: This is a very well designed calendar. Will have a look into its funcionality now. Cheers.
Alan Ihre
Mar 12, 2010
Really great calendar!
It works really good for me, thanks!
Face: Happy
cemilcelik84
Mar 16, 2010
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. Face: Grin
Lei Wu
Mar 17, 2010
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)
Lei Wu
Mar 17, 2010
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
Julius
Mar 18, 2010
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!
Mark
Mar 18, 2010
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.
HJM
Mar 26, 2010
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.
Will
Apr 1, 2010
Feature request:

"includedDates" array!

works same as "excluded" array function.

Great script, thanks
Will
Apr 2, 2010
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'))))
Erik
Apr 3, 2010
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?

Remco Tolsma
Apr 9, 2010
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');
		}
Romanda
Apr 14, 2010
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!
Tio Loco
Apr 24, 2010
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!
Brian B.
Apr 26, 2010
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.
rcz
Apr 26, 2010
Hi Brian B, the addEvent feature is for version 1.1 not 1.0.1. Download the latest version.
Brian B.
Apr 26, 2010
Thanks rcz! it's ok now. Face: Happy
Raoul in ze zone
Apr 28, 2010
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 !
rcz
Apr 29, 2010
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 Face: Happy

Update The IE6 CSS is fixed. It was just a tiny fix. The change is embedded in the current version.
moogeek
May 6, 2010
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\"
thomasd
May 6, 2010
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.
Math43
May 12, 2010
Hey, great calendar, but how I can had hours and minute to the date picker ?

Math.
Hiyasat
May 16, 2010
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
rcz
May 16, 2010
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.
Hiyasat
May 16, 2010
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});
});
Hiyasat
May 16, 2010
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 !
rcz
May 16, 2010
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.
Florent
May 24, 2010
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
Florent
May 24, 2010
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.
Tio Loco
May 28, 2010
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.
Barry Mieny
Jun 4, 2010
No. However a jQuery version will be developed in the near future.

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.
Me!
Jul 1, 2010
Awesome work Face: Shocked

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?Face: Crying
rcz
Jul 1, 2010
Awesome work Face: Shocked 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?Face: Crying
You can't use both Mootools and jQuery. I don't understand the connection Google API and jQuery though, could you explain?
Me!
Jul 1, 2010
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 Face: Sad

Have you created this calendar with jquery?
Nigel
Jul 6, 2010
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.
dfs
Jul 9, 2010
The default and vista theme are still not working well in IE6. It will be pretty great to fix them.Thanks.
dfs
Jul 10, 2010
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.
joao
Aug 7, 2010
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
Fred McClurg
Aug 18, 2010
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
Jack Green
Aug 21, 2010
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.
Creations Garage
Sep 10, 2010
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

tony
Sep 22, 2010
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!
Tony
Sep 24, 2010
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
Tony
Sep 24, 2010
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.
Samantha
Sep 30, 2010
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.
Stella
Oct 13, 2010
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!
Stella
Oct 13, 2010
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!
stella
Oct 13, 2010
In my solution above you'll have to remove the escape backslashes from the code which this site has just added!
stella
Oct 13, 2010
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>
Colani
Jan 14, 2011
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?

Add comment

Comment posting disabled.