我在一個 django 專案中，我想將 django 資料庫中的事件顯示到 fullcalendar。
我遇到的問題類似于FullCalendar 不顯示事件，但我沒有使用 php，并且無法可視化我所缺少的內容（我猜這是 Ajax 請求給出的答案）。目前好像我的背景關系沒有被處理。
我不想將 JS 中的事件添加到資料庫中，只需通過從資料庫中檢索它們來顯示它們。稍后將通過表單使用 django 和 python 對資料庫進行添加。預先感謝您的澄清。
我的日歷視圖代碼：
class ScheduleCalendarView(LoginRequiredMixin, View):
def get(self, request):
all_events = Planning.objects.all()
event_arr = []
for i in all_events:
event_sub_arr = {}
event_sub_arr['title'] = i.reason
start_date = datetime.strptime(str(i.appointment_date_start.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
end_date = datetime.strptime(str(i.appointment_hour_stop.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
event_sub_arr['start'] = start_date
event_sub_arr['end'] = end_date
event_arr.append(event_sub_arr)
data = JsonResponse((event_arr), safe=False)
datatest = json.dumps(event_arr)
#return HttpResponse(json.dumps(event_arr))
print(data, type(data))
print(datatest, type(datatest))
#return HttpResponse(json.dumps(event_arr))
context = {
"appointment": datatest
}
return render(request, "schedule/fullcalendar.html", context)
我的帶有 Fullcalendar 的模板 html：
{% extends 'base_admin.html' %}
{% load static %}
{% block head_shedule_content %}
{% load static %}
<link href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css' rel='stylesheet'>
<link href="{% static 'css/fullcalendar/main.css' %}" rel='stylesheet' />
<script src="{% static 'js/fullcalendar/main.js' %}"></script>
<script src="{% static 'js/fullcalendar/locales-all.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'fr';
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: 'bootstrap5',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
locale: initialLocaleCode,
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
weekNumbers: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{% for i in appointment %}
{
title: "{{ i.reason }}",
start: '{{ i.start_date|date:"Y-m-d" }}',
end: '{{ i.end_date|date:"Y-m-d" }}',
},
{% endfor %}
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2022-04-28'
}
]
});
calendar.render();
});
</script>
<style>
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
padding: 0 10px;
}
</style>
{% endblock %}
{% block content %}
{% load static %}
<!-- Portfolio Section-->
<section class="page-section portfolio" id="planning">
<div class="container">
<!-- Portfolio Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Planning</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fa-solid fa-bone"></i></div>
<div class="divider-custom-line"></div>
</div>
<div id='calendar'></div>
</div>
</section>
{% endblock %}
有一個用于測驗顯示的回圈外事件。顯示硬編碼事件，回圈外事件效果很好。 我的日歷螢屏
這是我注釋回傳的內容，它對應于我在背景關系中發送的 datatest 變數。 退貨畫面
我希望我已經提供了足夠的細節，而不會讓您沉浸在閱讀中。問候
uj5u.com熱心網友回復：
當您將它放在屬性中時，它看起來datatest已經是一個 JSON 字串。appointment所以你不能回圈通過appointment你嘗試的方式，因為它是一段文本，而不是一個陣列。
此外，datatest您可以清楚地看到資料沒有“原因”、“開始日期”或“結束日期”屬性……您已經將它們轉換為 fullCalendar 期望的名稱。
因此，我認為在 fullCalendar JS 代碼中您應該能夠撰寫：
events: {{ appointment }}
將 JSON 直接注入 JS 代碼（并將其視為陣列文字）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/472070.html
標籤：javascript Python django 阿贾克斯 全日历