Have you guys implemented Calendar Component using YUI, it is quick to implement and will take not more than few minutes, even you can customize the component according to your needs in your projects. Customization like Creating a Multi Month Calendar View, Setting Configuration Options, Enabling the Calendar Navigator, Obtaining Selected Dates, Creating International Calendars, Customizing Events etc., Its great right!
So Guys! if you want to implement the Calendar Component right now! below is the code for you:
Place the below code in <head>.....</head> tag of your HTML page
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/calendar/calendar-min.js"></script>
Place class="yui-skin-sam" in <body> like below
<body class=" yui-skin-sam">
Now Start putting the below code in between the <body class=" yui-skin-sam">.....</body> tags
<div id="cal1Container"></div>
<script type="text/javascript">
YAHOO.namespace("example.calendar");
YAHOO.example.calendar.init = function() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
</script>
Close body as well as html tags
</body></html>
Below is the snap shot of the Calendar Component which you get after implementing:
Hope this tutorial may help you in implementing Calendar Component.... :)
0 comments:
Post a Comment