Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a calendar view in CSS3

In this article we will learn how to create a calendar view utilizing CSS3 so that it looks very attractive.

A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and no one can fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist can make you irritate when you set the width of a table (or a cell) and it decides it knows better and grows or shrinks as it sees fit.

You can tackle calendar styling with pure CSS, and we feel it makes just as much sense semantically as a table does. What is a calendar, if not an ordered list of days? By using CSS3, we can even do some cool things like do all our sizing with ems so our calendar layout will be attractive. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.

Three Ordered Lists

Thinking semantically a month calendar isn't a single ordered list but three. Obviously all the days of the month are one ordered list. But months don't always start on Sundays and end on Saturdays, so there are those "filler" days at the beginning and end of the grid that make more sense as their own lists.

Listing1: Code displaying a month calendar

<ol class="calendar" start="6">

	<li id="lastmonth">
		<ol start="29">
			<li>29</li>
			<li>30</li>
		</ol>
	</li>
	
	<li id="thismonth">
		<ol>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
		</ol>
	</li>
	<li id="nextmonth">
		<ol>
			<li>1</li>
			<li>2</li>
		</ol>
	</li>
</ol>

And the fully styled CSS3:

Listing2: Styling the calendar with CSS3

/*
 * CSS Calendar
*		{margin:0;padding:0;}
body		{font:1em/1.4 Verdana, Arial, Helvetica, sans-serif; 
			background: url(images/bg.jpg) top center no-repeat #545454;}
body *		{display:inline;}
ol.calendar    {width:52em;margin:0 auto;display:block; min-height: 200px;
			background: url(images/tl.png) top left no-repeat; padding: 12px 0 0 20px;}
li		{list-style:none;}
p.link		{text-align:center;display: block;}
h1		{display: block; width: 200px;height:76px;
			background:url(images/july.png);text-indent:-9999px; margin: 15px auto; }

/*
 * Day styles
 -------------------------*/
li li		{width:6em;height:6em;float:left;margin:.2em; padding:.2em;overflow:auto;
			background: url(images/day-bg.png) bottom right no-repeat; }

/*
 * Day content (UL/OL & P)
 -------------------------*/
li li p	 {font-size:.7em;display:block;}
li li ol	 {width:auto;}
li li ul li,
li li ol li     {font-size:.7em;display:block;height:auto;width:auto; background: none;
			margin:0;padding:.2em 0;float:none;}

/*
 * Holiday class
 -------------------------*/
li li.holiday    {  }

/*
 * Inactive months
 -------------------------*/
li#lastmonth li,
li#nextmonth li    { background: url(images/day-bg-inactive.png);}

Points to Remember

Ordered lists generate their own numbering, so technically we could exploit that and use it to automatically number the calendar. Positioning gets a little tricky doing it that way though and you'll need to have some content inside each list item anyway (at least a  ) to get it to render correctly in all browsers. So, it's best to set the list style to none and just put the day numbers right in the list items. Because of this, with CSS3 turned off we get this:

1. 1
2. 2
3. 3
...
etc.

Not the end of the world, but because we want our calendar to be as good as it possibly can be even without CSS3, you may want to consider just using unordered lists instead so you get bullets.

Also notice the "start" attribute in the

    element. This allows your list to literally start at a number other than "1". This element has recently been deprecated. The reason for this is that lists aren't always decimal-based, they could be alphabetical or roman numbers or whatever else ordered lists can be. However, there is no CSS3 alternative for this, so deprecated element it is.

    Cross Browser Compatibility:

    Perhaps even more interesting is the cross browser compatibility we ran into with this markup. We are aiming for a straight up grid here, so floated blocks are what we are using. But lists are by default block level elements, so in order to get all the blocks in the same grid technically those blocks would need to be sitting right on top of each other to look right. As we were creating this, every browser was getting it right except (interestingly enough) Firefox 2. Firefox 3 was getting it right though and we tricked into submission by setting all elements on the page to inline:

    body *              {display:inline;}

    Then setting elements back to block as necessary.

    An interesting side note about displaying inline on all elements inside the body... Google Analytics code lives inside the body in a tag (which, by default is set to display:none) and displaying inline on will display your embedded JavaScript. This is actually a nice addition into Firefox, especially when writing a tutorial and wanting to show your CSS3 or JavaScript. You can actually display the embedded CSS3/JS code that's making the page work, very cool.

    In a case like that (with JS embedded somewhere in the body) you may want to wrap your calendar in a

    and use div *{display:inline;}.

    Another weird quirk one could find is with the combination of display:inline and float:left would reset the counter on each ordered list item to zero which is strange.

    And of course, any web page wouldn't be complete without an IE quirk. In IE 6&7 the margin for an OL and a UL inside each day squeezes the text slightly, not a big deal, but something to be aware of.

    Calendar View

    Figure 1: Calendar View

    Conclusion

    This brings us to end to this tutorial where we learned how to create a calendar view making use of CSS3. Hope you liked the article.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login