| .. | ||
| in | ||
| out | ||
| static | ||
| readme.md | ||
| server.py | ||
| template_fixer.py | ||
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"><</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">></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)