Redbooth

Calendar

CalendarCalendar - Basic

This component is to style tables that contain days and elements inside

February, Sun 28
Mon 29
Tue 30
Wed 31
Thu 1
  • Ola k ase
Fri 2
Sat 3
Sun 5
Mon 6
Tue 7
Wed 8
Thu 9
Fri 10
Sat 11
 
<table class="calendar">
  <tr>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--outdated">
        <div class="calendar__date__day">February, Sun 28</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--outdated">
        <div class="calendar__date__day">Mon 29</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--outdated">
        <div class="calendar__date__day">Tue 30</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--outdated">
        <div class="calendar__date__day">Wed 31</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day calendar__date__day--first">Thu 1</div>
        <ul class="calendar__items">
          <li class="calendar__item">
            <div class="calendar__item__element">Ola k ase</div>
            <div class="calendar__item__meta">
              <i class="icon-refresh"></i>
            </div>
          </li>
        </ul>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Fri 2</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Sat 3</div>
      </div>
    </td>
  </tr>
  <tr>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Sun 5</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Mon 6</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Tue 7</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Wed 8</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Thu 9</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Fri 10</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--today">
        <div class="calendar__date__day">Sat 11</div>
      </div>
    </td>
  </tr>
</table>

Calendar cellCalendar - Cell

How looks a td cell in calendar

  • .calendar__cell--today - Cell styles for today
  • .calendar__cell--with-add-link - Cell with add link
  • .calendar__cell--outdated - Outdated cell. Do not belongs to current month
February, Sun 28
.calendar__cell--today
February, Sun 28
.calendar__cell--with-add-link
February, Sun 28
.calendar__cell--outdated
February, Sun 28
 
<table class="calendar">
  <tr>
    <td class="calendar__cell [modifier class]">
      <div class="calendar__date">
        <div class="calendar__date__day">February, Sun 28</div>
      </div>
      <button type="button" class="calendar__add">
        <i class="button-icon icon-tb-plus"></i>
        <span>Add a task</span>
      </button>
    </td>
  </tr>
</table>

Calendar with SummaryCalendar - Summary

When the calendar has a 8th column with a summary

February, Sun 28
Mon 29
Tue 30
Wed 31
  • Ola k ase
Thu 1
Fri 2
Sat 3
Total
Sun 5
Mon 6
Tue 7
Wed 8
Thu 9
Fri 10
Sat 11
Total
 
<table class="calendar calendar--summary">
  <tr>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--outdated">
        <div class="calendar__date__day">February, Sun 28</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--outdated">
        <div class="calendar__date__day">Mon 29</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--outdated">
        <div class="calendar__date__day">Tue 30</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--outdated">
        <div class="calendar__date__day">Wed 31</div>
        <ul class="calendar__items">
          <li class="calendar__item">
            <div class="calendar__item__element">Ola k ase</div>
            <div class="calendar__item__meta">
              <i class="icon-refresh"></i>
            </div>
          </li>
        </ul>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day calendar__date__day--first">Thu 1</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Fri 2</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Sat 3</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Total</div>
      </div>
    </td>
  </tr>
  <tr>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Sun 5</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Mon 6</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date"></div>
      <div class="calendar__date">
        <div class="calendar__date__day">Tue 7</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Wed 8</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Thu 9</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Fri 10</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date calendar__date--today">
        <div class="calendar__date__day">Sat 11</div>
      </div>
    </td>
    <td class="calendar__cell">
      <div class="calendar__date">
        <div class="calendar__date__day">Total</div>
      </div>
    </td>
  </tr>
</table>