fullcalendar/django refetchEvents（）不工作或无法理解其工作方式_Django_Fullcalendar

fullcalendar/django refetchEvents（）不工作或无法理解其工作方式

django fullcalendar

fullcalendar/django refetchEvents（）不工作或无法理解其工作方式,django,fullcalendar,Django,Fullcalendar,我有一个带有此model.py的django应用程序： from __future__ import unicode_literals from django.db import models class Events(models.Model): id = models.AutoField(primary_key=True) title = models.CharField(max_length=100,null=True,blank=True) start = models.DateTime

我有一个带有此model.py的django应用程序：

from __future__ import unicode_literals
from django.db import models
class Events(models.Model):
id = models.AutoField(primary_key=True)
title = models.CharField(max_length=100,null=True,blank=True)
start = models.DateTimeField(null=True,blank=True)
end = models.DateTimeField(null=True,blank=True)
def __str__(self):
return self.name

此view.py：

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

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(title=str(title), start=start, end=end)
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)

此URL.py：

from django.conf.urls import url
from django.contrib import admin
from mycalendars import views

urlpatterns = [
url('^calendar', views.calendar, name='calendar'),
url('^add_event$', views.add_event, name='add_event'),
url('^remove', views.remove, name='remove'),
]

在模板中，我有calendar.html和所有完整的日历，如下所示：

<html><head>
<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText,
duration: '24:00',
};
}
});
var calendar = new Calendar(calendarEl, {
events: [
{% for event in events %}
{
title: "{{ event.title}}",
start: '{{ event.start|date:"Y-m-d" }}',
end: '{{ event.end|date:"Y-m-d" }}',
id: '{{ event.id }}',
},
{% endfor %}
],
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true,
droppable: true,
eventRender: function(info) {
var descrip = info.event.title;
if (descrip.indexOf('Birthday') !== -1) {
info.el.firstChild.setAttribute("style", "background-color: red;");
} else if (descrip.indexOf('Medical') !== -1) {
info.el.firstChild.setAttribute("style", "background-color: blu;");
} else if (descrip.indexOf('Work') !== -1) {
info.el.firstChild.setAttribute("style", "background-color: green;");
}
eventReceive: function (info) {
var title = info.event.title;
var start = moment(info.event.start).format('YYYY-MM-DD hh:mm');
var end = moment(info.event.end).format('YYYY-MM-DD hh:mm');
$.ajax({
type: "GET",
url: '/add_event',
data: {'title': title, 'start': start, 'end': end},
dataType: "json",
success: function (data) {
calendar.refetchEvents();
alert("Added Successfully");
},
failure: function (data) {
alert('There is a problem!!!');
}
});
},
eventClick: function (info) {
if (confirm("Are you sure you want to remove it?")) {
var id = info.event.id;
$.ajax({
type: "GET",
url: '/remove',
data: {'id': id},
dataType: "json",
success: function (data) {
calendar.refetchEvents();
alert('Event Removed');
},
failure: function (data) {
alert('There is a problem!!!');
}
});
}
},
});
calendar.render();
});
</script>
<style>
#external-events {
position: fixed;
z-index: 2;
top: 20px;
left: 20px;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
}

.demo-topbar + #external-events {
top: 60px;
}

#external-events .fc-event {
margin: 1em 0;
cursor: move;
}

#calendar-container {
position: relative;
z-index: 1;
margin-left: 200px;
}

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

</style>
</head><body>
<div id='external-events'>
<p>
<strong>Type of event:</strong>
</p>
<div class='fc-event' style="background-color:red">Birthday</div>
<div class='fc-event' style="background-color:blu">Medical</div>
<div class='fc-event' style="background-color:green">Work</div>
</div>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
</html>


