Django + Fullcalendar

Django + Fullcalendar

「中古カメラのB2Bオークションサイト：+Auction」で、オークションの日程の表示・提供に、Fullcalendarを採用しました

管理側で入力した内容をフロントに表示するという至極単純な方法です
難しいことは何もしておらず、必要最低限デス

Step.1 スケジュールを格納するModel作成

home/models.py

from django.db import models
from config.models import BaseModel

class Schedule(BaseModel):
  title = models.CharField(verbose_name='タイトル', max_length=500, blank=True, null=True)
  started = models.DateTimeField(verbose_name='開始日時', blank=True, null=True)
  ended = models.DateTimeField(verbose_name='終了日時', blank=True, null=True)

  def __str__(self):
    return self.title

  class Meta:
    db_table = 'da_schedule'
    verbose_name = '開催スケジュール'
    verbose_name_plural = '開催スケジュール'

• BaseModelは

config/models.py

class BaseModel(models.Model):
  class Meta:
    abstract = True

  created = models.DateTimeField(verbose_name='生成日時', auto_now_add=True)
  modified = models.DateTimeField(verbose_name='更新日時', auto_now=True)
  deleted = models.DateTimeField(verbose_name='削除日時', blank=True, null=True)

各Modelでの共通項ですので、BaseModelでまとめて設定し、各Modelでimportするようにしています

Step.2：templateファイルにfullcalendar設定

templates/home/index.html

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

{% block javascripts %}
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      locale: 'ja',
      height: 650,
      businessHours: true,
      events: [
        {% for schedule in schedules %}
        {
        title: '{{ schedule.title }}',
        start: '{{ schedule.started| date:"Y-m-d H:i" }}',
        end: '{{ schedule.ended| date:"Y-m-d H:i" }}',
        color: '#05ad16',
        },
        {% endfor %}
      ]
    });
    calendar.render();
  });
</script>
{% endblock javascripts %}

Step.3： viewsで、日程検索

home/views.py

class HomeIndexView(TemplateView):
  template_name = 'home/index.html'
  def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    context['schedules'] = Schedule.objects.filter(deleted__isnull=True)
    return context

結果

が表示されます