<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 > a.event { display: block; color: black; text-decoration: none; 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 if user_only else none) %} <a href="{{ url_for('event_details', event_uuid=event.event_uuid) }}" class="event"> {{ event.start_time_for_user(current_user).strftime('%H:%M') }}–{{ event.end_time_for_user(current_user).strftime('%H:%M') }} {{ event.title }} </a> {% endfor %} </td> {% endfor %} </tr> </tbody> </table>