How to Create Your Own Widget Calendar for a Website
Although it is possible to create a calendar widget from scratch for a website from flash or java script, there are a number of well-known and tested calendar programming interfaces available to the Web developer for free on the Internet today. Yahoo!'s UI (User Interface) library has a easily configurable calendar widget that can be used with any website or blog. Since Yahoo! makes the API available to the developer without charge, it can also be extended to meet the Web developer's needs if there is not enough functionality for the desired application.
Other People Are Reading
Instructions
-
-
1
Include the Java script and cascading style sheet dependencies required for the calendar widget in the Web page.
<!--CSS file (default YUI Sam Skin) -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css">
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script> -
2
Apply the yui-skin-sam class to an element within the Web page that will be considered a parent of the calendar widget. If unsure, this can be applied to the <body> tag of the Web page.
<body class="yui-skin-sam"> -
-
3
Render the Calendar object in a <DIV> element on the Web page.
<div id="callContainer"></div> -
4
Initialize the Calendar object. For advanced configurations, more information can be passed into the Calendar constructor based off of the method definition in the Yahoo! UI Library.
var call = new YAHOO.widget.Calendar("callContainer");
call.render(); -
5
Create a multi-month calendar by replacing the Calendar initialization call in the previous step with the following call:
var call = new YAHOO.widget.CalendarGroup("callContainer");
-
1
Tips & Warnings
Before you initialize the Calendar object, the DIV element should already exist in the page's DOM. Review the various API options available to the Web developer at the Yahoo! UI Calendar website if the default settings do not provide the desired information for the calendar widget. If the Yahoo! Calendar API does not have the functionality required, try the Google Calendar API prior to creating a calendar widget from scratch.
Resources
- Photo Credit Screen shot taken by the author.
