Home > Enterprise >  Fullcalendar error rendering Unexpected token
Fullcalendar error rendering Unexpected token

Time:10-28

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Thank you

CodePudding user response:

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' }}",
    },
},
  • Related