Calendar

TODO: now need to use calendar of our template, above is generic one not so nice, but logic for calendar is clear

but looked at other example and used some AI to convert to something useful

see https://www.creative-tim.com/twcomponents/component/full-calendar

they use a javascript snipet we need todo it on server e.g.

from datetime import datetime

from datetime import datetime

class CalendarGenerator:
    def __init__(self):
        self.month_names = [
            'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December'
        ]
        self.day_names = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
        self.year = datetime.now().year

    def is_leap_year(self, year):
        return (year % 4 == 0 and year % 100 != 0) or (year % 400 == 0)

    def days_of_month(self):
        february_days = 29 if self.is_leap_year(self.year) else 28
        return [31, february_days, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

    def day_of_week(self, year, month):
        day_of_week = datetime(year, month + 1, 1).weekday()
        return (day_of_week + 1) % 7  # Adjust to start from Monday

    def generate_days(self):
        days = []
        for month in range(12):
            month_days = []
            for day in range(1, self.days_of_month()[month] + 1):
                if len(month_days) < self.day_of_week(self.year, month):
                    month_days.append('')
                month_days.append(day)
            days.append(month_days)
        return days

    def get_calendar_data(self):
        return {
            "month_names": self.month_names,
            "day_names": self.day_names,
            "year": self.year,
            "days": self.generate_days()
        }

calendar html

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="w-full p-2 m-2 bg-gray-100 rounded-lg shadow">
    <div class="flex flex-wrap justify-center">
        <div class="flex flex-wrap w-full h-12 p-1 m-1 text-xl font-bold bg-white rounded-lg shadow-lg">
            <p class="w-1/3 p-1 text-center text-green-900 shadow-md cursor-pointer hover:text-green-600 hover:shadow-inner bg-gray-50 rounded-l-md">&lt;</p>
            <p class="w-1/3 p-1 text-center text-green-900 shadow-md cursor-pointer hover:text-green-600 hover:shadow-inner bg-gray-50">{{ year }}</p>
            <p class="w-1/3 p-1 text-center text-green-900 shadow-md cursor-pointer hover:text-green-600 hover:shadow-inner bg-gray-50 rounded-r-md">&gt;</p>
        </div>
        {% for month, days in days %}
        <div class="p-1 m-1 font-sans bg-white rounded shadow-md lg:w-72 w-80 bg-blend-luminosity bg-gradient-to-b from-green-50 via-white to-green-50">
            <p class="p-1 text-xl font-semibold text-center text-indigo-800">{{ month_names[loop.index0] }}</p>
            <div class="p-1 m-1">
                <div class="grid grid-cols-7 font-semibold text-green-800 border-b-2">
                    {% for day in day_names %}
                    <div class="grid place-items-center" :class="{'text-red-600': day == 'Su'}">
                        <p>{{ day }}</p>
                    </div>
                    {% endfor %}
                </div>
                <!-- Calendar days block -->
                <div class="grid grid-cols-7 gap-1 font-semibold text-center text-gray-800">
                    {% for day in days %}
                    <div :class="{'ring-green-400 ring-4 rounded-full': false, 'text-red-600': day == '' , 'hover:bg-green-100': false}">
                        <p>{{ day }}</p>
                    </div>
                    {% endfor %}
                </div>
                <!-- End of calendar days block -->
            </div>
        </div>
        {% endfor %}
    </div>
</div>
</body>
</html>


@app.route('/')
def calendar():
    calendar_generator = CalendarGenerator()
    calendar_data = calendar_generator.get_calendar_data()
    return render_template('calendar.html', **calendar_data)

4.1 KiB Raw Blame History

Calendar

calendar html

4.1 KiB

Raw Blame History