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` を走らせ、確認

以下のように表示されれば成功！

プロジェクトコード

https://github.com/risatoy/demo-flask-calendar