List Based Calendar

I’ve been playing with Tableless Calendar idea some more, and I’ve come up with something I think could be somewhat useful. This isn’t a replacement for table based calendar. This is a simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format. So here is my idea in action

First, the list code is slightly modified from previous posts. If want to see where I started from, click back to the older posts first, but if you just want to copy and paste, don’t worry about it.

Every date has the day of the week in the list item, with a class, and every event is now marked the event class.

<ul>
<li class="day">sun</li> <li class="day">mon</li> <li class="day">tues</li> <li class="day">wed</li> <li class="day">thurs</li> <li class="day">fri</li> <li class="day">sat</li>
<li> </li> <li> </li> <li>1<span class="day_name">tuesday</span></li> <li>2<span class="day_name">wednesday</span></li> <li>3<span class="day_name">thursday</span></li> <li>4<span class="day_name">friday</span> <span class="event">do this and this and this and this</span></li> <li>5<span class="day_name">saturday</span></li>
<li>6<span class="day_name">sunday</span></li> <li>7<span class="day_name">monday</span></li> <li>8<span class="day_name">tuesday</span></li> <li>9<span class="day_name">wednesday</span></li> <li>10<span class="day_name">thursday</span></li> <li>11<span class="day_name">friday</span></li> <li>12<span class="day_name">saturday</span></li>
<li>13<span class="day_name">sunday</span></li> <li>14<span class="day_name">monday</span></li> <li>15<span class="day_name">tuesday</span> <span class="event">don't forget the milk</span></li> <li>16<span class="day_name">wednesday</span></li> <li>17<span class="day_name">thursday</span></li> <li>18<span class="day_name">friday</span></li> <li>19<span class="day_name">saturday</span></li>
<li>20<span class="day_name">sunday</span></li> <li>21<span class="day_name">monday</span></li> <li>22<span class="day_name">tuesday</span></li> <li>23<span class="day_name">thursday</span></li> <li>24<span class="day_name">wednesday</span></li> <li>25<span class="day_name">friday</span></li> <li>26<span class="day_name">saturday</span></li>
<li>27<span class="day_name">sunday</span> <span class="event">meeting at 7pm</span></li> <li>28<span class="day_name">monday</span></li> <li>29<span class="day_name">tuesday</span></li> <li>30<span class="day_name">wednesday</span></li> <li>31<span class="day_name">thursday</span></li> <li> </li> <li> </li>
</ul>

The javascript stays the same

<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;
      }
    }
  }
}
//-->

and so do the links for switching styles

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

No changes to the stylesheet links in the head either.

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

The stylesheets themselves have changed quite a bit. For the calendar view, I’ve turned off the days of the week inside each box, and made the event only visible on a hover. Days with events are marked with red dots, which is a background image.

body{font-family:georgia;}
h1{font-family:helvetica, arial;}
ul{position:relative;width:364px;list-style:none;font-family:georgia;font-size:15px;margin:0px;padding:0px;}
ul li{font-weight:normal;width:42px;float:left;height:42px;background:#eee;margin:2px;padding:3px;font-family:georgia;}
ul li.day{font-variant:small-caps;font-size:13px;background:#fff;height:25px;font-family:helvetica, arial,arial;text-align:center;}
ul li .day_name{display:none;}
ul li .event{display:block;text-indent:-4000px;background:url("event.png") no-repeat;}
ul li:hover .event{font-family:helvetica, arial,arial;text-indent:0px;position:absolute;top:45px;left:0px;font-size:13px;dispay:block;color:#ff0000;background:#fff;padding:10px;}
.day{display:block;}

The list view is almost the same, except with a few extra lines for the day names.

body{font-family:georgia;}
h1{font-family:helvetica, arial;}
.day{display:none;}
ul{list-style:none;padding:3px;}
ul li{font-family:helvetica, arial;font-weight:bold;}
ul li .event{color:#ff0000;}
ul li .day_name{color:#666;font-weight:normal;}
ul li .day_name:before{content: " is a ";color:#777;}

You don’t just have to copy and paste everything from here though. You can download the xhtml at calendar.txt and style_1.css and style_2.css. If you want to read a bit more about how it works, just go back to the Tableless Calendar post.