Home arrow HTML arrow Designing a Web Page Calendar
HTML

Designing a Web Page Calendar


Some web pages, such as news pages, require the user to look at a calendar in order to appreciate the timing of events. This series shows you how to design a calendar for a web page. This is the first part of an eight-part series.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
April 13, 2009
TABLE OF CONTENTS:
  1. · Designing a Web Page Calendar
  2. · Technical Interpretation of the Page
  3. · Our Simple Calendar Layout
  4. · Code for Simple Month Calendar

print this article
SEARCH DEVARTICLES

Designing a Web Page Calendar
(Page 1 of 4 )

Introduction

I will show you how to design a monthly calendar and a yearly calendar. I will start by showing you how to design a calendar for the current month and then a calendar for the current year. I will continue by showing you how to design a calendar for any month and then a calendar for any year.

You need basic knowledge of HTML, JavaScript and CSS in order to understand this series.

The Web Page

Your web page will normally have many HTML elements. Here I will talk only about the things related to the calendar on the web page.

Since your web page will normally have many HTML elements, there may be no space for the calendar to occupy. This series assumes that your web page has many elements or a lot of text, and there is no space for the calendar.

We shall have four buttons for the calendars. The first one, when clicked, will show the calendar for the current month. This button will have the title "Show Current Month's Calendar." The second button, when clicked, will show the calendar of any month of your choice, from the year 1900 forward. We shall use the JavaScript date object for this. This date object imposes this limit. However, your platform (operating system) may impose other limits. This button will have the title "Show any Month's Calendar."

The third button, when clicked, will show the calendar for the current year. It will have the title "Show Current Year's Calendar." The fourth and last button for our project, when clicked, will show the calendar of any year of your choice, from 1900 forward. However your platform may impose other limits.

When the first or third button is clicked, the corresponding calendar appears. When you click outside the calendar on the body element, the calendar disappears. When the second or fourth button is clicked, a dialog box appears; you enter more criteria (e.g. the particular year). When you click the OK button, the calendar appears; when you click outside the calendar on the body element, the calendar disappears.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials