Can someone help me create a Calender 30 view

Forum Moderators: not2easy

Message Too Old, No Replies

Can someone help me create a Calender 30 view

AffiliateDreamer

2:17 am on Aug 17, 2008 (gmt 0)

Hi,

I'm a little lost as to designing a 30 day calender view using CSS (table less).

I want the width and height of the cells to be fixed, I have no idea how to even start this!

Obviously once the cell structure is setup, I will be adding event information (summarized) into each cell, using bullet lists or something.

Any tips?

csuguy

2:51 am on Aug 17, 2008 (gmt 0)

1) Use tables - its tabular data!

But if you just want to do it for a challenge... Make a 7x6 grid with divs. 7 columns for the days - obviously - and 6 rows so you can put in a header for the days and have 5 rows for putting in the dates and what not.

I for easier reading - I suggest putting each row inside of a div with the class row. The class may not do anything, but it makes it easier to see what goes where.

For each of the 7 divs inside of each row - give them all the class cell, or day, or something like that. You may want to give the first row - the one that simply lists the days (Mon, Tues, etc.) a different class than that (like calendarHeader) if you want different styling.

Then to display which day of the month it is (like the 1st or 15th) You want to use 2 divs in each day cell - one for the day and one for all of your information. This will require making them absolute, which will require you make the day cell have relative positioning. Also - assuming the background is white - you'll want to use a light gray color for the day text most likely.

So here's what we've got so far in the HTML:


 <div class="row"><!--row 1-->
  <div class="calendarHeader">
   Monday
  </div>
  <div class="calendarHeader">
   Tuesday
  </div>
  <div class="calendarHeader">
   Wed.
  </div>
  <div class="calendarHeader">
   Thursday
  </div>
  <div class="calendarHeader">
   Friday
  </div>
  <div class="calendarHeader">
   Saturday
  </div>
  <div class="calendarHeader">
   Sunday
  </div>
 </div><!-- end of row 1 --> <div class="row"> <!-- row 2 -->
  <div class="calendarDay">
   <div class="dayNumber">
   1
   </div>
   <div class="dayInfo">
   ...
   </div>
  </div>
  <div class="calendarDay">
   <div class="dayNumber">
   2
   </div>
   <div class="dayInfo">
   ...
   </div>
  </div>
  <div class="calendarDay">
   <div class="dayNumber">
   3
   </div>
   <div class="dayInfo">
   ...
   </div>
  </div>
  <div class="calendarDay">
   <div class="dayNumber">
   4
   </div>
   <div class="dayInfo">
   ...
   </div>
  </div>
  <div class="calendarDay">
   <div class="dayNumber">
   5
   </div>
   <div class="dayInfo">
   ...
   </div>
  </div>
  <div class="calendarDay">
   <div class="dayNumber">
   6
   </div>
   <div class="dayInfo">
   ...
   </div>
  </div>
  <div class="calendarDay">
   <div class="dayNumber">
   7
   </div>
   <div class="dayInfo">
   ...
   </div>
  </div>
 </div><!-- end of row 2 --> <!-- repeat for the remaining rows-->

Now, in your CSS put this:


.row
{
 /* overflow: hidden? */
}.calendarHeader
{
 /*font info*/
 /*background-info?*/
 float: left;
}
.calendarDay
{
 position:relative;
 width: #px; 
 height: #px;
 overflow: hidden; /*or auto*/ 
 float: left;
}
.dayNumber
{
 position:absolute;
 top:0px;
 left:0px;
 /*color: (light gray)? */
 /*any font size or font type info...*/
}.dayInfo
{
 position:absolute;
 top: 0px;
 left: 0px;
 overflow: hidden; /* or auto; */
 /*put any font info here*/
}

That should put you on the right track. So start off from there and tell us how it goes.

But you really should use a table - it would be more accessible for this kind of information.

csuguy

6:03 am on Aug 17, 2008 (gmt 0)

oh - and you'll probably want to add this:


