python - django fullcalender refetching events not workig
问题描述
我正在尝试在 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
网址:
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>
解决方案
推荐阅读
- javascript - 如何在 Google Chrome 中使用自动连字符?
- javascript - 如何使用 PHP 或 JS 从 cookie 字符串中获取特定值?
- html - IE 11 不关注跨度与 tabindex
- javascript - javascript如何通过两条规则对对象数组进行排序?
- excel - 将 VBA 用户窗体中的数据保存到两个工作表中
- eclipse - Photon Eclipse JEE 无法启动
- sql - 如何按条件连接表
- javascript - 为什么javascript不能在共享/部分视图的asp.net mvc视图中工作
- noise - MDS 绘图轴与信噪比有何关系?
- jquery - 无法将背景图像属性设置为无