Tableless Calendar In Use

I prefaced the last post about the Tableless Calendar by saying that it was a CSS experiment. I wanted to follow up with how it might come in handy. Since the information is already structured in a list format, I thought it could be useful for switching to different views of the calendar. I tried using a little ajax and two stylesheets to show what I mean. Here’s the example

You can use the same code from the last post to create the calendar view. I also added a few events to the calendar by adding <span>event</span> within a few list items. The only extra piece of CSS I think you might want to use for the list view .day{display:none;}. This will just turn the days of the week off.

The ajax used will just switch between there two style sheets:

<link rel="stylesheet" href="style_1.css">
<link rel="stylesheet" href="style_2.css">

<script language="JavaScript">
<!--
var doAlerts=false;
function changeSheets(whichSheet){
  whichSheet=whichSheet-1;
  if(document.styleSheets){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
      if(i!=whichSheet){
        document.styleSheets[i].disabled=true;
      }else{
        document.styleSheets[i].disabled=false;
      }
    }
  }
}
//-->
</script>

And all you need now are the links at the top to change views.

<a href="JavaScript:changeSheets(2)">Calendar View</a>
<a href="JavaScript:changeSheets(1)">List View</a>

Again, here’s the example, and the calendar stylesheet and the list stylesheet. Thanks to CodeLifter for the javascript.