JSFiddle - React, Tailwind, and code Playground

by 100thGear

HTML

<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<div style="border:solid 2px red;">
        <div id='calendar'></div>
</div>

JavaScript

$(document).ready(function() {

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

    function calcCalendarHeight() {
        calcCalendarWidth();
        var h = $(window).height() - 120;
        return h;
    }

    function calcCalendarWidth() {
        var lw = $(window).width() * 0.22;
        var w = $(window).width() - lw;
        $("#calendar").width(w);
    }



    // RESIZE CALENDAR WHEN WINDOW IS RESIZED
    $(window).resize(function() {
        $('#calendar').fullCalendar('option', 'height', calcCalendarHeight());
    });

    // Start the calendar rendering
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        theme: true,
        lazyFetching: true,
        // stores data in cache when fetching events
        selectable: true,
        selectHelper: true,
        //defaultView: 'month',
        editable: true,
        disableDragging: false,
        height: calcCalendarHeight(),
        // MAKE CALENDAR FULL HEIGHT
        slotMinutes: 15,
        defaultEventMinutes: 30,
        minTime: '5:30am',
        // TIME THE DAY START
        maxTime: '8:00pm',
        // TIME THE DAY ENDS
/* WHEN YOU SELECT MULTIPLE DAYS OR A SINGLE DAY
            ---------------------------------------------------------------------- */
        select: function(start, end, date, allDay, view, jsEvent, calEvent) {

            // This will now show the time-selection if in agenda view
            var viewFormat = view.name;
            if (viewFormat == 'agendaDay') {
                $("#allDay2").attr('checked', false);
                $(".timeFrame2").show();
            }
            if (viewFormat == 'agendaWeek') {
                $("#allDay2").attr('checked', false);
                $(".timeFrame2").show();
            }
            // If your in month...