CSS Calendar Test

Summary

Just a tool to make easier visualizing experiments in redesigning the calendar grid. There are 365 blocks of numbers showing that follow the order of the months, including one more for Feb 29 that is invisible (or display:none to be correct) via CSS.

I also added six extra blocks in the front that serve as placeholders. I could remove one or more via CSS (like in the example below).

I made this around the same time I posted my first Flush entry about calendar reform.

Example

Adjust the width of your window to see the elements float. See the original page.

January
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
February
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
March
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
April
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
May
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
July
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
August
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
September
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
October
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
November
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
December
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Date Created

Dec 2007.

Help

  1. None. Just a simple CSS float thing.

Process

Little or no process recorded. If there was, it's not that worth it.

  1. Numbers only.

The Code

Here’s the code. Please link back here if you’re using it.

Put this CSS in the head tag.

.date, .pre {
float: left;
width:2em;
height:1.5em;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:2px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}

.month{
clear:left;
display:none;
}


/*an example of how to command the placeholders to display. this one removes 1 block, showing 5.
.show5{
display:none;
}

Put this HTML in the body tag.

<div id='exampleContainer' class='clearfix' >
    
    <div class='pre show0 show1 show2 show3 show4 show5' id='pre1' ></div>
    <div class='pre show0 show1 show2 show3 show4' id='pre2' ></div>
    <div class='pre show0 show1 show2 show3' id='pre3' ></div>
    <div class='pre show0 show1 show2' id='pre4' ></div>
    <div class='pre show0 show1' id='pre5' ></div>
    <div class='pre show0' id='pre6' ></div>
    
    <!-- ///////////////////////////////// January -->
    <div class='month' >January</div>
    <div class='date' >1</div>
    <div class='date' >2</div>
    <div class='date' >3</div>
    <div class='date' >4</div>
    <div class='date' >5</div>
    <div class='date' >6</div>
    <div class='date' >7</div>
    <div class='date' >8</div>
    <div class='date' >9</div>
    <div class='date' >10</div>
    
    <div class='date' >11</div>
    <div class='date' >12</div>
    <div class='date' >13</div>
    <div class='date' >14</div>
    <div class='date' >15</div>
    <div class='date' >16</div>
    <div class='date' >17</div>
    <div class='date' >18</div>
    <div class='date' >19</div>
    <div class='date' >20</div>
    
    <div class='date' >21</div>
    <div class='date' >22</div>
    <div class='date' >23</div>
    <div class='date' >24</div>
    <div class='date' >25</div>
    <div class='date' >26</div>
    <div class='date' >27</div>
    <div class='date' >28</div>
    <div class='date' >29</div>
    <div class='date' >30</div>
    
    <div class='date' >31</div>
    
    <!-- ///////////////////////////////// FEBRUARY -->
    <div class='month' >February</div>
    <div class='date' >1</div>
    <div class='date' >2</div>
    <div class='date' >3</div>
    <div class='date' >4</div>
    <div class='date' >5</div>
    <div class='date' >6</div>
    <div class='date' >7</div>
    <div class='date' >8</div>
    <div class='date' >9</div>
    <div class='date' >10</div>
    
    <div class='date' >11</div>
    <div class='date' >12</div>
    <div class='date' >13</div>
    <div class='date' >14</div>
    <div class='date' >15</div>
    <div class='date' >16</div>
    <div class='date' >17</div>
    <div class='date' >18</div>
    <div class='date' >19</div>
    <div class='date' >20</div>
    
    <div class='date' >21</div>
    <div class='date' >22</div>
    <div class='date' >23</div>
    <div class='date' >24</div>
    <div class='date' >25</div>
    <div class='date' >26</div>
    <div class='date' >27</div>
    <div class='date' >28</div>
    <div class='date' id='leap' >29</div>
    
    <!-- Then continue to the other months -->
        
</div><!--end div exampleContainer-->

Return to top