69

Vista-like Ajax Calendar version 2 released

php xml ajax javascript vista calendar mootools datepicker
May 1, 2008 •

A new version of my Vista-like Ajax Calendar (vlaCalendar) has been released!

The vlaCalendar is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by use of the mootools javascript framework, AJAX, XHTML, CSS and PHP.

Key features:

  • Authentic Vista look-and-feel
    • Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
    • Smooth transition animations
  • Customizable features
  • Lightweight (compressed 8,50kB)

New features in version 2:

  • Datepicker functionality (!)
  • Both mootools version 1.11 and 1.2 beta2 compatible
  • Cleaner and more developer centered - easily editable - CSS, PHP and javascript code
    • Easily changeable date labels (e.g. different languages)
    • Easily stylable. Styles are created on top of the general style; the download include two example styles
    • Both normal and datepicker calendar can be instantiated multiple times

The Vista-like Ajax Calendar version 2 script is licensed under the Creative Commons Attribution- NonCommercial 3.0 License.

Documentation, including (code) examples, and the download are available here.

Update June 04, 2008: Added mootools 1.2 beta2 compatibility
Update June 10, 2008: Working on mootools release 1.2 compatibility
Update July 2, 2008: vlaCalendar version 2.1 released, compatible with mootools release 1.2
Update October 11, 2009: vlaCalendar's successor, Calendar Eightysix released

Javascript datepicker Calender Eightysix released
Add comment ↓

Comments (69)

h-a-r-v
May 7, 2008
My intuition told me to visit your site and voila! :) Looks like great work on demos. I guess I'll use the pickers as well now. Gonna report you if I find something improper, but my impression is you've taken care of everything. Catch ya later!
OrangeDes.
May 22, 2008
Cool! Thanks.
Jordy
May 28, 2008
Looks great, works great, i realy wan't to put it in my websites!
But there's a problem, i use the new beta (1.2beta2) from mootools, which has a lot of improvements.
Sadly this calendat isn't compatible with this version of mootools, even with mootools own compatibility mode turned on.
I tried to adapt yout code to work with 1.2, but failed :(

Any change there will be a update in your marvilous tool?
rcz
May 29, 2008
I tried to adapt yout code to work with 1.2, but failed :(
Any change there will be a update in your marvilous tool?

If 1.2 comes out of beta stage I will make the calendar compatible.

Thanks for your comments!
Frozensolid
May 30, 2008
Cant believe you made this yourself nooblet hehe,

Awesome stuff mate :)
matt
Jun 1, 2008
Great script!

I'd like to use it in an application I'm building and wanted to know if you'd consider granting commercial permission for my app.

thanks,
Zvijer
Jun 1, 2008
the best calendar i have ever seen, gr8 job there, but pity it wont work with mootools 1.2, cant w8 for for compatible version
rcz
Jun 4, 2008
Added mootools 1.2 beta2 compatibility due to high demand Face: Happy!
Lewis
Jun 7, 2008
It's an amazing calendar, but why make it use AJAX? It just seems pointless to me as Javascript can easily perform the same functions.

I'm pedantic about stupid things like this so I may just have to rewrite it to use pure Javascript Face: Happy
Martin
Jun 7, 2008
With witch version of Opera have you tested?

With Opera 9.5 it works fine, but Opera 2.6 / 2.7 dosen't work :(

The frame shows up but it's empty

http://b.imagehost.org/0115/Zwischenablage02.jpg
rcz
Jun 7, 2008
It's an amazing calendar, but why make it use AJAX? It just seems pointless to me as Javascript can easily perform the same functions.

I'm pedantic about stupid things like this so I may just have to rewrite it to use pure Javascript
You're quite right. The initial calendar was developed for use with database data.
The datepicker is just extra functionality to that initial version. Perhaps I'll make it clientside only once.
rcz
Jun 7, 2008
With witch version of Opera have you tested?

With Opera 9.5 it works fine, but Opera 2.6 / 2.7 dosen't work :(
I've tested it on my local machine with Opera 9.27, which worked fine. The online version with Opera 9.27 (the same code as the local version) doesn't work.

Thanks for reporting that, I'll look into it.

-update-
This site uses a HTML base tag and it seems that Opera 9.27 doesn't use this base information inside external javascript files (so with url rewriting it tries to access a non existing path). There is nothing wrong with the vlaCalendar script, just had to provide the absolute filepath to go around that bug. The examples are working now for Opera 9.27 .
Martin
Jun 7, 2008
Thank you!
tryer
Jun 8, 2008
when i type 1970 in textbox calendar show 2010. Firefox 3, windows xp.
rcz
Jun 9, 2008
when i type 1970 in textbox calendar show 2010. Firefox 3, windows xp.
The datepicker does not use on the textbox data.
The initial view of the datepicker is the current month. Would be nice as a new feature.
Jordy
Jun 11, 2008
Sorry for bugging you again. First of all, i like to thank you for the 1.2b2 version i asked you about earlier.
Yesterday mootools released version 1.2, so that was a great moment to try this datepicker in my site.

When i replace the 1.2b2 version with the official release however, i get a error in Firebug on line 85 (uncompressed) of vlaCal-v2.js: 

element.setHTML is not a function
[Break on this error] element.setHTML(data)

Do you know why? Thanx!
rcz
Jun 11, 2008
Yeah, the 1.2b2 version is not compatible with 1.2.

I'm working on a compatible version Face: Glasses
dede urus
Jun 13, 2008
First thanks for this great stuff.

A question from a noob:
Is there a way to disable past dates in the picker, so they cannot be selected?

Thanks again
weblizzer
Jun 13, 2008
Hi, i guess mootools had just release the stable version of 1.2 framework... i recently work on the beta version but it seems that the new version has just release so i will be replacing my library... hopefully your calendar would be compatible on the new version. and that would be great, such a great job ;)
Antoine Nicolas
Jun 16, 2008
Is it possible to define which view appear first, I mean by view : decade, year and month ?
rcz
Jun 16, 2008
Is it possible to define which view appear first, I mean by view : decade, year and month?

