115 lines
4.1 KiB
Markdown
115 lines
4.1 KiB
Markdown
|
|
||
|
|
# 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
|
||
|
|
|
||
|
|
```python
|
||
|
|
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
|
||
|
|
|
||
|
|
```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>
|
||
|
|
```
|
||
|
|
|
||
|
|
```python
|
||
|
|
|
||
|
|
@app.route('/')
|
||
|
|
def calendar():
|
||
|
|
calendar_generator = CalendarGenerator()
|
||
|
|
calendar_data = calendar_generator.get_calendar_data()
|
||
|
|
return render_template('calendar.html', **calendar_data)
|
||
|
|
|
||
|
|
```
|
||
|
|
|