calendar-social/calsocial/templates/month-view.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 > 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) %}
                <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>