How to create a horizontal calendar with nested lists?


Tags: css,html-lists,nested-lists

Problem :

I want to create a date chooser like this:

| 1 2 3 4 5 6 7 8 9 .. 29 30 31 | 1 2 3 4 ..
| January                       | February

I think the best structure for this would be:

 <div class="outer">
   <ol>
     <li class="month">
     January
       <ol>
         <li class="day">1</li>
         <li class="day">2</li>
         <li class="day">3</li>
         ...
        </ol>
      </li>
      <li class="month">
        February
        <ol>
          <li class="day">1</li>
          <li class="day">2</li>
          <li class="day">3</li>
          ...
        </ol>
      </li>
    </ol>
 </div>

Now I would like the outer divs (.month) to expand to the inner divs (.day), which are all of the same width. And then have that in a big horizontal div (.outer) so I can scroll the innards. I already got this to work with only one month, but when I add more months to it, it doesn't work anymore.

I obviously cannot set a fixed with for the months because they dont have the same amount of days.

I set up a Fiddle here with some css, but it doesn't work and I dont know how to go about it.



Solution :

These kind of questions are just fun to answer step-by-step.

The basics of the solution is to display all list items as inline-block:

.calendar > ol > li {
    display: inline-block;
}
.calendar > ol > li > ol {
    padding: 0;
}
.calendar > ol > li > ol > li {
    display: inline-block;
}

Give the dates a fixed size, put all months on a single line, and let the container scroll:

.calendar {
    overflow-x: auto;
}
.calendar > ol {
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
.calendar > ol > li {
    display: inline-block;
}
.calendar > ol > li > ol {
    padding: 0;
}
.calendar > ol > li > ol > li {
    display: inline-block;
    width: 30px;
}

And finally, shuffle the months' and the dates' positions, resulting in this snippit:

.calendar {
    overflow-x: auto;
    overflow-y: hidden;
}
.calendar > ol {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    margin-bottom: -1em;
}
.calendar > ol > li {
    display: inline-block;
    margin-top: 1em;
}
.calendar > ol > li > ol {
    padding: 0;
}
.calendar > ol > li > ol > li {
    display: inline-block;
    width: 30px;
    position: relative;
    top: -2.2em;
}
<div class="calendar">
    <ol>
        <li>January
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </li>
        <li>February
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ol>
        </li>
        <li>March
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </li>
        <li>April
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </li>
    </ol>
</div>

Note that this is a strict CSS2 solution compatible with even the oldest browser, does not use absolute positioning so it has no consequence for the content around it, requires just a single style class, is compatible with every font size, and has no impact on the markup at all.


    CSS Howto..

    jquery carousel how to have a gradient on start and ending slides

    How to keep nav bar from shifting elements to next line when zooming in?

    How to avoid this overlapping in plain CSS?

    How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

    How to make table td take the width of its content

    How to debug CSS in Android native browser?

    how to fix menu bar css-adapter stuffs with IE

    How to change css styles of a jQuery plugin?

    How to trigger css :hover event on PageLoad

    How to fix a element (have example) on the screen using jquery /css?

    JavaScript- How to change “message” div to yellow

    How to make this breed of resizable vertical divider for two divs?

    ASP.NET How to set Text to the right side of image

    how to override the specific style of spans in a div [span in a span ] using css or jquery?

    How to put
      around image in css

    How do you style TextFlow with CSS Styles in Flex 4.5.1?

    How do browsers parse/render CSS?

    how to make comment div active on hover

    How can I style external links like Wikipedia?

    How can i make this border to the end?CSS

    How to fix height respective screen resolution?

    how to center text AND have max width of 800px in CSS?

    How do you center a line-wrapped

    How to show different logo on different pages in wordpress theme?

    How to make this inner div vertically centered? (Using CSS)

    How to use 3 background images for a resizable layout in CSS?

    How to create a pop up animation with a modal using css?

    How to create and style dropdown menus using the wordpress menus section? [closed]

    How to ignore comments in sass partial files?

    How to do caption hover effect on a background?