MIT licenceで使いやすいFullCalendarをPython Jinja2のHTMLで試してみる

FullCalendarとは

FullCalendarとはcalendarを表示するOpen Sourceのlibraryです。
https://fullcalendar.io/
2020/11時点ではGitHub Star 13k以上、releaseも継続して行われいているlibraryです。

FullCalendarの何がすごいのか

premium planとして有料枠も用意されているのですが、ほとんどのcalendar styleはMIT licenceでfree、そして商用利用も可能です。freeでも一般的なcalendar styleである、Month View、TimeGrid Viewはじめいくつかが利用できること、そしてlocaleにも対応しています。
https://fullcalendar.io/docs

FullCalendarをPython Jinja2 HTMLに組み込む

以下、実際にJinja2に組み込んでみます。official documentにtutorialがあるので簡単に出来ます。

index.html

{% extends 'bootstrap/base.html' %}

{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.4.0/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.4.0/main.min.js"></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth'
    });
    calendar.render();
  });

</script>
{% endblock %}

{% block page_content %}
<div id='calendar'></div>
{% endblock %}

上記をbrowserで表示すると以下のようになります。右上の<, >で前後の月へ移動、todayで当月を表示します。

まとめ

Pythonのweb projectに利用できるcalendarを探していたところ、FullCalendarにたどり着きました。現状は主に表示のみがsupportされているので、calendar eventの登録はapplicationで実装する必要があります。とはいえ、表示部分は個人や小規模なproject levelで実装しようとなると非常に労力を要するので、現状の範囲でもすでに便利なlibraryだといえます。