自分だけのクイズ作成 - Quipha公開中

【Django】FullCalendarでスケジュールのDB登録・表示【実践向け】

Django
スポンサーリンク

本記事は2ページにわたって解説しています。

はじめに

今回はFullCalendarを利用して、イベントを登録しカレンダーに表示する簡単なWebアプリケーションを作成してみます。
(スケジュールアプリの作成)

Djangoプロジェクトで作成し、イベントはデータベースに保存します。
そうすることにより、ブラウザを再度表示した際に、イベントを再表示することが出来ます。

最後に記載していますが、完成版のソースコードはGitHubで公開しています。

Djangoの環境とプロジェクトの作成方法は以下をご覧ください。

また、今回はデータベースにMySQLを使用しますので、以下を参考に環境を構築してください。

今回は使用しませんが、Django REST Frameworkを導入すると、APIが簡単に実装できます。

使用するバージョン
  • Windows 11 / 10
  • macOS Monterey (M1)
  • Python 3.10.2
  • Django 4.0.2
  • FullCalendar 5.10.2

WindowsでもMacでも同様に作成できます。

他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。

余談ですが、Laravel向けに解説した記事もございますので参考にしてください。

VS Codeインストール

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

VS Codeのオススメ設定や拡張機能などは、以下の記事にまとめました。

Djangoプロジェクトの作成

以下のコマンドで、Djangoプロジェクトを作成します。
最後にドットを付けて、同じ階層にプロジェクトファイルを作成します。

$ django-admin startproject djangoCalendarApp .

「djangoCalendarApp」はプロジェクト名ですので、任意で指定してください。

Djangoのデータベースの設定を変更します。
デフォルトでsqlite3が指定されていますが、MySQLに変更します。

djangoCalendarApp/settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'django_sample',
        'USER': 'root',
        'PASSWORD': 'password',
        'HOST': 'db',
        'PORT': '3306',
    }
}

DB名やユーザ、パスワードなどは、docker-compose.ymlの「db」に記載の通りです。

アプリ追加と設定

追加

以下のコマンドで、Djangoプロジェクトにアプリを追加します。

$ python manage.py startapp scheduleCalendar

URLの追加

カレンダーを表示すためのトップのURLを追加します。
まずはビューに、適当な文字を返却する処理を実装します。

scheduleCalendar/views.py
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.


def index(request):
    """
    カレンダー画面
    """
    return HttpResponse("Calendar")

アプリのURLを定義するファイルを作成します。

scheduleCalendar/urls.py
from django.urls import path
from . import views

app_name = "cal"
urlpatterns = [
    path("", views.index, name="index"),
]

サイトのurls.pyに追加します。
パスは任意で指定していただければと思いますが、「sc/」としました

djangoCalendarApp/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('sc/', include('scheduleCalendar.urls')),
    path('admin/', admin.site.urls),
]

設定の修正

サイトのsettings.pyに、アプリを追加します。

djangoCalendarApp/settings.py
INSTALLED_APPS = [
    'scheduleCalendar.apps.SchedulecalendarConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

ついでにタイムゾーンの修正も行います。

TIME_ZONE = 'Asia/Tokyo'

起動

この時点で動作確認をしましょう。
以下のコマンドでサーバーを起動します。

$ python manage.py runserver

以下のURLにアクセスします。

http://localhost:8000/sc/

「Calendar」と表示されたらOKです。

スポンサーリンク

FullCalendarとは

FullCalendarは、基本的に無料で利用することができます。
無料の機能はMITライセンスですので、個人でも商用でも使いやすいですね。

ちなみに一部はプレミアム機能であり有料です。

Pricing | FullCalendar

以前のバージョンのFullCalendarはjQueryに依存していましたが、新しいバージョンでは必要ありません。FullCalendarのみで動作します。

FullCalendar導入

今回はCDNを使用してFullcalendarを導入します。

fullcalendar CDN by jsDelivr - A CDN for npm and GitHub
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for...

現時点では、バージョン5.10.2でした。

カレンダーを表示するための画面のテンプレートファイルを作成します。
FullCalendarのCSSとJavaScriptをCDNで読み込みます。

また、app.jsも読み込むようにしました

scheduleCalendar/templates/
scheduleCalendar/index.html
<html>

<head>
    <meta charset='utf-8' />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.css">
</head>

<body>
    <div id='calendar'></div>

    {% load static %}
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.js"></script>
    <script src="{% static 'scheduleCalendar/app.js' %}"></script>
</body>

</html>

FullCalendarを制御するためのJavaScriptファイルを作成します。

scheduleCalendar/static/scheduleCalendar/app.js
document.addEventListener('DOMContentLoaded', function () {

    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth'
    });

    calendar.render();
});

