Build a Dynamic “Moyu Office” Countdown Page with FastAPI and Jinja2

Introduction

The author was inspired by a countdown template and created a “Moyu Office” page that shows the current date, weekday, and the number of days remaining until various holidays and the weekend.

Implementation Overview

Use a single‑page HTML file served by FastAPI.

Dynamic data (current date, holiday distances) are generated with Python and injected into the template using Jinja2.

The zhdate library converts between Gregorian and Chinese lunar calendars.

Calculate the distance to each holiday, adjusting the year when the holiday has already passed.

Determine the weekday and compute days left until the weekend (5‑day work week).

Collect all values into a list of dictionaries, sort them by remaining days, and pass the list to the template.

Key Code Snippets

# -*- coding: utf-8 -*-
import datetime
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from zhdate import ZhDate as lunar_date

app = FastAPI(debug=False, title="My API")
templates = Jinja2Templates(directory="templates")

today = datetime.date.today()
# ... calculate distances ...

def get_week_day(date):
    week_day_dict = {
        0: 'Monday', 1: 'Tuesday', 2: 'Wednesday',
        3: 'Thursday', 4: 'Friday', 5: 'Saturday', 6: 'Sunday'
    }
    return week_day_dict[date.weekday()]

@app.get("/", response_class=HTMLResponse)
async def readme(request: Request):
    return templates.TemplateResponse(
        "readme.html",
        {"request": request, "time_": time_, "now_": now_, "week_day_": week_day_}
    )

Template Example (readme.html)

<center>
【Moyu Office】Today is {{ now_ }} {{ week_day_ }}
{% for v_ in time_ %}
<p>🐟 Distance to {{ v_.title }}: {{ v_.v_ }} days</p>
{% else %}
<p>No data</p>
{% endfor %}
</center>

The page can be served behind Nginx for production deployment. A preview of the rendered page is shown below.

The full source code is available on GitHub at https://github.com/PY-GZKY/moyu .