django события переполнения полного календара не работают - PullRequest
Новая
       60

django события переполнения полного календара не работают

0 голосов
/ 28 апреля 2020

Я пытаюсь реализовать полный календарь в django. Все функции работают нормально, но календарь не обновляется, если я использую refetchevents или rerender events calendar.fullCalendar('refetchEvents');. Если я перезагружаю страницу, события отображаются, но я хочу видеть изменения без перезагрузки страницы. Любая идея, почему это не работает?

Модели: 

from django.db import models

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)

    def __str__(self):
        return self.name

URL: 

from django.contrib import admin
from django.urls import path
from calend import models
from calend.views import *
from django.conf.urls import url

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', calendar, name='calendar'),
    path('add_event/', add_event, name='add_event'),
    path('update/', update, name='update'),
    path('remove/', remove, name='remove'),
]

просмотров: 

from django.shortcuts import render
from .models import Events
from django.http import JsonResponse

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

def add_event(request):
    start = request.GET.get("start", None)
    end = request.GET.get("end", None)
    title = request.GET.get("title", None)
    event = Events(name=str(title), start=start, end=end)
    event.save()
    data = {}
    return JsonResponse(data)


def update(request):
    start = request.GET.get("start", None)
    end = request.GET.get("end", None)
    title = request.GET.get("title", None)
    id = request.GET.get("id", None)
    event = Events.objects.get(id=id)
    event.start = start
    event.end = end
    event.name = title
    event.save()
    data = {}
    return JsonResponse(data)


def remove(request):
    id = request.GET.get("id", None)
    event = Events.objects.get(id=id)
    event.delete()
    data = {}
    return JsonResponse(data)

Шаблон: 

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.css"/>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
    <script>

        $(document).ready(function () {
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: [
                    {% for event in events %}
                        {
                            title: "{{ event.name}}",
                            start: '{{ event.start|date:"Y-m-d" }}',
                            end: '{{ event.end|date:"Y-m-d" }}',
                            id: '{{ event.id }}',
                        },
                    {% endfor %}
                ],
                selectable: true,
                selectHelper: true,
                editable: true,
                eventLimit: true,
                select: function (start, end, allDay) {
                    var title = prompt("Enter Event Title");
                    if (title) {
                        var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                        var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                        $.ajax({
                            type: "GET",
                            url: '/add_event',
                            data: {'title': title, 'start': start, 'end': end},
                            dataType: "json",
                            success: function (data) {      
                                alert("Added Successfully");
                                calendar.fullCalendar('refetchEvents');
                            },
                            failure: function (data) {
                                alert('There is a problem!!!');
                            }
                        });
                    }
                },
                eventResize: function (event) {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                    var title = event.title;
                    var id = event.id;
                    $.ajax({
                        type: "GET",
                        url: '/update',
                        data: {'title': title, 'start': start, 'end': end, 'id': id},
                        dataType: "json",
                        success: function (data) {
                            calendar.fullCalendar('refetchEvents');
                            calendar.fullCalendar('rerenderEvents');
                            alert('Event Update');
                        },
                        failure: function (data) {
                            alert('There is a problem!!!');
                        }
                    });
                },

                eventDrop: function (event) {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                    var title = event.title;
                    var id = event.id;
                    $.ajax({
                        type: "GET",
                        url: '/update',
                        data: {'title': title, 'start': start, 'end': end, 'id': id},
                        dataType: "json",
                        success: function (data) {
                            calendar.fullCalendar('refetchEvents');
                            alert('Event Update');
                        },
                        failure: function (data) {
                            alert('There is a problem!!!');
                        }
                    });
                },

                eventClick: function (event) {
                    if (confirm("Are you sure you want to remove it?")) {
                        var id = event.id;
                        $.ajax({
                            type: "GET",
                            url: '/remove',
                            data: {'id': id},
                            dataType: "json",
                            success: function (data) {
                                calendar.fullCalendar('refetchEvents');
                                alert('Event Removed');
                            },
                            failure: function (data) {
                                alert('There is a problem!!!');
                            }
                        });
                    }
                },

            });
        });

    </script>
</head>
<body>
<br/>
<h2 align="center"><a href="#">title</a></h2>
<br/>
<div class="container">
    <div id="calendar"></div>
</div>
</body>
</html>
...