JSFiddle - React, Tailwind, and code Playground

by Xtravia9

HTML

<link rel="stylesheet" href="https://themmcloud.com/fiddle/fullcalendar.min.css">
<link rel="stylesheet" href="https://themmcloud.com/fiddle/jquery.contextMenu.min.css">
<script src="https://themmcloud.com/fiddle/jquery.min.js"></script>
<script src="https://themmcloud.com/fiddle/jquery-ui.min.js"></script>
<script src="https://themmcloud.com/fiddle/moment.js"></script>
<script src="https://themmcloud.com/fiddle/fullcalendar.min.js"></script>
<script src="https://themmcloud.com/fiddle/jquery.contextMenu.min.js"></script>
<script src="https://themmcloud.com/fiddle/jquery.ui.position.js"></script>
<body>

<div id='calendar'></div>

</body>

CSS

body {
            margin: 40px 10px;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

JavaScript

$('#calendar').fullCalendar({
                defaultDate: '2019-08-12',
                editable: true,
                eventLimit: true,
                events: [
                    {
                        title: 'All Day Event',
                        start: '2019-08-01'
                    },
                    {
                        title: 'Long Event',
                        start: '2019-08-07',
                        end: '2019-08-10'
                    },
                    {
                        title: 'Conference',
                        start: '2019-08-11',
                        end: '2019-08-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2019-08-12T10:30:00',
                        end: '2019-08-12T12:30:00'
                    }
                ],
                eventRender: function (event, element) {
                    var originalClass = element[0].className;
                    element[0].className = originalClass + ' hasmenu';
                },
                dayRender: function (day, cell) {
                    var originalClass = cell[0].className;
                    cell[0].className = originalClass + ' hasmenu';
                }
            })

            $(document).contextmenu({
                delegate: ".hasmenu",
                preventContextMenuForPopup: true,
                preventSelect: true,
                menu: [
                    { title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors" },
                    { title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy" },
                    { title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
                ],
                select: function (event, ui) {
                    // Logic for handing the selected option
                },
                beforeOpen: function (event, ui) {
                    ui.menu.zIndex($(event.target).zIndex() + 1);
        ...