Not via the js class initialization properties. Sounds like a new feature in the next version.

You can however hard code it in inc/base.php:

Change 
<?php include "month.php"; ?>
in 
<?php $_POST["ts"] = time(); include "year.php"; ?>
or 
<?php $_POST["ts"] = time(); include "decade.php"; ?>
idiote
Jun 18, 2008
sample code: 

<html>
<head>
<script type="text/javascript" src="js/mootools-release-v1.11.js"></script>
<script type="text/javascript" src="js/vlaCal-v2.js"></script>
<link type="text/css" media="screen" href="style/vlaCal-v2.css" rel="stylesheet" />
</head>

<script type="text/javascript">
	window.addEvent('domready', function() {
	new vlaDatePicker('exampleI');
</script>

</head>
<body>

<input id="exampleI" type="text" style="width: 80px;" maxlength="10" />

</body>
</html>

Can someone give me the clue, i'm completely noob. That's simple code doesn't work on me..

Any help...
rcz
Jun 18, 2008
Can someone give me the clue, i'm completely noob. That's simple code doesn't work on me..

Learn some basics of HTML. A HTML page cannot have multitple head nodes, nor can it contain unclosed or unopened elements.

Your code should look like this: 
<html>
	<head>
		<script type="text/javascript" src="js/mootools-release-v1.11.js"></script>
		<script type="text/javascript" src="js/vlaCal-v2.js"></script>
		<link type="text/css" media="screen" href="style/vlaCal-v2.css" rel="stylesheet" />
		<script type="text/javascript">
		    window.addEvent('domready', function() {
					new vlaDatePicker('exampleI');
			});
		</script>
	</head>
	<body>
		<input id="exampleI" type="text" style="width: 80px;" maxlength="10" />
	</body>
</html>
mootools_fan
Jun 18, 2008
Hello,

I am working on a site wich will use a lot of mootools improuvement.

I have choosen your datepicker for my forms Face: Happy

do you know when your compatible version with v1.2 of mootools will be realeased?

Thanks for this fantastic toolFace: Glasses
rcz
Jun 18, 2008
do you know when your compatible version with v1.2 of mootools will be realeased?
It's nearly done. Fixing some small bugs.

Thanks for the comments Face: Laughing
mootools_fan
Jun 18, 2008
great Face: Wink

and thanks again
mootools_fan
Jun 19, 2008
If you need a beta tester for this new realease: ask me Face: Happy
Pat
Jun 19, 2008
hey,

your calendar is a great tool I am using now for my little website. i have got one question.
using php I am prefilling my input forms with a special date, for example a day in the past...

2008-03-12

if I now click on the input field to open your calendar (date picker!!), it shows the actual date (Today, "June 19th"!!), not the date specified in the input field. do you knwo what I mean. I have checked you js scripting yet. I am probably gonna extend your script one day, but this will take some time. maybe you have a quick idea how to realize this wish :)

thx anyway for your work!
greetz from germany
rcz
Jun 19, 2008
if I now click on the input field to open your calendar (date picker!!), [...] have a quick idea how to realize this wish :)
That feature has been requested before. I'll try to add the feature to the new 1.2 compatible release Face: Happy
mootools_fan
Jun 20, 2008
Have you got an idear of when it will be realeased? Face: Devil Grin
Jesper Laursen
Jun 24, 2008
Hey, Thanks for the cool calendar :)
Just one question. I want to add a event to the calendar element on change, but it does only work when I manualy enter some text into the field, and not when the calendarpicker are used.
Can you give me a reason why?
alin
Jun 24, 2008
Hi,
I was looking if it is possible to limit the selecting for a date period, other dates to be disabled from selecting, thanks!
Jesper Laursen
Jun 24, 2008
It could also be nice to have an easy way to preset the date.
Adrian Hodge
Jul 6, 2008
I'd also be interested in using this once you have it working on the 1.2 release. How is the update going?
rcz
Jul 6, 2008
I'd also be interested in using this once you have it working on the 1.2 release. How is the update going?