document.addEventListener（'DOMContentLoaded'，function（）{
var Calendar=FullCalendar.Calendar；
var Draggable=FullCalendarInteraction.Draggable；
var containerell=document.getElementById（'external-events'）；
var calendarEl=document.getElementById（'calendar'）；
新拖船（集装箱船{
itemSelector:“.fc事件”，
eventData:函数（eventEl）{
返回{
标题：eventEl.innerText，
持续时间：“24:00”，
};
}
});
var calendar=新日历（calendarEl{
活动：[
{events%%中事件的百分比}
{
标题：“{event.title}}”，
开始：“{event.start}日期：“Y-m-d”}”，
结束：{event.end}日期：“Y-m-d”}，
id:“{event.id}}”，
},
{%endfor%}
],
插件：['interaction'，'dayGrid'，'timeGrid']，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay”
},
是的，
是的，
selectHelper:对，
eventLimit：对，
真的，
eventRender:函数（信息）{
var descripp=info.event.title；
如果（描述索引（“生日”）！=-1）{
info.el.firstChild.setAttribute（“样式”，“背景色：红色；”）；
}else if（描述索引（'Medical'）！=-1）{
info.el.firstChild.setAttribute（“样式”，“背景色：blu；”）；
}else if（descripp.indexOf（'Work'）！=-1）{
info.el.firstChild.setAttribute（“样式”，“背景色：绿色；”）；
}
eventReceive:函数（信息）{
var title=info.event.title；
var start=moment（info.event.start）.format（'YYYY-MM-DD hh:MM'）；
var end=时刻（info.event.end）.format（'YYYY-MM-DD hh:MM'）；
$.ajax({
键入：“获取”，
url:“/add_事件”，
数据：{'title'：title'start'：start'end'：end}，
数据类型：“json”，
成功：功能（数据）{
calendar.refetchEvents（）；
警报（“添加成功”）；
},
故障：功能（数据）{
警报（“有问题！！！”）；
}
});
},
事件单击：函数（信息）{
如果（确认（“您确定要删除它吗？”））{
var id=info.event.id；
$.ajax({
键入：“获取”，
url:“/remove”，
数据：{'id'：id}，
数据类型：“json”，
成功：功能（数据）{
calendar.refetchEvents（）；
警报（“事件已删除”）；
},
故障：功能（数据）{
警报（“有问题！！！”）；
}
});
}
},
});
calendar.render（）；
});
#外部事件{
位置：固定；
z指数：2；
顶部：20px；
左：20px；
宽度：150px；
填充：0 10px；
边框：1px实心#ccc；
背景：#eee；
}
.演示topbar+#外部事件{
顶部：60px；
}
#外部事件.fc事件{
利润率：1米0；
光标：移动；
}
#日历容器{
位置：相对位置；
z指数：1；
左边距：200px；
}
#历法{
最大宽度：900px；
保证金：20px自动；
}

事件类型：

生日
医学的
工作

现在，我的问题是，当我将标签“工作”、“医疗”或“生日”拖放到日历中时，这将正确呈现，但如果我尝试使用事件单击其中一个，则会出现错误。我注意到这些事件不会被更新（我的数据库中有这些事件，但当前页面中没有）如果重新加载页面，将加载新事件。我读过很多帖子，说我的事件是静态的，但在$ajax get/add_event或/remove之后，它们不是静态的。应该使用calendar.refetchEvents（）重新加载数据。我尝试添加一个eventSource，我尝试在我的djago view.py中使用带有JSON事件的list_event创建一个新视图，但这些都不起作用。欢迎任何提示。

提前感谢

感谢我找到的所有解决方案：我输入了javascript：

events: {
                url :'/all_events',
        },

并在views.py和url.py中添加

def all_events(request):
    data = Events.objects.filter().values('id', 'title', 'start', 'end')
    json_str = simplejson.dumps(list(data), cls=DjangoJSONEncoder)
    return HttpResponse(json_str , content_type='application/json')

及

现在fetchEvents正在工作。

多亏了我找到的所有解决方案：我输入了javascript：

events: {
                url :'/all_events',
        },

并在views.py和url.py中添加

def all_events(request):
    data = Events.objects.filter().values('id', 'title', 'start', 'end')
    json_str = simplejson.dumps(list(data), cls=DjangoJSONEncoder)
    return HttpResponse(json_str , content_type='application/json')

及

现在fetchEvents正在运行。

“我读了很多帖子，说我的事件是静态的”……至少从fullCalendar的角度来看，它们是正确的。

events:[{%for event in events%}{title:{{event.title}，start:{{event.start}date:Y-m-d}，end:{{event.end}date Y:{event.end}，date Y-m-d}，id:{{event.id}，{endfor%}]，

将创建一个硬编码的事件数据列表，然后将其提供给fullCalendar（如果您使用浏览器的“查看源”功能检查最终呈现的页面，则可以看到这一点）。这只是一个数据列表。没有向fullCalendar提供有关这些事件来自何处的信息，或者更重要的是，没有关于如何在将来找到更新的事件列表的信息。因此，当您运行

refetchEvents

，您希望fullCalendar做什么？它无法重新运行python代码以获取更多事件，因为它不知道任何事件事情是这样的。如果你想让refetchEvents工作，你必须使用动态事件源。这包括告诉fullCalendar服务器上的URL，它可以在那里发送下载最新事件数据的请求。有关更多详细信息，请参阅。“我读了很多帖子，说我的事件是静态的”…至少从fullCalendar的角度来看，它们是正确的。

events:[{%for event in events%}{title:{{{event.title}]，start:{{event.start}date:{Y-m-d}'，end:{event.end}date:{Y-m-d}'，id:{{{event.id}，}，{%endfor%}，

将创建一个硬编码的事件数据列表，然后提交给fullCalendar（如果使用浏览器中的“查看源”功能检查最终呈现的页面，则可以看到这一点）。这只是一个数据列表。没有向fullCalendar提供有关这些事件来自何处的信息，或者更重要的是，没有关于如何在将来找到更新的事件列表的信息。因此，当您运行

refetchEvents

，您希望fullCalendar做什么？它无法重新运行python代码以获取更多事件，因为它不知道任何事件最重要的一点。如果希望refetchEvents正常工作，必须使用动态事件源。这包括告诉fullCalendar服务器上的URL，它可以在其中发送下载最新事件数据的请求。有关详细信息，请参阅。