40

Vista-like Ajax Calendar

Oct 17, 2007

When I first saw the new Windows Vista taskbar calendar I was amazed by its slick look and diligence. Knowing Microsoft they probably stole the idea somewhere. Heck, who cares.

I created a web version of the calender using the MooTools javascript framework, Ajax, XHTML, CSS and PHP. Key features: animations in transition, authentic Vista-look, quick navigation by jumping back and forth between months, years and decades without drop-down boxes and weeks can start with Monday or Sunday. Check it here!

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

Update 24 October 2007: A datepicker version is currently in development.
Update 1 May 2008: Version 2 has been released!
Update October 11, 2009: VlaCalendar's successor, Calendar Eightysix released

Add comment ↓

Comments (40)

Bdesign
Sep 30, 2007
Very cool one! Thanks for sharingFace: Happy
Bdesign
Sep 30, 2007
Is the bookmark bar made by you? If yes i've done a very good job.
rcz
Sep 30, 2007
Yups, made that Face: Glasses
steve
Oct 10, 2007
can i use it for a final college project? plzzz
Peter
Oct 10, 2007
Would be cooler if you could use it as a date picker.
rcz
Oct 11, 2007
can i use it for a final college project? plzzz
You can use it in your college project if it fits within the Creative Commons Attribution-NonCommercial 3.0 License.

Would be cooler if you could use it as a date picker
It can easily be implemented as a date picker. Maybe the next step?
h-a-r-v
Dec 13, 2007
I'd like to use it as news archive date picker (after selecting a date it filters news page showing the picked date news as the newest and few before), but the guy who works for my (doing php/mysql suff) doesn't really know where to begin. Any help, literally - ANY help? :)
rcz
Dec 17, 2007
I'd like to use it as news archive date picker (after selecting a date it filters news page showing the picked date news as the newest and few before), but the guy who works for my (doing php/mysql stuff) doesn't really know where to begin. Any help, literally - ANY help? :)

Well, month.php contains the click able days so in the for loop you can add a link with a timestamp or something.

For example:
(editing line 46)
//Changing
echo "<td".($i_ts == $t_ts ? " class="today"" : "")."$i</td>";
//Into
echo "<td".($i_ts == $t_ts ? " class="today"" : "")."><a href="yourpage.php?timestamp=$i_ts">$i</a></td>";
Not Bad
Dec 29, 2007
This looks good but the animation is wrong. It may sound as if I'm being picky but in the Vista calendar its quite important as it highlights where the user has come from.

For example, clicking on a month shows all the months in a year but the animation makes it appear as if the user has zoomed out of that month to the year view.
rcz
Jan 1, 2008
Zooming was not really possible. Instead I used fading.
h-a-r-v
Jan 15, 2008
Thanks a lot rcz. I've been just looking on it and figured it out myself and came here to ask another question and saw your answer ;-) We've got a situation here and i'd like to ask: what can be a reason for days not being displayed? Looks like calendar works, but day names and numbers are not there (hovering works normal), there's just no font. Can it be a server-side problem?
h-a-r-v
Jan 15, 2008
Ok. Looks like the problem takes place under FF only. I dunno why. Opera shows it ok, while IE7 displays a veeery little font. I dunno why. I didn't change css at all. I'll try playing with this a little and will let you know.
h-a-r-v
Jan 15, 2008
Ok. Found it. Adding font-size: 12px; to .month th and .month td solved it. It seems that under some layout circumstances that additional styling is needed.
rcz
Jan 15, 2008
Sweet. If you got a final version online somewhere let me know Face: Happy.
h-a-r-v
Jan 17, 2008
I will, somewhere around march :-)

Btw. I forgot to mention the class .year td needs font-size specified as well. I'd suggest you at least quietly implement that to the code. I guess it's a rare bug, but still..
h-a-r-v
Feb 18, 2008
Hi, me again. Not giving the adress yet - portal release date will surely be delayed. I'm currently working on changing calendar colors so it fits the design. However.. Users will be able to change design color by changing css and what I'd like to point is the wrong way of handling arrows (simple, but not flexible). Using a block div would make them controled via css just like whole the rest (and as EVERY design element should be - these are not content images) and the mouseover effect should be written using mootools in the .js file. Such solution would be valid, clear and flexible. :-) Gonna do it myself now..

You've said how to place links and I'm pretty sure everyone will do so, but what you haven't preticted is that these links, when added, change font layout do default link style (blue, underlined, etc.). Classes handling them and making exact as normal font in <td>'s should be declared by default so nobody has to write them on their own.

Another little suggestion is adding 'cursor: pointer' to all hover classes.

I guess that's all for now ;-)
h-a-r-v
Feb 19, 2008
For Christ's sake.. how come one can translate days while months are taken from the server and you can't do nothing about their names? ;] I give up, that's not my job. But at least it looks nice finally :-) Laters.
rcz
Feb 26, 2008
Your right about the arrows. The rest is a bit out of line, it seems you don't want to put to much effort in it Face: Glasses.

Anyways the next version will be pretty much be totally different; more flexibel, functional and well written. But my time is scarce and I got so much cool projects I don't know where to start Face: Happy.

Keep up the effort!
h-a-r-v
Mar 6, 2008
Well.. I don't mind putting any effort, I'm just saying this more bug-fixing and I'm pointing them out for you :-)

Here's another one:

<span class="indication"> - it shouldn't be a span for it contains divs, which is not xhtml 1.0 strict/1.1 valid ;-)

Awaiting the new version, mate!
h-a-r-v
Mar 18, 2008
Hellyeah date picker is the right thing to do. \'Twas one of my first thoughts when I came here, like: \"how come there\'s no such feature?\", but I prefered its unique design to that and resisted the need of having this on my site. Glad to hear it\'s coming. Fade In/Out included? - you better! Cheers :-)
h-a-r-v
Mar 29, 2008
Hi. I've just fallen in love with the event function in this calendar: http://edition.cnn.com/ELECTION/2008/ . I couldn't find any other mootools-based with such feature. If yours had this, it would be just perfect (tooltips events sux). Thought you might consider it, hehe.

Regards
rcz
Apr 1, 2008
Hi. I've just fallen in love with the event function in this calendar: http://edition.cnn.com/ELECTION/2008/ . I couldn't find any other mootools-based with such feature. If yours had this, it would be just perfect (tooltips events sux). Thought you might consider it, hehe.

Yeah that's pretty neat, a day view. Maybe something for version 2.1. Version 2 is near its release I guess. Will release it after my redesign of this site is done.

Thanks for the tip Face: Happy
h-a-r-v
Apr 6, 2008
No problem. I require it to be 1.11 compatibile in return :D Jokin'. But sincirely - i'm afraid i won't use it (why would you care? hehe) if you plan to release it for 1.2b only (as some mootoolers do), because my portal has all the scripts based on 1.11 and i can't switch to 1.2b (or final when it's available) until all of them are rewritten. Will calendar 2.0 be for 1.11 or compatibile?
rcz
Apr 6, 2008
The PHP code is pretty much the same. The whole calendar is now being called upon by instantiating an JavaScript object, unlike the version 1 PHP include approach. I guess it's pretty migratable, but will require some effort.
h-a-r-v
Apr 6, 2008
So that means it's for mootools 1.2b? Well. I don't know anyone able to migrate it for me, so i guess i'll wait 'til everything i use moves to 1.2 and then switch it :) We already use multiple calendars (different months.php included) and spent some time on it, so if the code not the funcionality is the only difference then i guess i can wait :) Maybe for 2.1 with that events feature? Then it'd be really worth it.

Great job anyway, i believe 1.2b only makes it better and faster :)
rcz
Apr 7, 2008
No no it's still for mootools 1.1. Thought you only meant the calender versions.

I will make it compatible with mootools 1.2 if it gets out of beta stage.
h-a-r-v
Apr 7, 2008
I like that rare attitude ;-) Thanks
h-a-r-v
Apr 17, 2008
I noticed it some time before but i thought it's something wrong i've done while styling it but i've just realized on your demo that it' appears by default:

The first row of day numbers is 1px cut on the top so when you rollover them, the halo lacks its top border :)
h-a-r-v
Apr 21, 2008
http://www.mooscripts.com/script_archive.php - not sure if you know that new project. It lacks your calendar there, but i won't add it behind your back :)
rcz
May 5, 2008
Adding the new version to the site. Thanks!
dos komut
Jun 20, 2008
css Cursor examples , Properties , Attribute - - http://css-lessons.ucoz.com/cursor-css-examples.htm
Carlo Veltri
Jul 2, 2008
I tried to insert it in my blog (wordpress) sidebar, but noyhing happen...
what can i do?
IS POSSIBLE?
Probando esto
Nov 5, 2008
Face: Laughing
ok
Probando
Probando 2
Nov 5, 2008
<input name="jaja" value="Texto"> <br>
Esta Excelente este sitio.. Very Well it's site.
1111
Nov 11, 2008
11112
Mark
Feb 1, 2009
Very nice script!

You'll have to excuse any ignorance which might show through in the below, as I am quite the novice at mootools. No expert by any stretch of the imagination, but hey, I'm trying :).

I made a very minor change to the class.

I am building an application which requires multiple dynamically created date pickers which means that all of the objects the date picker uses must have the same ids and what not. Despite using mootools each() method, I found that the date picker would only render on the first instance, whilst all other instances thereafter would open the calendar pop up for the first, and any selection of a date would be inputted into the first instance of the date picker.

By changing the following line:

this.container = _container = $(_container);

to:
this.container = _container;

it now seems to work just fine using the below code:

$$('.dDates').each(function(item) {
new vlaDatePicker(item.getElement('.exampleIII'), {
openWith: item.getElement('.togglePicker'),
offset: { y: -2, x: 2 },
separateInput: { day: 'day',
month: 'month',
year: 'year'
}
});
});

This seems to work very well thus far. Not sure if it will cause any further problems, however, so.. wanted to pass it by you to see what you thought.

thanks again, this is a true testament to the power of mootools!

Sincerely,
Mark
hunk
Mar 3, 2009
Can i use this is in my official website , with your name in author , not for reselling my product.
re
Apr 6, 2009
Fantastic thank you. Find the files you are looking for at http://all-shares.com the most comprehensive source for free-to-try files downloads on the Web
Jumso
Jun 2, 2009
Hello,
IE8 seems to cut the calendar. I can only see 5 rows and 6 columns (sunday is missing). What can it be? Chrome and FF are fine.
Thanks
Jumso
Jun 2, 2009
It seems just like this img
http://dev.base86.com/cms/uploads/article_1189447579488.gif

Add comment

Comment posting disabled.