advertisement
Premier Club Log In/Registration
  Include Code  Search Tips
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   SKILLBUILDING  |   TIP BANK  |   SOURCEBANK  |   FORUMS  |   NEWSLETTERS
Browse DevX
Download the code for this article
Partners & Affiliates
advertisement
advertisement
Average Rating: 4.8/5 | Rate this item | 9 users have rated this item.
 Print Print
 
Create an Object-Oriented JavaScript Calendar Using the Façade Design Pattern
You've probably seen those nifty Web-based calendars that let users navigate through months and years to select a specific date. Unfortunately, most of them aren't terribly appealing. This solution shows you how to build your own customizable calendar that displays a different image for each month. 

advertisement
hile doing some shopping one day, I noticed that nearly every retail outlet offers some kind of calendar, each attractively decorated with an image theme. It occurred to me that it would be interesting to create a Web-based calendar where I could control the images displayed for each month. In addition, by displaying the calendar without the images you can make it serve double duty as a date picker component.


The Façade Design Pattern
Design patterns are an interesting concept. In general, design patterns represent an accepted (usually efficient) way of doing something in a programming language. I've written about the Model-View-Controller design pattern as it pertains to integrating news feeds. Design patterns are language-agnostic. You've probably used a few design patterns before without even realizing it!

A façade is an architectural term that refers to an artificial or deceptive front—a public face—a way to hide less attractive underlying structure and workings. For example, architects might add a marble façade to the street-facing side of a brick building. Similarly, the Façade design pattern is a concept whereby the developer creates a wrapper—a public face—around an intricate object. The wrapper exposes pertinent methods and properties of the underlying object but often hides most of the rest. Façade patterns often make the underlying object easier to use, or give a generic object a public face for a specific purpose.

That's exactly what the calendar project does. To build the calendar, you'll use the Façade design pattern to create a wrapper around the built-in JavaScript Date object. The wrapper exposes the Date properties necessary to create a calendar. Note that in this project the wrapper doesn't actually hide any functionality of the Date object, it just makes it less accessible.



What's an efficient and flexible way to create a JavaScript-based calendar?



Use the Façade design pattern wrapped around the built-in JavaScript Date object along with a bit of object-oriented JavaScript trickery.

Page 1 of 4


advertisement
  Next Page: Create the CSS File
Page 1: IntroductionPage 3: Create the Calendar Constructor
Page 2: Create the CSS FilePage 4: Write the Document Object Methods
advertisement
Advertising Info  |   Member Services  |   Permissions  |   Contact Us  |   Help  |   Feedback  |   Site Map  |   Network Map  |   About


JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

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
Microsoft Article: HyperV-The Killer Feature in WinServer ‘08
Avaya Article: How to Feed Data into the Avaya Event Processor
Microsoft Article: Install What You Need with Win Server ‘08
HP eBook: Putting the Green into IT
Whitepaper: HP Integrated Citrix XenServer for HP ProLiant Servers
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 1
Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 2--The Future of Concurrency
Avaya Article: Setting Up a SIP A/S Development Environment
IBM Article: How Cool Is Your Data Center?
Microsoft Article: Managing Virtual Machines with Microsoft System Center
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
Intel Video: Are Multi-core Processors Here to Stay?
On-Demand Webcast: Five Virtualization Trends to Watch
HP Video: Page Cost Calculator
Intel Video: APIs for Parallel Programming
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
Sun Download: Solaris 8 Migration Assistant
Sybase Download: SQL Anywhere Developer Edition
Red Gate Download: SQL Backup Pro and free DBA Best Practices eBook
Red Gate Download: SQL Compare Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
How-to-Article: Preparing for Hyper-Threading Technology and Dual Core Technology
eTouch PDF: Conquering the Tyranny of E-Mail and Word Processors
IBM Article: Collaborating in the High-Performance Workplace
HP Demo: StorageWorks EVA4400
Intel Featured Algorhythm: Intel Threading Building Blocks--The Pipeline Class
Microsoft How-to Article: Get Going with Silverlight and Windows Live
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES