Vista-like Ajax Calendar

Vista-like Ajax Calendar – php, css, ajax, javascript, vista, calendar, mootools, vlacalendar

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!

Author rcz Time Sep 17, 2007 Comment on 'Vista-like Ajax Calendar' Add comment Bookmark 'Vista-like Ajax Calendar' Bookmark Permalink to 'Vista-like Ajax Calendar' Permalink
Bookmark 'Vista-like Ajax Calendar' to Netvouz Bookmark 'Vista-like Ajax Calendar' to Facebook Bookmark 'Vista-like Ajax Calendar' to Furl Bookmark 'Vista-like Ajax Calendar' to Technorati Bookmark 'Vista-like Ajax Calendar' to Stumble Upon Bookmark 'Vista-like Ajax Calendar' to Digg Bookmark 'Vista-like Ajax Calendar' to Del.icio.us

Comments (32)

Comment author Bdesign Comment author email office<at>bebliucdesign.ro Time Sep 30, 2007 08:29 GMT #1
Very cool one! Thanks for sharingFace: Happy
Comment author Bdesign Comment author email office<at>bebliucdesign.ro Time Sep 30, 2007 08:32 GMT #2
Is the bookmark bar made by you? If yes i've done a very good job.
Comment author rcz Time Sep 30, 2007 11:23 GMT #3
Yups, made that Face: Glasses
Comment author steve Time Oct 10, 2007 06:30 GMT #4
can i use it for a final college project? plzzz
Comment author Peter Time Oct 10, 2007 04:19 GMT #5
Would be cooler if you could use it as a date picker.
Comment author rcz Time Oct 11, 2007 10:26 GMT #6
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?
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Dec 13, 2007 02:31 GMT #7
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? :)
Comment author rcz Time Dec 17, 2007 12:12 GMT #8
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)
  1. //Changing
  2. echo "<td".($i_ts == $t_ts ? " class="today"" : "")."$i</td>";
  3. //Into
  4. echo "<td".($i_ts == $t_ts ? " class="today"" : "")."><a href="yourpage.php?timestamp=$i_ts">$i</a></td>";
Comment author Not Bad Time Dec 29, 2007 09:19 GMT #9
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.
Comment author rcz Time Jan 1, 2008 04:03 GMT #10
Zooming was not really possible. Instead I used fading.
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Jan 15, 2008 08:46 GMT #11
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?
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Jan 15, 2008 08:52 GMT #12
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.
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Jan 15, 2008 09:09 GMT #13
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.
Comment author rcz Time Jan 15, 2008 09:56 GMT #14
Sweet. If you got a final version online somewhere let me know Face: Happy.
Comment author h-a-r-v Time Jan 17, 2008 01:03 GMT #15
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..
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Feb 18, 2008 10:09 GMT #16
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 ;-)
Comment author h-a-r-v Comment author email h-a-rv<at>o2.pl Time Feb 19, 2008 02:14 GMT #17
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.
Comment author rcz Time Feb 26, 2008 09:03 GMT #18
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!
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Mar 6, 2008 09:36 GMT #19
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!
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Mar 18, 2008 08:03 GMT #20
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 :-)
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Mar 29, 2008 10:56 GMT #21
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
Comment author rcz Time Apr 1, 2008 12:01 GMT #22
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
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Apr 6, 2008 04:27 GMT #23
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?
Comment author rcz Time Apr 6, 2008 06:00 GMT #24
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.
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Apr 6, 2008 08:12 GMT #25
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 :)
Comment author rcz Time Apr 7, 2008 10:28 GMT #26
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.
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Apr 7, 2008 12:45 GMT #27
I like that rare attitude ;-) Thanks
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Apr 17, 2008 09:52 GMT #28
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 :)
Comment author h-a-r-v Comment author email h-a-r-v<at>o2.pl Time Apr 21, 2008 01:33 GMT #29
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 :)
Comment author rcz Time May 5, 2008 04:22 GMT #30
Adding the new version to the site. Thanks!
Comment author dos komut Comment author email ascemilas<at>hotmail.com Time Jun 20, 2008 01:18 GMT #31
css Cursor examples , Properties , Attribute - - http://css-lessons.ucoz.com/cursor-css-examples.htm
Comment author Carlo Veltri Comment author website chepelle.alte[...]rg/wordpress Time Jul 2, 2008 03:24 GMT #32
I tried to insert it in my blog (wordpress) sidebar, but noyhing happen...
what can i do?
IS POSSIBLE?

Add comment

Your name
Your email or website (optional)
Icon
Confirmation code
Confirmation code
Message
face:happy face:glasses face:devilgrin face:crying face:grin face:laughing face:sad face:kiss face:shocked face:wink face:monkey face:angel