FullCalendar.jsを使って簡単にカレンダーFlaskアプリを作る方法をまとめました。
最終形態
Flaskのセットアップ
1. app.pyを作成
python/app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run(host='0.0.0.0', port=80)
2. templatesフォルダーを作成し、フォルダー内にindex.htmlを作成
html/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Flask Calendar App</h1>
<a href="/calendar">Calendar</a>
</body>
</html>
3. app.pyにカレンダーページを表示させるRouteを追加
python/app.py
@app.route('/calendar')
def calendar():
return render_template('calendar.html')
4. templatesフォルダー内にcalendar.htmlを作成
html/calendar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
FullCalendar.jsの導入
5. calendar.htmlにfullcalendarを追加
html/calendar.html
<head>
(snip)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.0/main.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script>
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {});
calendar.render();
</script>
</body>
6. flask runを走らせ、ローカルリンクにアクセス
以下のように表示されれば
イベントの追加
7. app.py内にeventsのvariableを作り、calendar routeに渡す
python/app.py
events = [
{
'title': 'event1',
'date': '2021-10-15'
},
{
'title': 'event2',
'date': '2021-10-20'
}
]
(snip)
@app.route('/calendar')
def calendar():
return render_template('calendar.html', events=events)
8. 以下のコードをcalendar.htmlに追加し、イベントを追加
html/calendar.html
let calendar = new FullCalendar.Calendar(calendarEl, {
events: [
{% for event in events %}
{
title: '{{ event.title }}',
start: '{{ event.date }}',
},
{% endfor %}
]
});
9. flask run を走らせ、確認
以下のように表示されれば成功！
