README PopCalendar 0.7 Beta (March 15, 2007) Introduction: PopCalendar is a flexable JavaScript calendar. In this release, some JavaScript is required to make use of the calendar. However, in future releases, additional classes will be provided to simplify common uses of the calendar. PopCalendar gets it's name from it's original purpouse, which was having a calendar that "popped" out of a text input to simplify inputting a date. To create a more modular component, the calendar has been seperated from the "popping" script into it's own object. Future releases will include the popping script as well. Use: To use popCalendar, upload the popcalendar.js script to your server and include it in the HTML like this: Where [/path/to/] is the optional path if popcalendar.js is not in the same directory as the current page. To include a calendar on the page, do this:
The first argument to popCalendar.build is the ID of the element containing the calendar. Usually, this should be a
. Anything in this element will be removed. This is useful if you want to create a static calendar on the server, and use popCalendar to replace it with a dynamic calendar on the client. Part of the flexibility of popCalendar is that it has no inline styles - all of the styles are controlled by CSS. As a result, the calendar will look very plain without some styling. You can add this to the HTML file to add the default styling to the calendar: The calendar will now look a bit nicer, but it is still not useful. To make the calendar useful, you can set a function that acts as an event handler when a new date is selected on the calendar. For example, you could set up an alert that gives the new date: replace this: popCalendar.build('calholder'); with this: popCalendar.build('calholder', {onchange: function(a){alert(a);}}); This sets the onchange event handler to a new anonymous function which alerts it's first perimiter. You could also do something more useful, like send the user to another page depending on the date. For example, in a WordPress blog, you can find articles by a particular date with a URL like this: . With popCalendar, we can easily create a calendar to send us to the posts for each date. replace this: popCalendar.build('calholder', {onchange: function(a){alert(a);}}); with this: function dateUrl(date){ document.location = "http://www.paulbutler.org/archives/"+date.getFullYear()+"/"+ (date.getMonth()+1)+"/"+date.getDate()+"/"; return false; } popCalendar.build('calholder', {onchange: dateUrl}); Note that the function returns false. This prevents the new date from being highlighted. Since a new URL will be opened anyway, there is no point in changing the selected date. Also, note that the function is passed without a pair of brackets. The result is that the function is passed, not the result of the function. Several other arguments may be passed to the calendar, which I will explain further in future documentation. popCalendar.build returns a new object representing the calendar just built. Some of the methods and properties of the object are: selectDate(date) - selects the date given to be highlighted on the calendar selectedDay - gets the selected day's date object. Do not set this, use selectDate instead. License: Copyright © 2007 Paul Butler This software is provided 'as-is', without any express or implied warranty. In no event will the authors be held liable for any damages arising from the use of this software. Permission is granted to anyone to use this software for any purpose, including commercial applications, and to alter it and redistribute it freely, subject to the following restrictions: 1. The origin of this software must not be misrepresented; you must not claim that you wrote the original software. If you use this software in a product, an acknowledgment in the product documentation would be appreciated but is not required. 2. Altered source versions must be plainly marked as such, and must not be misrepresented as being the original software. 3. This notice may not be removed or altered from any source distribution. A link to http://www.paulbutler.org/ where the project is hosted would be appreciated, but is not required.