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');
    },
    dayClick: function (date, jsEvent, view) {
        alert(date.format());
    },
    eventClick: function (calEvent, jsEvent, view) {
        var toplayer = $(jsEvent.currentTarget).closest("tbody");
        toplayer.hide(); //hide the entire event layer (makes it work with multiple events)
        var dayElement = document.elementFromPoint(jsEvent.pageX, jsEvent.pageY); //get the element under the cursor (should be a day cell)
        toplayer.show();
        alert($(dayElement).data("date"));
    }
});