forked from gergely/calendar-social
132 lines
3.2 KiB
HTML
132 lines
3.2 KiB
HTML
<style>
|
||
table.calendar > * {
|
||
font-family: sans;
|
||
}
|
||
|
||
table.calendar {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
tr.month > td {
|
||
text-align: center;
|
||
font-weight: bold;
|
||
border-bottom: 2px solid black;
|
||
padding-bottom: .5em;
|
||
}
|
||
|
||
tr.month > td > a {
|
||
font-weight: normal;
|
||
color: black;
|
||
}
|
||
|
||
tr.month > td.month-name > a {
|
||
font-weight: bold;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
tr.week > td > div.event {
|
||
border: 1px solid green;
|
||
background-color: white;
|
||
border-radius: 2px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
tr.sizer > td {
|
||
width: 14.2857%;
|
||
height: 0;
|
||
}
|
||
</style>
|
||
<table class="calendar">
|
||
<thead>
|
||
<tr class="sizer">
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
<tr class="month">
|
||
<td>
|
||
<a href="{{ url_for('hello', date=calendar.prev_year) }}">« {{ calendar.prev_year_year }}</a>
|
||
</td>
|
||
<td>
|
||
<a href="{{ url_for('hello', date=calendar.prev_month) }}">‹ {{ calendar.prev_month_name }}</a>
|
||
</td>
|
||
<td colspan="3" class="month-name">
|
||
{% if not calendar.has_today %}
|
||
<a href="{{ url_for('hello', date=now_ts) }}">
|
||
{% endif %}
|
||
{{ calendar.month }}
|
||
{% if not calendar.has_today %}
|
||
</a>
|
||
{% endif %}
|
||
</td>
|
||
<td>
|
||
<a href="{{ url_for('hello', date=calendar.next_month) }}">{{ calendar.next_month_name }} ›</a>
|
||
</td>
|
||
<td>
|
||
<a href="{{ url_for('hello', date=calendar.next_year) }}">{{ calendar.next_year_year }} »</a>
|
||
</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() == now.date() %} today{% endif %}">
|
||
<span class="day-num">{{ day.day }}</span>
|
||
{% for event in calendar.day_events(day, user=current_user) %}
|
||
<div class="event">
|
||
{{ event.start_time_tz.strftime('%H:%M') }}–{{ event.end_time_tz.strftime('%H:%M') }}
|
||
({{ event.time_zone }})
|
||
{{ event.title }}
|
||
</div>
|
||
{% endfor %}
|
||
</td>
|
||
{% endfor %}
|
||
</tr>
|
||
</tbody>
|
||
</table>
|