Create a basic month view

app/__init__.py

@@ -14,6 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+from datetime import datetime
 import os
 
 from flask import Flask, current_app, redirect, render_template, url_for
@@ -69,10 +70,14 @@ app = CalendarSocialApp(__name__)
 
 @app.route('/')
 def hello():
+    from app.calendar_system.gregorian import GregorianCalendar
+
     if not current_user.is_authenticated:
         return render_template('welcome.html')
 
-    return render_template('index.html')
+    calendar = GregorianCalendar(datetime.utcnow().timestamp())
+
+    return render_template('index.html', calendar=calendar)
 
 
 @app.route('/register', methods=['POST', 'GET'])

app/calendar_system/__init__.py

@@ -0,0 +1,15 @@
+class CalendarSystem:
+    __has_months__ = False
+    __has_weeks__ = False
+
+    @property
+    def day_names(self):
+        raise NotImplementedError()
+
+    @property
+    def month(self):
+        raise NotImplementedError()
+
+    @property
+    def days(self):
+        raise NotImplementedError()

app/calendar_system/gregorian.py

@@ -0,0 +1,48 @@
+from datetime import datetime, timedelta
+from flask_babel import lazy_gettext as _
+
+from . import CalendarSystem
+
+
+class GregorianCalendar(CalendarSystem):
+    __name__ = _('Gregorian')
+
+    __has_months__ = True
+
+    START_DAY = 0
+    END_DAY = 7
+
+    day_names = (
+        _('Monday'),
+        _('Tuesday'),
+        _('Wednesday'),
+        _('Thursday'),
+        _('Friday'),
+        _('Saturday'),
+        _('Sunday'),
+    )
+
+    def __init__(self, timestamp):
+        self.timestamp = datetime.utcfromtimestamp(timestamp)
+
+    @property
+    def month(self):
+        return self.timestamp.strftime("%B, %Y")
+
+    @property
+    def days(self):
+        day_list = []
+
+        start_day = self.timestamp.replace(day=1)
+
+        while start_day.weekday() > self.START_DAY:
+            start_day -= timedelta(days=1)
+
+        day_list.append(start_day)
+        current_day = start_day
+
+        while current_day.weekday() < self.END_DAY and current_day.month <= self.timestamp.month:
+            current_day += timedelta(days=1)
+            day_list.append(current_day)
+
+        return day_list

app/templates/index.html

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

app/templates/month-view.html

@@ -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>