Knockout custom binding for FullCalendar v4

Question

I'm hoping someone experienced with Knockout custom bindings can help me create one for FullCalendar V4. I have never created one before and I'm a little surprised no one has or hasn't shared it for others. Here's what I have so far:

ko.bindingHandlers.fullCalendar = {
    init: function(element) {
        var calendarEl = $(element);
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
            defaultView: 'dayGridMonth',
            defaultDate: '2019-06-07',
            header: {
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            events: viewModel.array1()
        });
    }
}

I also have a codepen here

Answer 1

The Calendar function requires an HTML element, you can directly pass the one provided by the Init parameters. After creating calendar, you need to render. See https://fullcalendar.io/docs/initialize-globals

ko.bindingHandlers.fullCalendar = {
    init: function(element) {
        var calendar = new FullCalendar.Calendar(element, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
            defaultView: 'dayGridMonth',
            defaultDate: '2019-06-07',
            header: {
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            events: viewModel.array1()
        });
      calendar.render(); 
    }
}