帶有 Django 2.x 或 3.x 的 Django FullCalendar
[英]Django FullCalendar with Django 2.x or 3.x
問題描述
好吧，我知道這個問題已經被問過很多次了，但我自己似乎無法理解。 我需要在我的 Django 應用程序中實現 FullCalendar，在我下載了包含所有靜態和內容的 FullCalendar 並在我的頁面上呈現它之后，我無論如何都無法添加新事件。
我有我的事件模型，有 start_date、end_date、id 和 title，就像有人在這里解釋的那樣。 之后，我在我的 views.py 中創建了一個名為 all_events 的函數，其中 event = 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 個解決方案
解決方案1
0 已采納 2019-12-18 09: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'
將 modernizr 從 2.x 更新到 3.x
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.