A Pen by Antoine Butler.

Apple-Calendar-Experiment.markdown

Apple Calendar Experiment

A Pen by Antoine Butler on CodePen.

License.

index.html

<table>
  <summary><strong>February</strong> 2014</summary>
  <thead>
    <tr>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
    </tr>
  </thead>
  <tr>
    <td>
      <span class="date">
        27
        <ul>
          <li>
            <span class="event">Bus Stop</span>
            <span class="time">4 pm</span>
          </li>
        </ul>  
      </span>
    </td>
    <td>
      <span class="date">28</span>
    </td>
    <td>
      <span class="date">29</span>
    </td>
    <td>
      <span class="date">30</span>
    </td>
    <td>
      <span class="date">31</span>
    </td>
    <td class="weekend">
      <span class="date">February 1</span>
    </td>
    <td class="weekend">
      <span class="date">
        2
        <ul>
          <li>
            <div class="event">Super Bowl</div>
            <span class="time">6:30 pm</span>
          </li>
        </ul>  
      </span>
    </td>
  </tr>
  <tr class="previous-week">
    <td>
      <span class="date">3</span>
    </td>
    <td>
      <span class="date">4</span>
    </td>
    <td>
      <span class="date">5</span>
    </td>
    <td>
      <span class="date">6</span>
    </td>
    <td>
      <span class="date">7</span>
    </td>
    <td class="weekend">
      <span class="date">8</span>
    </td>
    <td class="weekend">
      <span class="date">9</span>
    </td>
  </tr>
  <tr class="current-week">
    <td>
      <span class="date">10</span>
    </td>
    <td>
      <span class="date">11</span>
    </td>
    <td>
      <span class="date">12</span>
    </td>
    <td>
      <span class="date">13</span>
    </td>
    <td class="current-day">
      <span class="date">
        14
        <ul>
          <li><span class="event">Valentines Day</span></li>
        </ul>  
      </span>
    </td>
    <td class="weekend">
      <span class="date">15</span>
    </td>
    <td class="weekend">
      <span class="date">16</span>
    </td>
  </tr>
  <tr>
    <td>
      <span class="date">17</span>
    </td>
    <td>
      <span class="date">18</span>
    </td>
    <td>
      <span class="date">19</span>
    </td>
    <td>
      <span class="date">20</span>
    </td>
    <td>
      <span class="date">21</span>
    </td>
    <td class="weekend">
      <span class="date">22</span>
    </td>
    <td class="weekend">
      <span class="date">23</span>
    </td>
  </tr>
  <tr>
    <td>
      <span class="date">24</span>
    </td>
    <td>
      <span class="date">
        25
        <ul>
          <li>
            <span class="event">Breakfast with Joe Smchoe The Baker Man</span>
            <span class="time">10 am</span>
          </li>
          <li>
            <span class="event">Code Review</span>
            <span class="time">Noon</span>
          </li>
          <li>
            <span class="event">Project X Kickoff</span>
            <span class="time">5 pm</span>
          </li>
        </ul>  
      </span>
    </td>
    <td>
      <span class="date">26</span>
    </td>
    <td>
      <span class="date">27</span>
    </td>
    <td>
      <span class="date">28</span>
    </td>
    <td class="weekend">
      <span class="date">March 1</span>
    </td>
    <td class="weekend">
      <span class="date">2</span>
    </td>
  </tr>
</table>

style.less

* {
  font-size: 100%;
  
  &:before, &:after {
    box-sizing: border-box;
  }
}

body {
  margin: 0.5em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  
  @media (max-width: 800px) {
    .time {
      display: none;
    }
  }
}

summary {
  padding-bottom: 0.25em;
  font-size: 1.5em;
  font-weight: 100;
  text-align: right;
}

tr {
  position: relative;
}

th {
  text-align: right;
  color: #999;
  font-weight: normal;
  font-size: 0.85em;
}

td {
  width: 14.285714286%;
}

.date {
  text-align: right;
  display: block;
  height: 0;
  font-size: 0.8em;
  padding: 0.25em;
  padding-bottom: 73%;
  position: relative;
  border-bottom: 1px solid rgb(222, 219, 219);
  margin-left: 0.25em;
  margin-right: 0.25em;
  
  tr:first-child:not(.current-week) & {
    border-top: 1px solid rgb(222, 219, 219);
  }
  
  ul, li {
    margin: 0;
    padding: 0;
    list-style-position: inside;
    color: #333;
  }
  
  ul {
    text-align: left;
    font-size: 0.9em;
    width: 100%;
    overflow: hidden;
    position: absolute;
    font-weight: normal;
  }
  
  li {
    width: 100%;
    height: 1.4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
  }
}

.time {
  float: right;
  text-align: right;
  color: #999;
}

.event {
  color: #222;
}

.previous-week .date {
  border: none;
}

.current-week {
  border-top: 4px solid rgb(254, 214, 215);
}

.current-day {
  background: rgb(254, 214, 215);
  border-top: 4px solid rgb(203, 108, 107);
  
  .date {
    font-weight: bold;
    color: rgb(203, 108, 107);
  }
}

.weekend {
  background-clop: padding-box;
  background: rgb(245, 245, 245);
}