Django FullCalendar 与 Django 2.x 或 3.x

Question

好吧，我知道这个问题已经被问过很多次了，但是我自己好像看不懂。我需要在我的 Django 应用程序中实现 FullCalendar，在我下载包含所有静态信息和内容的 FullCalendar 并将其呈现在我的页面上之后，我根本无法添加新事件。

我有我的事件模型，其中包含 start_date、end_date、ID 和标题，就像这里有人解释的那样。之后，我在 views.py 中创建了一个名为 all_events 的函数，其中 event = Event.object.all()，并将其放入上下文变量中。我现在没有表格，我只想在我从我的管理页面输入数据后呈现它 - 现在。想要尽可能简单。这是我的代码：

models.py

class Events(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=255, null=True, blank=True)
    start = models.DateTimeField(null=True, blank=True)
    end = models.DateTimeField(null=True, blank=True)

    class Meta:
        verbose_name = 'Event'
        verbose_name_plural = 'Events'

    def __str__(self):
        return self.name

views.py

def events(request):
    all_events = Events.objects.all()
    context = {
        "events": all_events,
    }
    return render(request, '.../selectable.html', context)

urls.py

    path('.../add_event', add_event, name='add_event'),

还有我的 html 页面：

{% extends 'base.html' %}
{% load static %}
{% block content_row %}
    <!DOCTYPE html>
    <html>
    <head>
        <link href='{% static 'fullcalendar/packages/core/main.css' %}' rel='stylesheet'/>
        <link href='{% static 'fullcalendar/packages/daygrid/main.css' %}' rel='stylesheet'/>
        <link href='{% static 'fullcalendar/packages/timegrid/main.css' %}' rel='stylesheet'/>
        <link href='{% static 'fullcalendar/packages/list/main.css' %}' rel='stylesheet'/>
        <script>

            document.addEventListener('DOMContentLoaded', function () {
                let calendarEl = document.getElementById('calendar');

                let calendar = new FullCalendar.Calendar(calendarEl, {
                    height: 'auto',
                    locale: 'sr',
                    plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                    defaultView: 'timeGridWeek',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    defaultDate: '2019-12-13',
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: [
                        {% for e in eventlist %}
                            {
                                title: '{{ e.event_name }}',
                                start: '{{ e.start_date|date:"Y-m-d" }}',
                                end: '{{ e.end_date|date:"Y-m-d" }}',
                            },
                        {% endfor %}
                    ]
                });

                calendar.render();
            });

        </script>
        <style>

            body {
                margin: 40px 10px;
                padding: 0;
                font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
                font-size: 14px;
            }

            #calendar {
                max-width: 900px;
                margin: 0 auto;
            }

        </style>
    </head>
    <body>

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

    <script src='{% static 'fullcalendar/packages/core/main.js' %}'></script>
    <script src='{% static 'fullcalendar/packages/interaction/main.js' %}'></script>
    <script src='{% static 'fullcalendar/packages/daygrid/main.js' %}'></script>
    <script src='{% static 'fullcalendar/packages/timegrid/main.js' %}'></script>
    <script src="{% static 'fullcalendar/packages/core/locales/sr.js' %}"></script>
    </body>
{% endblock %}

这是我的页面源代码，我的数据库中似乎有事件，但没有数据。

<script>

            document.addEventListener('DOMContentLoaded', function () {
                let calendarEl = document.getElementById('calendar');

                let calendar = new FullCalendar.Calendar(calendarEl, {
                    height: 'auto',
                    locale: 'sr',
                    plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                    defaultView: 'timeGridWeek',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    defaultDate: '2019-12-13',
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: [

                            {
                                title: '',
                                start: '',
                                end: '',
                            },

                            {
                                title: '',
                                start: '',
                                end: '',
                            },

                            {
                                title: '',
                                start: '',
                                end: '',
                            },

                    ]
                });

                calendar.render();
            });

        </script>

我不需要任何花哨的东西，我只是想弄清楚它是如何工作的。我没有安装 Django-scheduler 或 Django-fullcalendar，因为我不知道是否需要安装？！因此，我再次在我的页面上正确呈现了日历，静态的也是，我只是无法添加或查看我的模型中的任何事件。希望得到我的答复。谢谢。

Answer 1

一段时间后，我设法做对了。我将 post 我的代码放在这里。

Those are Events in fullcalendar.html, with time hours.

events: [
          {% for i in events %}
             {
                  title: "{{ i.event_name}}",
                  start: '{{ i.start_date|date:"Y-m-d" }}T{{ i.start_date|time:"H:i"}}',
                  end: '{{ i.end_date|date:"Y-m-d" }}T{{ i.end_date|time:"H:i" }}',
              },
          {% endfor %}
        ]

My event function inside views.py

def event(request):
    all_events = Events.objects.all()
    get_event_types = Events.objects.only('event_type')

    if request.GET:
        event_arr = []
        if request.GET.get('event_type') == "all":
            all_events = Events.objects.all()
        else:
            all_events = Events.objects.filter(event_type__icontains=request.GET.get('event_type'))

        for i in all_events:
            event_sub_arr = {}
            event_sub_arr['title'] = i.event_name
            start_date = datetime.strptime(str(i.start_date.date()), "%Y-%m-%dT%H:%M:%S").strftime("%Y-%m-%dT%H:%M:%S")
            end_date = datetime.strptime(str(i.end_date.date()), "%Y-%m-%dT%H:%M:%S").strftime("%Y-%m-%dT%H:%M:%S")
            event_sub_arr['start'] = start_date
            event_sub_arr['end'] = end_date
            event_arr.append(event_sub_arr)
        return HttpResponse(json.dumps(event_arr))

    context = {
        "events": all_events,
        "get_event_types": get_event_types,

    }
    return render(request, 'app/yourFullcalendarPage.html', context)

Event urls.py

path('calendar/', event, name='calendar'),

And finaly, Events model.py

class Events(models.Model):
    event_id = models.AutoField(primary_key=True)
    event_name = models.CharField(max_length=255, null=True, blank=True)
    start_date = models.DateTimeField(null=True, blank=True)
    end_date = models.DateTimeField(null=True, blank=True)
    event_type = models.CharField(max_length=10, null=True, blank=True)

    def __str__(self):
        return str(self.event_name)

    class Meta:
        verbose_name = 'Event'
        verbose_name_plural = 'Events'

Django FullCalendar 与 Django 2.x 或 3.x

Django FullCalendar with Django 2.x or 3.x

javascript

python

django

fullcalendar

fullcalendar-4