JSFiddle - React, Tailwind, and code Playground

by slicedtoad

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
<div id='calendar'></div>

CSS

.clickThrough {
    pointer-events: none;
}

JavaScript

function click(x, y) {
    var ev = document.createEvent("MouseEvent");
    var el = document.elementFromPoint(x, y);
    ev.initMouseEvent(
        "click",
    true /* bubble */ , true /* cancelable */ ,
    window, null,
    x, y, 0, 0, /* coordinates */
    false, false, false, false, /* modifier keys */
    0 /*left*/ , null);
    el.dispatchEvent(ev);
}
var $fc = $("#calendar").fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,agendaWeek,month'
    },
    events: [{
        title: 'Event1',
        start: moment(),
    }, {
        title: 'Event2',
        start: moment().add(2, 'hours'),
    }, ],
    eventRender: function (event, element) {
        $(element).addClass('clickThrough').attr("disabled", "disabled"); //disabled attribute is a IE workaround for pointer-events
    },
    dayClick: function (date, jsEvent, view) {
        alert(date.format());
    },
});