Django 显示事件中的完整日历

Question

我是 Django 和 FullCalendar 的新手，因此非常感谢您提供的任何帮助。我的最终目标是使用 FullCalendar 在 Django 中显示 O365 日历中的事件。在这个阶段暂时搁置 O365 集成，我只是想让 FullCalendar 在我的模型中显示当前事件。我试图模仿这里发布的解决方案 FullCalendar in Django 和这里 Fullcalendar Does not display data 但不幸的是事件没有显示。

这是我的代码：

models.py 来自我的名为“bookings”的应用程序

from django.db import models

class Events(models.Model):
    event_id = models.AutoField(primary_key=True)
    exchange_id = models.CharField(max_length=255,null=True,blank=True)
    event_start = models.DateTimeField(null=True,blank=True)
    event_end = models.DateTimeField(null=True,blank=True)
    event_subject = models.CharField(max_length=255,null=True,blank=True)
    event_location = models.CharField(max_length=255,null=True,blank=True)
    event_category = models.CharField(max_length=255,null=True,blank=True)
    event_attendees = models.CharField(max_length=255,null=True,blank=True)

    def __str__(self):
        return self.event_subject

views.py。我已经注释掉了发布的其他解决方案中与类别类型的删除选择相关的位。我还在 bookings.views.py 中使用以下脚本进行了测试，但没有成功。

from bookings.models import Events

@method_decorator(login_required, name='dispatch')
class CalendarPage(TemplateView):
    template_name = 'calendar.html'

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

# if filters applied then get parameter and filter based on condition else return object
    if request.GET:
        event_arr = []
        # if request.GET.get('event_category') == "all":
        #     all_events = Events.objects.all()
        # else:
        #     all_events = Events.objects.filter(event_category__icontains=request.GET.get('event_category'))

        for i in all_events:
            event_sub_arr = {}
            event_sub_arr['title'] = i.event_subject
            start_date = date(i.event_start.date(), "%Y-%m-%d")
            end_date = date(i.event_end.date(), "%Y-%m-%d")
            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,'calendar',context)

还有我的模板calendar.html：

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          defaultView: 'month',
          editable: true,
          eventLimit: true,
          events: [
                {% for i in events %}
                {
                    title: "{{ i.event_name}}",
                    start: '{{ i.start_date|date:"Y-m-d" }}',
                    end: '{{ i.end_date|date:"Y-m-d" }}',
                },
                {% endfor %}

            ]
        });
    });
</script>

我使用 mysql 作为后端数据库。我创建了一个记录用于测试目的。这是我希望在日历中看到的记录：

# event_id, exchange_id, event_start, event_end, event_subject, event_location, event_category
1, , 2017-09-13 08:00:00.000000, 2017-09-13 09:00:00.000000, test, , all

日历本身按预期显示，只是没有事件。如果我将测试数据硬编码到模板“calendar.html”脚本中，事件会显示在日历中。

有没有人有过使用 FullCalendar 和/或 Django 的经验并且可以帮助我确定我哪里出错了？

Answer 1

我最终使用它来让它工作：

views.py：

@method_decorator(login_required, name='dispatch')
class CalendarPage(TemplateView):
    template_name = 'calendar.html'
    form_class = EventForm

    def get_context_data(self, **kwargs):
        context = super(CalendarPage, self).get_context_data(**kwargs)
        context['eventlist'] = Event.objects.all()
        return context

在模板中：

events: [
    {% for i in eventlist %}
    {
        title: "{{ i.event_title }}",
        start: '{{ i.event_start }}',
        end: '{{ i.event_end }}',
        location: "{{ i.event_location }}",
    },
    {% endfor %}
],

Answer 2

我认为这对你有用。

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          defaultView: 'month',
          editable: true,
          eventLimit: true,
          events: events
        });
    });
</script>