JSFiddle - React, Tailwind, and code Playground

by kvakulo

HTML

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/y4enc3buyzz2m3a/fullcalendar.css">
<script src="https://dl.dropboxusercontent.com/s/93dskqt37q1caxr/fullcalendar.min.js"></script>
<div id='calendar'></div>

JavaScript

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var $calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    selectable: true,
    selectHelper: true,
    defaultView: 'agendaDay',
    events: [{
        title: 'Meeting',
        start: new Date(y, m, d, 10, 30),
        allDay: false
    }, {
        title: 'Lunch',
        start: new Date(y, m, d, 12, 0),
        end: new Date(y, m, d, 14, 0),
        allDay: false
    }],

    eventClick: function (event) {
        alert('event click: ' + event.title);
    }
});

$("#calendar").mousedown(function (e) {
    if (e.button === 2) {
        console.log("down");
        if($(e.target).parents(".fc-event").length > 0) return;

        var newEvent = $.extend($.Event("mousedown"), {
            which: 1,
            clientX: e.clientX,
            clientY: e.clientY,
            pageX: e.pageX,
            pageY: e.pageY,
            screenX: e.screenX,
            screenY: e.screenY

        });
        $(e.target).trigger(newEvent);

    }
});

$("#calendar").mouseup(function (e) {
    if (e.button === 2) {
        console.log("up");
        if(!$(e.target).parents(".fc-event").length > 0) return;

        var newEvent = $.extend($.Event("click"), {
            which: 1,
            clientX: e.clientX,
            clientY: e.clientY,
            pageX: e.pageX,
            pageY: e.pageY,
            screenX: e.screenX,
            screenY: e.screenY

        });
        $(e.target).trigger(newEvent);

    }
});