Fullcalendar错误呈现意外令牌

Question

正在经历一个新的django 3项目，新手，所以抱歉，如果我的代码不是那么干净。问题是当我尝试渲染日历…如果没有事件，它可以很好地加载，但是当加载事件时，它会停止呈现整个日历。控制台抛出一个未捕获的SyntaxError:意外的token '{'，但我找不到问题，也没有逗号进入我的循环。欢迎任何帮助。我的日历脚本:

<script>
document.addEventListener('DOMContentLoaded', function () {
var cUI = document.getElementById('calendar');
var c = new FullCalendar.Calendar(cUI, {
themeSystem: 'bootstrap',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: '',
},
events: {
{% for v in vacation %}
{
title: "{{ v.reason }}: {{ v.starth }}-{{ v.endh }}",
start: "{{ v.start | date:'Y-m-d' }}",
end: "{{ v.end | date:'Y-m-d' }}",
},
{% endfor %}
},
});
c.render();
c.setOption('locale', 'es');
});
</script>

谢谢

Answer 1

您在events对象中犯了语法错误。因为它是一个javascript对象，所以它需要键值条目。这意味着您需要为您的项目提供密钥:

events: { // <-- the `{` shows that events is an object
keyOne: { // <-- items in objects need keys (such as `keyOne`)
title: "{{ v.reason }}: {{ v.starth }}-{{ v.endh }}",
start: "{{ v.start | date:'Y-m-d' }}",
end: "{{ v.end | date:'Y-m-d' }}",
},
keyTwo: {
title: "{{ v.reason }}: {{ v.starth }}-{{ v.endh }}",
start: "{{ v.start | date:'Y-m-d' }}",
end: "{{ v.end | date:'Y-m-d' }}",
},
},

现在，如果你只是想在一个变量中列出这些对象称为events，那么它应该是一个数组:

events: [ // <-- the `[` shows that events is an array
{ // <-- items in arrays do not need keys
title: "{{ v.reason }}: {{ v.starth }}-{{ v.endh }}",
start: "{{ v.start | date:'Y-m-d' }}",
end: "{{ v.end | date:'Y-m-d' }}",
},
{
title: "{{ v.reason }}: {{ v.starth }}-{{ v.endh }}",
start: "{{ v.start | date:'Y-m-d' }}",
end: "{{ v.end | date:'Y-m-d' }}",
},
},