使用Django 2.x或3.x的Django FullCalendar
使用Django 2.x或3.x的Django FullCalendar
提问于 2019-12-13 20:31:56
好吧，我知道这个问题已经被问了很多次了，但是我自己似乎不能理解它。我需要在我的Django应用程序中实现FullCalendar，在我下载了包含所有静态信息和内容的FullCalendar之后，并将其呈现在我的页面上，我只是不能碰巧添加新的事件。
我有我的事件模型，有start_date、end_date、id和title，就像有人在这里解释的那样。之后，我在事件中创建了一个名为all_events的函数，其中views.py = 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，因为我不知道这是不是必须的？！所以，再一次，我在我的页面上正确地呈现了日历，静态也是如此，我只是不能添加或查看我的模型中的任何事件。希望能得到我的答案。谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-18 17:16:47
过了一段时间，我设法把它做对了。我将在这里发布我的代码。
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'页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59322695
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号