OrangeDes. 
rcz 
Ramin 
Taylor Cullen
dev.base86 and blog software © 2008 R. Schoo. All other copyrights are property of their respective owners.
Proudly powered by the lightweight MooTools JavaScript framework. Icons by FamFamFam.
Vista-like Ajax Calendar version 2 released
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
BookmarkComments (57)
h-a-r-v •
h-a-r-v<at>o2.pl •
May 7, 2008 08:08 GMT •
#1
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!
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?
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?
I tried to adapt yout code to work with 1.2, but failed :(
Any change there will be a update in your marvilous tool?
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!
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,
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,
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
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
I'm pedantic about stupid things like this so I may just have to rewrite it to use pure Javascript
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
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
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.
I'm pedantic about stupid things like this so I may just have to rewrite it to use pure Javascript
The datepicker is just extra functionality to that initial version. Perhaps I'll make it clientside only once.
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.
With Opera 9.5 it works fine, but Opera 2.6 / 2.7 dosen'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 .
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.
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:
Do you know why? Thanx!
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!
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
A question from a noob:
Is there a way to disable past dates in the picker, so they cannot be selected?
Thanks again
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 ;)
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"; ?>
<?php $_POST["ts"] = time(); include "year.php"; ?>
<?php $_POST["ts"] = time(); include "decade.php"; ?>
sample code:
Can someone give me the clue, i'm completely noob. That's simple code doesn't work on me..
Any help...
<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...
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>
Hello,
I am working on a site wich will use a lot of mootools improuvement.
I have choosen your datepicker for my forms
do you know when your compatible version with v1.2 of mootools will be realeased?
Thanks for this fantastic tool
I am working on a site wich will use a lot of mootools improuvement.
I have choosen your datepicker for my forms
do you know when your compatible version with v1.2 of mootools will be realeased?
Thanks for this fantastic tool
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
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
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
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
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?
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?
Hi,
I was looking if it is possible to limit the selecting for a date period, other dates to be disabled from selecting, thanks!
I was looking if it is possible to limit the selecting for a date period, other dates to be disabled from selecting, thanks!
I'd also be interested in using this once you have it working on the 1.2 release. How is the update going?
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
Great tool! You have been featured on Richard Castera
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 ?
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 ?
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.
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.
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.
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.
Check the options. You can set prefillDate to false. Better is to provide your stored date with the script by providing the following object.
See Example VII.
prefillDate: { day: 12, month: 12, year: 2012 }
See Example VII.
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?
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?
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 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?
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.
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;
}
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;
}
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.
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....
It looks very nice though, except for the PHP bit....
i am intested in date picker exmple III in this site
how to use this code
ppl could any one tell
help me out
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
Anyway, thanks for an awesome tool
^ Funny that... why would a javascript based calender not work when javascript is disabled?... hmmm... let me think.
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?
Can I in someway hide the selectboxes when the calendar is showed?
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.
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.
- 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.
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.
- 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).
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...
The default behaviour is to fill in the actual date, or there is prefillDate option...
I have the date input as optional value...
Add comment
Latest tags
Related articles
Pinned articles
Latest articles
