The JavaScript Source: Forms : DynaCalendar

Events
- JupiterEvents
- internet.com/webcasts
Jobs
Partners
Solutions
- eBooks
- Video
Shop

Home

Forms

DynaCalendar

A date selection widget for use with forms. Clean and simple. Uses style sheets for layout.

Click to Open Calendar

The JavaScript Source: Forms : DynaCalendar
Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

 .dynaCalendarDiv { position: absolute; display: none; border: 2px solid black; background-color: white; } .dynaCalendarTable { border-collapse: collapse; } .dynaCalendarTable th { background-color: #CCCCFF; cursor: default; width: 2em; text-align: center; text-transform: capitalize; border: 1px solid white; } .dynaCalendarTable th.BF { cursor: pointer; } .dynaCalendarTable td { border: 1px solid white; } .dynaCalendarTable td.day { background-color: #DDDDFF; color: black; cursor: pointer; } .dynaCalendarTable td.daySelected { background-color: #333399; font-weight: bold; color: white; cursor: pointer; } .myText { font-family: sans-serif; font-size: 12px; color: black; padding-left: 5px; }  /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: Michael O'Connell :: http://wunder-ful.com */ /** * Invocation represents a function call in a specific object context with a list of parameters * This is a very powerful object that allows code to be executed in it's intended context * from any other context (context = the 'this' for that function). * There is a perfomance hit to use this (takes about 5x more time) * WARNING in IE if you try to use invoke on an object that is in a window that is no longer loaded it will throw "can't execute code in freed script" * @constructor * @param targetObj object to invoke a method on (functions not on an object are attached to the window object) * @param functionName string containing the name of the function to invoke on targetObj * @param arguments an Array of arguments to invoke the function with (optional) * @author Mike O'Connell */ function Invocation(targetObj, functionName, arguments) { this.targetObj = targetObj; this.functionName = functionName; this.arguments = arguments; } /** * Actually invoke the function call defined by this instance of Invocation. * If the object doesn't exist, or the function does not exist it will not try to execute * @param arguments an Array of arguments to invoke the function with (will be appended to the end of the predefined argument Array) * @return The return value of the function invoked. */ Invocation.prototype.invoke = function(arguments) { if(this.targetObj && typeof this.targetObj[this.functionName] == "function") { var args = this.arguments; if(!args) args = new Array(); if(arguments) args = args.concat(arguments); return this.targetObj[this.functionName].apply(this.targetObj, args); } } /** * @return the sum of all the offsetTop values from this element to the body */ function getTotalOffsetTop(element) { var offset = 0; for(var i = element; i && i.tagName != "BODY"; i = i.offsetParent) offset+=i.offsetTop; return offset; } /** * @return the sum of all the offsetLeft values from this element to the body */ function getTotalOffsetLeft(element) { var offset = 0; for(var i = element; i && i.tagName != "BODY"; i = i.offsetParent) offset+=i.offsetLeft; return offset; } /** * Positions a absolutely positioned element over the anchor. It will detect body clipping * and move the right side of the element to the right of the anchor. The element cannot * have * @param element the element to position * @param anchor the anchor to position element over * @param positionVertical position on "top" or "bottom" edge of the anchor * @param positionHorizontal position on "left" or "right" edge of the anchor */ function positionAtAnchor(element, anchor, positionVertical, positionHorizontal) { var left = getTotalOffsetLeft(anchor); if(positionHorizontal == "right") left = left + anchor.offsetWidth + 1; //horizontal clip if(left + element.offsetWidth > document.body.scrollWidth && left - element.offsetWidth > 0) { left = left - element.offsetWidth; if(positionHorizontal == "right") left = left - anchor.offsetWidth; else left = left + anchor.offsetWidth + 1; } var top = getTotalOffsetTop(anchor); if(positionVertical == "bottom") top = top + anchor.offsetHeight + 1; //vertical clip if(top + element.offsetHeight > document.body.scrollHeight && top - element.offsetHeight > 0) { top = top - element.offsetHeight; if(positionVertical == "bottom") top = top - anchor.offsetHeight; else top = top + anchor.offsetHeight + 1; } element.style.top = top+"px"; element.style.left = left+"px"; } // =========================== //map of dynaCalendars by name var dynaCalendars = {}; /** * Opens / closes the dynacalendar at the specified anchor * @param name The unique name for the calendar to open. * @param anchor A element to open the calendar under **/ function openDynaCalendar(name, anchor) { var calendar = dynaCalendars[name]; if(!calendar.isOpen) calendar.open(anchor); else calendar.close(); } /** * Constructor for the DynaCalendar * @param name A unique name for this calendar * @param invocation The function to pass the date when a date is selected. * @param year Year to start calendar. * @param month Month to start calendar. * @param day Day to start calendar. * @see Invocation **/ function DynaCalendar(name, invocation, year, month, day) { //populate day of week and month name constants if not previously created... if(!DynaCalendar.MONTHS) { var MONTHS = []; var DOW = []; DynaCalendar.MONTHS = MONTHS; DynaCalendar.DOW = DOW; var tmpDate = new Date(2000, 0, 1); for(var i = 0; i < 12; i++) { tmpDate.setMonth(i); var dateStr = tmpDate.toLocaleString(); var monthname = dateStr.match(/\s[a-zA-Z]+\s/)[0]; monthname = monthname.substring(1,monthname.length-1); MONTHS[i] = monthname; } for(var i = 1; i < 8; i++) { tmpDate.setDate(i); var dateStr = tmpDate.toLocaleString(); var dow = dateStr.substring(0,3); DOW[tmpDate.getDay()] = dow; } } if(year && month && day) this.date = new Date(year, month, day); else this.date = new Date(); this.invocation = invocation; this.name = name; this.isOpen = false; this.rendered = false; this.bodyRendern = false; dynaCalendars[name] = this; } /** * Displays the dynacalendar at the specified anchor. * @param anchor A element to open the calendar under */ DynaCalendar.prototype.open = function(anchor) { if(!this.rendered) this.render(); if(!this.bodyRendern) this.renderBody(); this.calendarDiv.style.display = "block"; positionAtAnchor(this.calendarDiv, anchor, "bottom", "left"); this.isOpen = true; } /** * Closes the dynaCalendar */ DynaCalendar.prototype.close = function() { this.calendarDiv.style.display = "none"; this.isOpen = false; } /** * Fills the calendarDiv with actual date spans **/ DynaCalendar.prototype.render = function() { var calendarDiv = document.createElement("DIV"); var calendarTable = document.createElement("TABLE"); var calendarHead = document.createElement("THEAD"); var calendarHeadTR = document.createElement("TR"); var calendarHeadWeekTR = document.createElement("TR"); var calendarBY = document.createElement("TH"); var calendarBM = document.createElement("TH"); var calendarTitle = document.createElement("TH"); var calendarFM = document.createElement("TH"); var calendarFY = document.createElement("TH"); var calendarBody = document.createElement("TBODY"); calendarDiv.className = "dynaCalendarDiv"; calendarTable.className = "dynaCalendarTable"; calendarTitle.colSpan = 3; calendarBY.className = "BF"; calendarBM.className = "BF"; calendarFM.className = "BF"; calendarFY.className = "BF"; calendarBY.innerHTML = "<<"; calendarBM.innerHTML = "<"; calendarFM.innerHTML = ">"; calendarFY.innerHTML = ">>"; calendarBY.onclick = dynaCalendarBackYearOnClick; calendarBM.onclick = dynaCalendarBackMonthOnClick; calendarFM.onclick = dynaCalendarForwardMonthOnClick; calendarFY.onclick = dynaCalendarForwardYearOnClick; calendarDiv.dynaCalendar = this; calendarHead.dynaCalendar = this; calendarBody.dynaCalendar = this; calendarBY.dynaCalendar = this; calendarBM.dynaCalendar = this; calendarTitle.dynaCalendar = this; calendarFM.dynaCalendar = this; calendarFY.dynaCalendar = this; this.calendarTitle = calendarTitle; this.calendarBody = calendarBody; this.calendarDiv = calendarDiv; //populate week header for(var i = 0; i < 7; i++) { var dowTH = document.createElement("TH"); dowTH.innerHTML = DynaCalendar.DOW[i]; calendarHeadWeekTR.appendChild(dowTH); } calendarHeadTR.appendChild(calendarBY); calendarHeadTR.appendChild(calendarBM); calendarHeadTR.appendChild(calendarTitle); calendarHeadTR.appendChild(calendarFM); calendarHeadTR.appendChild(calendarFY); calendarHead.appendChild(calendarHeadTR); calendarHead.appendChild(calendarHeadWeekTR); calendarTable.appendChild(calendarHead); calendarTable.appendChild(calendarBody); calendarDiv.appendChild(calendarTable); document.body.appendChild(calendarDiv); this.rendered = true; } /** * Renders the actual month. **/ DynaCalendar.prototype.renderBody = function() { //title var title = DynaCalendar.MONTHS[this.date.getMonth()]+ " " + this.date.getFullYear(); this.calendarTitle.innerHTML = title; //clear table body while(this.calendarBody.hasChildNodes()) this.calendarBody.removeChild(this.calendarBody.lastChild); //generate new table body var tmpDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1); var row = document.createElement("TR"); this.calendarBody.appendChild(row); //blanks for(var i = 0; i < tmpDate.getDay(); i++) { var td = document.createElement("TD"); row.appendChild(td); } while(tmpDate.getMonth() == this.date.getMonth()) { var td = document.createElement("TD"); var date = tmpDate.getDate(); if(date == this.date.getDate()) td.className = "daySelected"; else td.className = "day"; td.innerHTML = date; td.dynaCalendar = this; td.onclick = dynaCalendarSelectDayOnClick; row.appendChild(td); if(tmpDate.getDay() == 6) { row = document.createElement("TR"); this.calendarBody.appendChild(row); } tmpDate.setDate(date + 1); } //blanks for(var i = tmpDate.getDay(); i < 7; i++) { var td = document.createElement("TD"); row.appendChild(td); } this.bodyRendern = true; } /** * Set the day of the month * @param date The date of the month to set the calandar to. **/ DynaCalendar.prototype.setDate = function(date) { this.date.setDate(date); this.bodyRendern = false; } /** * Moves back a year **/ DynaCalendar.prototype.backYear = function() { this.setDate(1); this.date.setFullYear(this.date.getFullYear() - 1); this.renderBody(); } /** * Moves back a month **/ DynaCalendar.prototype.backMonth = function() { this.setDate(1); this.date.setMonth(this.date.getMonth() - 1); this.renderBody(); } /** * Moves forward a month **/ DynaCalendar.prototype.forwardMonth = function() { this.setDate(1); this.date.setMonth(this.date.getMonth() + 1); this.renderBody(); } /** * Moves forward a year **/ DynaCalendar.prototype.forwardYear = function() { this.setDate(1); this.date.setFullYear(this.date.getFullYear() + 1); this.renderBody(); } // Event handlers ------------------------------------------------------------- /** * onclick to select a day */ function dynaCalendarSelectDayOnClick(event) { //IE if(window.event) { var srcElement = window.event.srcElement; } //MOZ else { var srcElement = event.currentTarget; } var calendar = srcElement.dynaCalendar; calendar.setDate(srcElement.innerHTML); if(calendar.invocation) calendar.invocation.invoke([calendar.date]); srcElement.dynaCalendar.close(); return false; } /** * onclick to go back one year */ function dynaCalendarBackYearOnClick(event) { //IE if(window.event) { var srcElement = window.event.srcElement; } //MOZ else { var srcElement = event.currentTarget; } srcElement.dynaCalendar.backYear(); return false; } /** * onclick to go back one month */ function dynaCalendarBackMonthOnClick(event) { //IE if(window.event) { var srcElement = window.event.srcElement; } //MOZ else { var srcElement = event.currentTarget; } srcElement.dynaCalendar.backMonth(); return false; } /** * onclick to go forward one month */ function dynaCalendarForwardMonthOnClick(event) { //IE if(window.event) { var srcElement = window.event.srcElement; } //MOZ else { var srcElement = event.currentTarget; } srcElement.dynaCalendar.forwardMonth(); return false; } /** * onclick to go forward one year */ function dynaCalendarForwardYearOnClick(event) { //IE if(window.event) { var srcElement = window.event.srcElement; } //MOZ else { var srcElement = event.currentTarget; } srcElement.dynaCalendar.forwardYear(); return false; } // =================================== function setup_cal() { var cal = new DynaCalendar("test",new Invocation(this,"change_link")); } function change_link(date) { document.getElementById("link1").innerHTML = date.toLocaleString(); } // ================================= window.onload = setup_cal();  <script type="text/javascript" src="DynaCalendar.js"></script>  <a id="link1" class="myText" onclick="openDynaCalendar('test',this);">Click to Open Calendar</a> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </div><p>
Did you use this script? Do you like this site? Please link to us!

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks
IBM eBook: Planning a Service Oriented Architecture IBM eBook: Choosing the Right Architecture--What It Means for You and Your Business Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape? Avaya Article: Using Intelligent Presence to Create Smarter Business Applications Intel Go Parallel Article: Getting Started with TBB on Windows Microsoft Article: 7.0, Microsoft's Lucky Version? Avaya Article: How to Feed Data into the Avaya Event Processor		IBM Article: Developing a Software Policy for Your Organization Microsoft Article: Managing Virtual Machines with Microsoft System Center Intel Go Parallel Article: Intel Threading Tools and OpenMP HP eBook: Storage Networking , Part 1 Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts
HP Video: StorageWorks EVA4400 and Oracle HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind		Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2 MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook Iron Speed Designer Application Generator		MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos
Silverlight 2 App and Walkthrough: Leverage Silverlight 2 with SQL Server and XML IBM Article: Enterprise Search--Do You Know What's Out There? HP Demo: StorageWorks EVA4400		Microsoft Article: The Progress and Promise of Deep Zoom Microsoft How-to Article: Get Going with Silverlight and Windows Live MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES