Create an Object-Oriented JavaScript Calendar Using the Fa

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.

Next Page