Going through a new django 3 project, newbie on that, so sorry me if my code is not so clean. The problem is when i try to render calendar... without events it loads nicely, but when loading'em it stops rendering the whole calendar. Console throes an Uncaught SyntaxError: Unexpected token '{', but i can´t find the problem, neither is a comma into my loop. Any help welcome. My calendar script:
<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>
Thank you
The syntax error you've made is in the events object. Because it is a javascript object, it expects key-value entries. That means you need to provide keys for your items:
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' }}",
},
},
Now, if you just wanted to list these objects inside a "variable" called events, then it should be an array:
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' }}",
},
},