forked from gergely/calendar-social
83 lines
1.8 KiB
HTML
83 lines
1.8 KiB
HTML
|
<style>
|
||
|
|
table.calendar > * {
|
||
|
|
font-family: sans;
|
||
|
|
}
|
||
|
|
|
||
|
|
table.calendar {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.month > td {
|
||
|
|
text-align: center;
|
||
|
|
font-weight: bold;
|
||
|
|
border-bottom: 2px solid black;
|
||
|
|
padding-bottom: .5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.days > td {
|
||
|
|
text-align: center;
|
||
|
|
border-bottom: 2px solid black;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.week > td {
|
||
|
|
height: 3em;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.week > td > span.day-num {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.week > td.other-month > span.day-num {
|
||
|
|
font-weight: normal;
|
||
|
|
color: #909090;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.week > td.today {
|
||
|
|
background-color: #d8d8d8;
|
||
|
|
}
|
||
|
|
|
||
|
|
td > div.event {
|
||
|
|
border: 1px solid green;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<table class="calendar">
|
||
|
|
<thead>
|
||
|
|
<tr class="month">
|
||
|
|
<td colspan="7">{{ calendar.month }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr class="days">
|
||
|
|
{% for day in calendar.day_names %}
|
||
|
|
<td>
|
||
|
|
{{ day }}
|
||
|
|
</td>
|
||
|
|
{% endfor %}
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{% set markers = namespace() -%}
|
||
|
|
{% set markers.first = true -%}
|
||
|
|
{% for day in calendar.days -%}
|
||
|
|
{% if loop.index0 % (calendar.day_names) | length == 0 -%}
|
||
|
|
{% if not markers.first %}
|
||
|
|
</tr>
|
||
|
|
{%- else %}
|
||
|
|
{%- set markers.first = false %}
|
||
|
|
{%- endif %}
|
||
|
|
<tr class="week">
|
||
|
|
{%- endif %}
|
||
|
|
<td class="{% if day.month != calendar.timestamp.month %} other-month{% endif %}{% if day.date() == calendar.timestamp.date() %} today{% endif %}">
|
||
|
|
<span class="day-num">{{ day.day }}</span>
|
||
|
|
{% if day.date() == calendar.timestamp.date() %}
|
||
|
|
<div class="event">
|
||
|
|
This is a task
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</td>
|
||
|
|
{% endfor %}
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|