formatting a calendar...

mrose
26 Mar 2007

...perhaps this is beyond my abilities, but i'm trying to format a calendar.

the obvious approach is a month is a table, a week is a row, and a day is a cell. i have two problems: ensuring that each cell is always a fixed size (1.5"x1.4") and that the information within a day has two parts, one anchored at the top, and the other at the bottom. for some reason, i can't get either of these two things to happen. obviously, i am lacking a clue here:

div.day {
  display: table-cell;
  width: 1.5in;
  height: 1.4in;
  padding: 1pt;
  border: 1px solid;
  vertical-align: top;
}
div.upper {
  height: 0.6in;
  vertical-align: top;
}
div.dotm {
  font-size: 14pt;
  text-align: right;
  float: right;
  width: 0.35in;
  height: 0.35in;
}
div.lower {
  height: 0.8in;
  vertical-align: bottom;
}
div.fasting {
  color: rgb(102, 0, 0);
  font-style: italic;

  float: left;
  width: 65%;
  height: 0.35in;
  vertical-align: bottom;
}
div.lectionary {
  float: right;
  width: 35%;
  height: 0.35in;
  text-align: right;
  vertical-align: bottom;
}

<div class="day">
    <div class="upper">
        <div class="dotm">23</div>
        <div class="feast">Conception of the Forerunner</div>
        <div class="lesser">Calling the Four Fishermen</div>
        <div class="season">Autumn begins</div>
    </div>
    <div class="lower">
        <div class="reading celeb">Epistle: Galatians 4:22-27 (Sep 9)</div>
        <div class="reading celeb">Gospel: Luke 1:5-25</div>
        <div class="reading regular">Epistle: 2 Corinthians 6:16b-7:1</div>
        <div class="reading regular">Gospel: Luke 5:1-11</div>
        <div class="fasting"></div>
        <div class="lectionary">17AP<br/>1AC</div>
    </div>
</div>

when i view this in a browser or look at prince's pdf output, the lower section isn't anchored to the bottom of the cell. further, some rows are certainly taller than others.

obviously, i lack enough css clue to see the obvious.

thanks,

/mtr

mikeday
28 Mar 2007

That's an interesting idea; it should be possible to make a calendar layout using tables, or using absolute positioning, or a combination of the two. I'll try making a quick sample to demonstrate.

mrose
28 Mar 2007

that would be great! i'll email you what i'm using now (not that it's a particularly good way of doing it...)

/mtr

StoneCypher
30 Mar 2007

There is a hack in place, making this code work. The div class for dayline should be height: 100%, instead of height: 1.399in . Unfortunately, it seems that Prince attempts to collapse height to fit (as if the box were display: inline) when given referential height characteristics on a display: table-cell position: relative container (similarly, setting .dayline to position: absolute simply failed miserably.) To see the bug, set .dayline's height to 100% instead. (Because this leads to a 0-height box, this evokes .upper and .lower seeming to be flipped; that behavior actually is correct, on a technicality, if you assume overflow for the box to be drawn.)

Anyhoo, this code should settle your needs.

<html><head><style type="text/css">
  *        { padding: 0; margin: 0; }
  table    { border-collapse: collapse; border: 2px solid black; }
  tr       { border: 0; }
  td.day   { height: 1.4in; width: 1.5in; border: 0; position: relative; }
  .dayline { height: 1.399in; width: 100%; position: relative; border: 1px solid red; }
  td.noday { height: 1.4in; width: 1.5in; position: relative; background-color: #eee; }
  .upper   { position: absolute; top: 0; }
  .lower   { position: absolute; bottom: 0; }
</style></head><body>

  <table>
    <tr>
      <td class="noday">&nbsp;</td>
      <td class="noday">&nbsp;</td>
      <td class="noday">&nbsp;</td>
      <td class="noday">&nbsp;</td>
      <td class="day"><div class="dayline"><div class="upper">upperZZZ</div><div class="lower">lowerAAA</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upperYYY</div><div class="lower">lowerBBB</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upperXXX</div><div class="lower">lowerCCC</div></div></td>
    </tr>
    <tr>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
    </tr>
    <tr>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
    </tr>
    <tr>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
    </tr>
    <tr>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="day"><div class="dayline"><div class="upper">upper</div><div class="lower">lower</div></div></td>
      <td class="noday">&nbsp;</td>
    </tr>
  </table>
  
</body></html>

Prince is a beautiful product which is head and shoulders above the competition in nearly every way I can find. That said, hi, here's a bug.

John Haugeland is http://fullof.bs/

Forum › How do I...?

formatting a calendar...