JSFiddle - React, Tailwind, and code Playground

by slicedtoad

HTML

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

JavaScript

$('#calendar').fullCalendar({
    defaultDate: moment(),
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'agendaWeek',
    editable: true,
    events:[{
        start:moment(),
        end:moment().add(3,'h'),
    }],
    eventRender: function( event, element, view ) {
        if(event.changing){
            $("#currenttime").html("Start: "+event.start.format("YYYY-MM-DD hh:mma")+"<br> End: "+event.end.format("YYYY-MM-DD hh:mma"));
        }
    },
    eventResizeStart: function(event, jsEvent, ui, view ){
        event.changing = true;
    },
    eventResizeEnd: function(event, jsEvent, ui, view ){
        event.changing = false;
    },
    eventDragStart: function(event, jsEvent, ui, view ){
        event.changing = true;
    },
    eventDragEnd: function(event, jsEvent, ui, view ){
        event.changing = false;
    },
});