Comments on: A Semantic List-Based CSS Calendar

By: Flavio

Flavio — Wed, 04 Nov 2009 19:41:41 +0000

…well actually i’m not able to improve on this.
It’s a nice implementation, but it is impossible to enrich the style without adding html. Adding collapsing-borders is impossible since :first/last-child won’t be able to target the right LIs :(

that’s why i started with a more complex layout the other day, but grouping weeks in other lists breaks the “semantic”.

/sigh

By: Flavio

Flavio — Wed, 04 Nov 2009 18:26:51 +0000

great tutorial.
i had the same idea a couple of days ago but my implementation was complicated and inefficent so i roamed to find a better one.
I have to add that the list approach can also be much more flexible in sense that with correct styling you can display a different layout, instead of the only calendar view, you can have a list-view (like iCal).
I’m trying just to implement this :)

By: Jestep

Jestep — Mon, 30 Mar 2009 20:59:27 +0000

Not a bad start at all. I managed to convert this to a completely fluid layout with about 30 minutes of changes and testing. I also have it working perfectly in a year style layout with 12 mini calendars on the same page.

I looked for several hours at various css based calendar styles, and this is the most versatile that I’ve found. The most difficult part in moving to a fluid width is keeping the top row even with the rows below. In this case, I used an increasing border-left width. Anyway, great resource, highly recommended.

By: Neuromancer

Neuromancer — Sat, 28 Feb 2009 22:09:46 +0000

It doesn’t work at all. I think I will use the good old table.

By: Roy Wright

Roy Wright — Wed, 14 Jan 2009 12:02:18 +0000

First, thank you for this excellent CSS.

I translated it to sass then corrected to handle multiple inner list items. Also extended for supporting month & week views. I hid the list style and embedded the date in the inner ul to support single week views.

Here’s the calendar.sass:

http://gist.github.com/46871

Thank you

By: Recent Links Tagged With "haslayout" - JabberTags

Recent Links Tagged With "haslayout" - JabberTags — Thu, 04 Dec 2008 13:49:16 +0000

[...] public links >> haslayout hasLayoutメモ Saved by OmegaSandShark on Sun 30-11-2008 A Semantic List-Based CSS Calendar Saved by kermix on Thu 13-11-2008 圆角边框方法收集（转） Saved by wssforum on Fri [...]

By: Understanding XHTML Semantics - CSSnewbie

Understanding XHTML Semantics - CSSnewbie — Wed, 15 Oct 2008 20:23:16 +0000

[...] problems can be solved with several different, arguably semantic, solutions — like when I argued that a calendar could be represented using an unordered list instead of a table (you can also see my follow-up article [...]

By: hasan

hasan — Mon, 22 Sep 2008 05:10:23 +0000

Nice post
but there was lots of bug for ie
i think u have not tested this in ie6 or later
just check
thanks for ur help

By: Edward Guillen

Edward Guillen — Fri, 18 Jul 2008 12:15:51 +0000

[...] Semantic List-Based CSS Calendar. Drop your two [...]

By: Rob

Rob — Thu, 10 Jul 2008 15:36:47 +0000

Hi (other) Rob,

It’s not that this technique doesn’t work on IE… it’s that it doesn’t work the way I’ve presented it here. However, I do describe a way in which it could work in IE: just include the date inside the list item. I personally don’t like this alternative, but I personally don’t much like IE, either. ;) If you want to use this technique, and need it to work in IE, just follow the workaround.

I apologize if you think I’m being misleading, but my goal here isn’t just to become a how-to guide for CSS techniques. I’m teaching process here just as much as product, and the path through the garden is just as important to me as the plants on either side (to pillage a metaphor).