Vista-like Ajax Calendar

Very cool one! Thanks for sharing

Is the bookmark bar made by you? If yes i've done a very good job.

Yups, made that

can i use it for a final college project? plzzz

Would be cooler if you could use it as a date picker.

You can use it in your college project if it fits within the Creative Commons Attribution-NonCommercial 3.0 License.

It can easily be implemented as a date picker. Maybe the next step?

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? :)

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>";

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.

Zooming was not really possible. Instead I used fading.

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?

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.

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.

Sweet. If you got a final version online somewhere let me know .

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

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 ;-)

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.

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 .

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 .

Keep up the effort!

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!

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 :-)

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

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

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?

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.

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 :)

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.

I like that rare attitude ;-) Thanks

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 :)

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 :)

Adding the new version to the site. Thanks!

css Cursor examples , Properties , Attribute - - http://css-lessons.ucoz.com/cursor-css-examples.htm

I tried to insert it in my blog (wordpress) sidebar, but noyhing happen...
what can i do?
IS POSSIBLE?

ok

Probando

<input name="jaja" value="Texto"> <br>
Esta Excelente este sitio.. Very Well it's site.

11112

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

Can i use this is in my official website , with your name in author , not for reselling my product.

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

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

It seems just like this img
http://dev.base86.com/cms/uploads/article_1189447579488.gif