m4sk1n/calendar-social
1
0
Fork 0
forked from gergely/calendar-social
Code Issues Pull Requests Releases Wiki Activity

Create a basic month view

Browse Source
This commit is contained in:
Gergely Polonkai
2018-06-25 09:01:13 +02:00
parent 448ae1bce0
commit 6c4eb97c01
5 changed files with 153 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/index.html
View File

@@ -2,4 +2,6 @@
{% block content %}
{{ _('Welcome to Calendar.social, %(username)s!', username=current_user.username) }}
{% include 'month-view.html' %}
{% endblock content %}

82
app/templates/month-view.html Normal file
View File

@@ -0,0 +1,82 @@
<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>