Create calendar schedules using jquery

Version

v1.11.0

Current Behavior

I have included the necessary js scripts jquery.min.js (version 3.4.0) tui-code-snippet.js tui-calendar.js and tui-calendar.css and in the javascript trying to create schedules with the code snippet:

// Write example code
    <div id="calendar" style="height: 800px;"></div>
    <script type="text/javascript">
        var cal = $('#calendar').tuiCalendar({
            usageStatistics: false,
            defaultView: 'month',
            taskView: true,
            template: {
                monthGridHeader: function(model) {
                    var date = new Date(model.date);
                    var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';
                    return template;
                }
            }
        });
        cal.createSchedules([
            {
                id: '1',
                calendarId: '1',
                title: 'my schedule',
                category: 'time',
                dueDateClass: '',
                start: '2019-04-15T22:30:00+09:00',
                end: '2019-04-16T22:30:00+09:00'
            },
            {
                id: '2',
                calendarId: '1',
                title: 'second schedule',
                category: 'time',
                dueDateClass: '',
                start: '2018-01-18T17:30:00+09:00',
                end: '2018-01-19T17:31:00+09:00',
                isReadOnly: true    // schedule is read-only
            }
        ], true);
    </script>

Expected Behavior

I was expecting calendar with schedules on it. But get ‘function createSchedules not found’. How should I get access to the calendar object after its created using jquery?

[gboyals]

Not sure if it is the issue here as I’m using React, but I created 2 calendars in order to get the lib working, as follows :

                calendars: [
                    {
                        id: '0',
                        name: 'Confirmé'
                    }, {
                        id: '1',
                        name: 'En attente'
                    }],
                defaultView: 'month',
                viewName: 'month',
                taskView: false,
                scheduleView: ['time'],
                template: {
                    monthGridHeader: function (model) {
                        const date = new Date(model.date);
                        return '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';
                    },
                },

I have the “Confirmé” calendar (as “confirmed”, roughly translated, I use this to check rendez-vous) and “En attente” (“On hold”, also for rendez-vous, taken but not confirmed yet).

What COULD work for you is adding this to your calendar.

[fklement]

@jungeun-cho Thanks for the prompt response. I’ll check on this today and let you know.