CSS: Mini Events Calendar

In this article we will learn how to style an events calendar using CSS. We will walk through the steps of creating a calendar using an HTML table, complete with all tags and attributes to ensure that this table is accessible to users of alternate devices. Having created the calendar in the mark-up we will then move on to styling it in an attractive way using the CSS tools within Dreamweaver, in such a way that we do not add unnecessary mark-up to the page.

Advertisement DMXzone Calendar

 The DMXzone Calendar extension enables you to add a great looking calendar with many different styles and effects on your sites.  Enrich any form used for events, appointments or birthdays. Use it as a date picker or inline calendar with its unique design and in flight animation options. Embed multiple calendars, select date ranges, and limit the selection to specific dates.

Get DMXzone Calendar

Summary

In this tutorial we have looked at how we can take a calendar, marked up as a plain html table and style it as an attractive part of your site. What I have concentrated on doing here is starting from the basis of a well marked up and accessible calendar and then adding styles to create the look but not effect the mark-up. By applying a class to the containing table and then styling the elements within it we also keep the mark-up to a minimum, which will assist load time of the page. Tables can quickly create a huge amount of mark-up if non-essential classes are applied to each cell. You can use this same technique in many situations, for example giving a form a class or id and then being able to create styles for all input tags within that class.

Use this calendar as a starting point for further experiments. If the very tiny date cells are too small for you try adding padding to their CSS to add some more space around the figure. You could use these same techniques to create a larger events calendar with events actually displayed within the cells for that date, experiment with different border styles, attractive ways to style the caption and so on.