Basic template and styling for kairios

calendar.html

{% load i18n %}

<div class="calendar">
  <div class="calendar-heading">
    <h3 class="calendar-title">{{ title }}</h3>

    <div class="calendar-nav">
      {% if prev %}
        <a href="{{ prev }}">{% trans "Previous month" %}</a>
      {% endif %}

      <span class="calendar-date">{{ calendar_date|date:'m.Y' }}</span>

      {% if next %}
        <a href="{{ prev }}">{% trans "Next month" %}</a>
      {% endif %}
    </div>
  </div>

  <div class="calendar-body">
    <table class="calendar-table">
      {% for row in grid %}
      <tr>
        {% for day in row %}
          {% if not day %}
            <td class="day noday"></td>
          {% else %}
            {% with day_day=day.0 day_events=day.1 link=day.2 is_today=day.3 %}
            <td class="day {% if day.1 %}day-has-events{% else %}day-no-events{% endif %}">
              {% if link %}
                <a href="{{ link }}" class="day-number">{{ day_day }}</a>
              {% else %}
                <span class="day-number">{{ day_day }}</span>
              {% endif %}
              {% if day_events %}
                <div class="day-event-list">
                  {% for event in day_events %}
                    <div class="day-event">
                      {{ event }}
                    </div>
                  {% endfor %}
                </div>
              {% endif %}
            </td>
            {% endwith %}
          {% endif %}
        {% endfor %}
      </tr>
      {% endfor %}
    </table>
  </div>
</div>

calendar.less

        .calendar {
}
.calendar-heading {
  .text-center();
}
.calendar-title {
}
.calendar-nav {
}
.calendar-date {
}
.calendar-body {
}
.calendar-table {
  .table();
}
td.day {
  border: 1px solid @table-border-color;
  background: #fff;
  width: (100%/7);
  height:100px;
  &.noday {
    background: @gray-lighter;
  }
  &.has-events {
  }
  &.no-events {
  }
}
.day-number {
  display: block;
  font-size: @font-size-small;
  .text-right();
}
a.day-number {
}
span.day-number {
  color: @gray;
}
.day-event-list {
  font-size: @font-size-small;
}
.day-event {
}

kairios.png