It's already released Face: Happy
Richard Castera
Jul 6, 2008
Great tool! You have been featured on Richard Castera
Robert
Jul 7, 2008
Great tool, I love the demos, but another noob question...
I have this code in a test page ...
<html>
<head>
<script type="text/javascript" src="js/jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/jslib/vlaCal-v2.1.js"></script>
<link type="text/css" media="screen" href="js/style/vlaCal-v2.1-apple_widget.css" rel="stylesheet" />
<script type="text/javascript">
window.addEvent('domready', function() {
new vlaDatePicker('exampleI');
});
</script>
</head>
<body>
<input id="exampleI" type="text" style="width: 80px;" maxlength="10" />
</body>
</html>

And i get this error ....
Error: this.arrowLeft has no properties
Source File: http://..../js/jslib/vlaCal-v2.1.js
Line: 144

On another page, wich has some other DOM stuff in the head i get a strange mootools error....
Error: $.element is not a function
Source File: http://.../js/jslib/mootools-1.2-core.js
Line: 1205

Any ideea anyone ?
rcz
Jul 7, 2008
Get Firefox with the Firebug add-on and check if the Ajax calls (console tab) return correct HTML snippets. If it can't find the left arrow it means the HTML is not loaded properly. I guess the paths are not correct, you don't run PHP or PHP gives some kind of error.

By the way: you need to include styles/vlaCal-v2.css also because this contains the basic styling data. The alternative styles are made on top of the basic style.
Robert
Jul 8, 2008
thanks for the ideeas, I've managed to fix it, actually I had to adapt some of the old js to mootools, it's working perfectly now.

I'm having another problem with filling the date I have stored in a mysql db, I mean the script overwrites the date i've filled in with php, with the current date.
rcz
Jul 9, 2008
Check the options. You can set prefillDate to false. Better is to provide your stored date with the script by providing the following object. 
prefillDate: { day: 12, month: 12, year: 2012 }

See Example VII.
Ramin
Jul 11, 2008
Richard, good clean work. I love the presetation too. I have a few questions:

1. Does/Will it support time picker too?

2. I use Java/Struts/Tiles. The main template has the header for all pages/tiles. Can I put the domready event handler in the body area for each input id that is needed?
rcz
Jul 17, 2008
Richard, good clean work. I love the presetation too. I have a few questions:
1. Does/Will it support time picker too?
2. I use Java/Struts/Tiles. The main template has the header for all pages/tiles. Can I put the domready event handler in the body area for each input id that is needed?
Name is Rick btw Face: Laughing

Your questions:
1. Could make an extension for that.
2. For what I know the domready event needs to be in the head. Check it with mootools. 'm not familiar with Java/Struts/Tiles; remember that PHP is required for the vlaCalendar. A PHP-less clientside plugin is on the way.
Ryan
Jul 18, 2008
Little bug post...

If you have a layout that specifies a font-weight in a class above your picker you picker will also have that format, so you need to explicitly define it. Also, if the line-height is specified outside wrong you can have it overflow outside the image background. I added this to the class shown and the problem was solved. Just thought I'd pass it along.

Thanks for a great component!

.vlaCalendarPicker {
font-weight: normal;
line-height: 15px;
}
Ramin
Jul 18, 2008
Could make an extension for that.
Please make the extension for a date/time picker.

...PHP-less client...
I don't wanna use PHP on server or client, so I'm looking forward to your PHP-less version.
bassiebas
Jul 25, 2008
I can't use this script without php. this sucks...
Killtek
Jul 28, 2008
A PHP-less version would be appreciated. Face: Happy
chicago
Jul 31, 2008
It doesn't seem like a good idea to take a client side widget and have it dependent on using a specific server side language.