border: #px solid (color);

too the calendarHeader class and calendarDay class.

Marcia

6:08 am on Aug 17, 2008 (gmt 0)

>>> 1) Use tables - its tabular data!

Thank you! So are any *objects" that are presented to users arranged in rows and columns tabular. Like thumbnails of products.

D_Blackwell

12:59 am on Aug 18, 2008 (gmt 0)

But if you just want to do it for a challenge....

A framework follows that could be adapted for what you describe. Both very doable and versatile. The accessibility folks will probably chew it up and spit it out, but real users won't care, and though this version wasn't designed to be 'accessible', surely a variant could be. At any rate, designing for 'accessibility' is like supporting obsolete browsers - very few people care, and I speak as a WAI supporter.

Use tables mostly myself for calendars because I like an easy WAI AAA compliance, but don't believe that one would have to use a table for that. Does anybody have any no-table AAA compliant calendar samples? How hard can it be?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
Calendar - Schedule of Events
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="index,follow" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css" media="screen">
body {
margin: .3em .3em 5em .3em; padding: 0; font-size: 100%; font-family: Arial, sans-serif; cursor: crosshair;
background: #f5f5f5 url(../images/backgrounds/canvas.jpg); behavior: url(../../hover.htc);
}
h1.outside {
text-align: center; color: #900; border: .2em double teal;
background-image: url(../images/backgrounds/ivory.jpg);
padding: .3em; margin: 1em 10%;
}
.center {
text-align: center;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
/**********Optional for reversing. Not currently used.*/
.float-right {
float: right;
}
/**********Used for 'no link available'.*/
.fireb {
color: #900; font-weight: 900;
}
.empty-day {
visibility: hidden;
}
.big-wrapper {
border: .1em solid #000; margin: 1em .4em; padding: .3em; background: #fff9cc
url(../images/backgrounds/lightivory.jpg);
}
.month-wrapper {
border: .2em solid #000; padding: .3em .3em 0 .3em; background: url(../images/calendar/calendar.jpg)
no-repeat 50% 50%;
}
div.month-wrapper:hover {
background-color: #fff;
}
/*#########################Margin MUST not be in %, or IE will break.*/
.month {
font-weight: 900; font-size: 1.3em; text-align: center; clear: left; margin: .3em 1em; background-color: #fff;
border: .1em solid #000;
}
.week {
clear: left;
}
.day {
width: 1.8em; border: .1em solid #000; background-color: #ccc; float: left; margin: .1em; padding: .1em;
text-align: center; font-weight: 900;
}
.day-of-week {
background-color: #fff !important;
}
.show-date {
background-color: #fff;
}
div.month-wrapper:hover .show-date, div.month-wrapper:hover a {
background-color: #000; color: #fff; text-decoration: none; border-color: #fff;
}
div.show-date:hover, div.show-date:hover a {
background-color: #ccc !important; color: #000 !important; border-color: #000 !important;
}
div.month-wrapper:hover .hide {
visibility: hidden;
}
.show-date a {
text-decoration: none; color: #000; display: block; font-size: 1em !important;
}
.text-left {
float: left; margin: .5em 0 0 2em; font-size: 1.2em;
}
/**********Optional for reversing. Not currently used.*/
.text-right {
float: right; margin: .5em 4em 0 0; font-size: 1.2em;
}
dl.listing {
margin-top: 0; border: 2px dotted #000; padding: .4em; background: #fbefc9
url(../images/backgrounds/extra-light-ivory.jpg);
}
dl.listing dt {
text-decoration: underline; margin-top: 1em; font-weight: 900;
}
dl.listing dd {
margin-top: .5em;
}
.no-link {
background-color: #fff;
}
</style>
</head>
<body>

<div class="big-wrapper">
<div class="month-wrapper float-left">
<div class="day day-of-week hide">
M
</div>
<div class="day day-of-week hide">
T
</div>
<div class="day day-of-week hide">
W
</div>
<div class="day day-of-week hide">
T
</div>
<div class="day day-of-week">
F
</div>
<div class="day day-of-week">
S
</div>
<div class="day day-of-week">
S
</div>
<div class="week">
<div class="day empty-day">
</div>
<div class="day empty-day">
</div>
<div class="day empty-day">
</div>
<div class="day hide">
1
</div>
<div class="day hide">
2
</div>
<div class="day hide">
3
</div>
<div class="day hide">
4
</div>
</div>
<div class="week">
<div class="day hide">
5
</div>
<div class="day hide">
6
</div>
<div class="day hide">
7
</div>
<div class="day hide">
8
</div>
<div class="day hide">
9
</div>
<div class="day show-date" title="Title.">
<a href="" title="" onfocus="if(this.blur)this.blur();">
10
</a>
</div>
<div class="day hide">
11
</div>
</div>
<div class="week">
<div class="day hide">
12
</div>
<div class="day hide">
13
</div>
<div class="day hide">
14
</div>
<div class="day hide">
15
</div>
<div class="day show-date" title="Title.">
<a href="" title="" onfocus="if(this.blur)this.blur();">
16
</a>
</div>
<div class="day show-date" title="Title.">
<a href="" title="" onfocus="if(this.blur)this.blur();">
17
</a>
</div>
<div class="day show-date" title="Title.">
<a href="" title="" onfocus="if(this.blur)this.blur();">
18
</a>
</div>
</div>
<div class="week">
<div class="day hide">
19
</div>
<div class="day hide">
20
</div>
<div class="day hide">
21
</div>
<div class="day hide">
22
</div>
<div class="day hide">
23
</div>
<div class="day hide">
24
</div>
<div class="day hide">
25
</div>
</div>
<div class="week">
<div class="day hide">
26
</div>
<div class="day hide">
27
</div>
<div class="day hide">
28
</div>
<div class="day hide">
29
</div>
<div class="day hide">
30
</div>
<div class="day hide">
31
</div>
</div>
<div class="month">
~ May, 2008 ~
</div>
</div>
<div class="text-left">
<dl class="listing">
<dt>
    ~ May 10th ~    
</dt>
<dd>
Event
<br />
Location
</dd>
<dt>
    ~ May 17th & 18th ~    
</dt>
<dd>
(Additional workshops on the 16th.)
</dd>
<dd>
Event
<br />
Location
</dd>
</dl>
</div>
<p class="clear"></p>
</div>
</body>
</html>

encyclo

1:06 am on Aug 18, 2008 (gmt 0)

Why would you not use a table for this? What's the point of making something which works less well, uses more code and is inaccessible?

<table summary="May 2004">
<caption>May 2004</caption>
<thead>
<tr>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="April" colspan="3" id="prev"><a href="">&laquo; Apr</a></td>
<td class="pad">&nbsp;</td>
<td abbr="June" colspan="3" id="next"><a href="">Jun &raquo;</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="6" class="pad">&nbsp;</td><td>1</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
</tr>
<tr>
<td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
</tr>
<tr>
<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td>
</tr>
<tr>
<td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
</tr>
<tr>
<td>30</td><td>31</td>
<td class="pad" colspan="5">&nbsp;</td>
</tr>
</tbody>
</table>

DrDoc

2:58 am on Aug 18, 2008 (gmt 0)

For anyone anti-tables (or overly pro-tables) -- make sure you understand this first [webmasterworld.com].

Tables are supposed to be used for tabular data, such as:
- time tables
- calendars
- product listings (possibly, but not necessarily)
- feature listings

Any time you would more appropriately align the data using Excel than you would using PowerPoint -- tables should be used.

[edited by: DrDoc at 2:58 am (utc) on Aug. 18, 2008]

g1smd

9:24 am on Aug 18, 2008 (gmt 0)

*** have 5 rows for putting in the dates ***

Some months, you need six.

See the date picker in Google Analytics for example.