Friday, 1 May 2009

Adding multiple YUI calendars on a single page

YUI - Yahoo User Interface
Yahoo User Interface (YUI) is a nice framework which allow users to create RIAs (Rich Interface Applications) with ease. I recently started working with YUI. The greatest disadvantage is, its hard to get the help of YUI as it is available for PHP or Javascript in general. There are no FAQs at YUI website as well. You need to be atleast at 'intermediate' level of Javascript understanding to digest this framework which is fair enough because the type of application you would be working on usign this framework would not be a simple application in any means.

Why a YUI specific blog?
Because it happens to me first time in my entire life as a web developer (over 3 years now) that I searched something and I haven't got it. So, here I will be posting those scripts which posed problem for me, I hope that anyone else would not have to go through the same problems after me.

Lets start:

Adding multiple YUI calendars on a single page
If you have created a YUI calendar using the example here: http://developer.yahoo.com/yui/examples/button/btn_example10.html
You would be stuck in the middle of the road because you would not be able use the same example script if you need more than one calendar picker on the same page. You need to make this example a bit more dynamic. So lets do it.

Javascript:




PHP/HTML:
function calendar($i){
//converting today's date using built-in php functions
$todayyear=date("Y",strtotime("now"));
$todaymonth=date("m",strtotime("now"));
$todayday=date("d",strtotime("now"));
$html = '






';

return $html;
}


How to call:
And this is how you will call these functions:

echo '';

$yuicalendar = calendar(1);
echo
$yuicalendar;
$yuicalendar = calendar(2);
echo
$yuicalendar;
$yuicalendar = calendar(3);
echo
$yuicalendar;
$yuicalendar = calendar(4);
echo
$yuicalendar;
$yuicalendar = calendar(5);
echo
$yuicalendar;


Congratulations! By now you should be able to create multiple instances of YUI calendar on single page. I have tested this code before posting, if you require any sort of help, you can email me or leave a comment. If this code has helped you or you have better ideas, even then don't forget to leave a comment.

No comments:

Post a Comment