It looks very nice though, except for the PHP bit....
raj
Aug 3, 2008


i am intested in date picker exmple III in this site
how to use this code
ppl could any one tell

help me out
Rory
Aug 12, 2008
Just thought you'd like to know that when you download the package and copy the code of your website the javascript files link to the directory inc instead of where they are which is jslib.

Anyway, thanks for an awesome tool
Regnareb
Aug 13, 2008
Don't work with Javascript disabled.
Taylor Cullen
Aug 14, 2008
^ Funny that... why would a javascript based calender not work when javascript is disabled?... hmmm... let me think.
Lauer
Aug 23, 2008
How can I secure that the calendar will be in a higher layer than select-boxes?

Can I in someway hide the selectboxes when the calendar is showed?
rcz
Aug 23, 2008
How can I secure that the calendar will be in a higher layer than select-boxes? Can I in someway hide the selectboxes when the calendar is showed?
Nope, that is a IE6 bug.
manik
Aug 26, 2008
Hi, this tool is exactly what I've been looking for. It has
- normal/datepicker possibility
- nice appereance
- and loading dates from PHP !

but unfortunately I cant get it working, i tried on localhost and web, too.

The paths are all right (I hope), but still I cant get any popup.
(and it throws me no errors...like it isnt activated at all:( )

Can anyone help me please?

The test-page is at: http://airsoft-mnisek.ic.cz/cal.html.
The files are in folder js/calendar/

Thanks for any advice.
rcz
Sep 5, 2008
Hi, this tool is exactly what I've been looking for. It has
- normal/datepicker possibility
- nice appereance
- and loading dates from PHP !

[..]

The test-page is at: http://airsoft-mnisek.ic.cz/cal.html.
The files are in folder js/calendar/

Thanks for any advice.

I do get errors with FireFox and the Firebug plugin; you didn't include mootools-1.2-core correctly (you miss the .js).
manik
Sep 6, 2008
Oh no, such a silly mistake :-/
Thx very much :)

Now its working great!
manik
Sep 6, 2008
And is it possible to leave the input field empty?
The default behaviour is to fill in the actual date, or there is prefillDate option...

I have the date input as optional value...
rcz
Sep 7, 2008
And is it possible to leave the input field empty? The default behaviour is to fill in the actual date, or there is prefillDate option... I have the date input as optional value...
Set prefillDate to false Face: Happy
manik
Sep 7, 2008
Thanks :) hope its all.
tom
Sep 9, 2008
this calendar would be perfect, but i'm using prototype in my project Face: Crying
Ian
Nov 11, 2008
Is there anyway to link 2 of these datepickers together so that when I set a date in pickDate I can get dropDate to automatically change to that date?

Ta, great script!
rantbox
Nov 28, 2008
rick

is it possible to buy a licence to use this in a commercial project?
Jeffrey
Jan 13, 2009
I am also interested in licensing for a commercial project. And I think the PHP feed event dates is JUST what I am looking for! If you choose to have a Javascript/client-side-only version, please do not drop support for the PHP AJAX feed version!
mr_hookie
Mar 13, 2009
i mod code for use in everyday
but i found Bug about PHP mktime()

mk time() will return null in some year

ex. year 2040 mktime() will error and
calendar fail Face: Grin
SchizoDuckie
Mar 23, 2009
I added an onchange event, since the datepicker renders the input onchange event useless.

You just add it to the options hash: 

 new vlaDatePicker('My_date_Element' , { onChange: function() { alert(this.value) }  });


Change these lines:

Add to new vlaDatePicker class properties: 

'onChange' : $empty,


change the if (!this.element) line below in the initialize function to the following: 

if(!this.element) { 			throw 'No (existing) element to create a datepicker for specified: new vlaDatePicker(ELEMENT, [options])'; 		} 		else 		{ 			this.element.addEvent('change', this.onChange); 		}


And finally, add at the bottom of th epick function before the function end: 

this.element.fireEvent('change', this.element.get('value'), 200);
Syam
Apr 27, 2009
Hi,

Can you please tell me whether this Vista Like Calender could support limiting of date-selection between a range? (eg. provision for selecting a date between a start and end date: say between 01-01-2009 and 31-01-2009)
ashwin hegde
May 3, 2009
Absolute Excellent Design
Michiel van der Blonk
Aug 19, 2009
When can we expect a fix for IE8? The navigation buttons don't work.
Alex
Feb 23, 2010
Keep posting stuff like this i really like it.

Add comment

Comment posting disabled.