ビューを修正します。
カレンダーを表示する画面を、テンプレートをレンダリングするように修正します。

scheduleCalendar/views.py
from django.template import loader
from django.http import HttpResponse

# Create your views here.


def index(request):
    """
    カレンダー画面
    """
    template = loader.get_template("scheduleCalendar/index.html")
    return HttpResponse(template.render())

以下のURLにアクセスします。

http://localhost:8000/sc/

今度はカレンダーが表示されました。

イベントの登録機能の実装

クリックイベントの実装

カレンダーをクリック、または日付の範囲をドラッグしイベントを登録できるようにしてみましょう。

ここでは、まだデータベースへ登録しません。

app.jsを以下のように修正します。
カレンダー上で日付を選択したイベントを追加しました。

scheduleCalendar/static/scheduleCalendar/app.js
document.addEventListener('DOMContentLoaded', function () {

    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',

        // 日付をクリック、または範囲を選択したイベント
        selectable: true,
        select: function (info) {
            alert("selected " + info.startStr + " to " + info.endStr);
        },
    });

    calendar.render();
});

画面を再読み込みしましょう。
クリックやドラッグで日付の範囲を指定すると、アラートが上がることが確認できます。

カレンダーにイベントを登録

イベントを追加する処理を実装してみましょう。
修正箇所だけ抜粋したコードです。

scheduleCalendar/static/scheduleCalendar/app.js
        // 日付をクリック、または範囲を選択したイベント
        selectable: true,
        select: function (info) {
            //alert("selected " + info.startStr + " to " + info.endStr);

            // 入力ダイアログ
            const eventName = prompt("イベントを入力してください");

            if (eventName) {
                // イベントの追加
                calendar.addEvent({
                    title: eventName,
                    start: info.start,
                    end: info.end,
                    allDay: true,
                });
            }
        },

日付をドラッグし範囲を選択します。
イベントを入力するプロンプトが表示されますので、任意でイベント名を入力します。

イベントの追加ができました。

ここまでの手順で、カレンダーにイベントを登録することが出来ました。
ただし、ブラウザの再描画を行うとイベントはクリアされてしまいます。

登録されたイベントを次回以降も表示するために、サーバーサイドの方でデータベースに保存しましょう。(永続化)

テーブルの作成

テーブル定義に合わせたモデルを作成します。

scheduleCalendar/models.py
from django.db import models

# Create your models here.


class Event(models.Model):
    start_date = models.DateField()
    end_date = models.DateField()
    event_name = models.CharField(max_length=200)

以下のコマンドでマイグレーションファイルを作成します。

$ python manage.py makemigrations scheduleCalendar

以下のファイルが自動で作成されます。

scheduleCalendar/migrations/0001_initial.py
# Generated by Django 4.0.2 on 2022-03-01 14:39

from django.db import migrations, models


class Migration(migrations.Migration):

    initial = True

    dependencies = [
    ]

    operations = [
        migrations.CreateModel(
            name='Event',
            fields=[
                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                ('start_date', models.DateField()),
                ('end_date', models.DateField()),
                ('event_name', models.CharField(max_length=200)),
            ],
        ),
    ]

以下のコマンドでマイグレーションを実行し、テーブルを作成します。

$ python manage.py migrate

phpMyAdminから確認しましょう。

http://localhost:8080/

「scheduleCalendar_event」というテーブルが作成されました。

引き続き次のページからは、データベースへの登録処理を作成します。

コメント

タイトルとURLをコピーしました