JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://arshaw.com/js/fullcalendar-1.6.0/jquery/jquery-ui-1.10.2.custom.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.6.0/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.6.0/fullcalendar/fullcalendar.css">
<div id='calendar' style='margin:3em 0;font-size:13px'></div>
<button id="btnToggle">Toggle Events</button>

CSS

/* support
---------------------------------------------------------*/
 .support-section {
    margin: 2.2em 0 3.2em;
}
.support-section h2 {
    margin-bottom: .7em;
}
.support-section form {
    display: inline;
}
.support-section input {
    vertical-align: middle;
    margin: 0;
    padding: 5px 5px 0;
    height: 20px;
    border: 1px solid #D8DCDF;
    border-right: 0;
}
.support-section input.hint {
    color: #666;
}
.support-section button {
    vertical-align: middle;
    margin: 0;
    padding: 0 5px;
    height: 27px;
    cursor: pointer;
}
.support-section form button {
    /* search buttons */
    padding: 0 3px;
}
.support-section .or {
    margin: 0 5px;
}
.support-section .requires-account {
    color: #666;
    font-size: 10px;
    margin-left: 5px;
}
.support-section ul {
    margin: 1em 0;
    padding: 0 0 0 2em;
}
.support-section li {
    margin: .4em 0;
}
/* source
-----------------------------------------------------*/
 #github-reasons li {
    margin: 1em 0;
}
/**************************************** DOCS **********************************************/

/* global styles
-----------------------------------------------------*/
 #fc-docs {
    font-size: 14px;
}
#fc-docs a {
    color: #000;
}
#fc-docs table {
    border-collapse: collapse;
    border-spacing: 0;
}
#fc-docs td {
    padding: 0;
    vertical-align: top;
}
#fc-docs h1 {
    font-size: 22px;
}
#fc-docs h2 {
    font-size: 18px;
}
/* global toc & list icons
------------------------------------------------------*/
 #fc-docs ul.toc ul a, #fc-docs-index ul.toc a, #fc-docs dl.toc a {
    padding: 0 0 0 26px;
    background: url(../images/gear-small.png) no-repeat 0 50%;
    font-weight: normal;
}
#fc-docs .toc .article a {
    background-image: url(../images/information-small-white.png);
}
#fc-docs .toc .callback a {
    background-image: url(../images/exclamation-small.png);
}
#fc-docs .toc .method a, #fc-docs .toc .function a {
    background-image:...

JavaScript

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

var rdv = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    events: [{
        "id": 1,
            "title": "Hello World",
            "start": "Wed, 10 Apr 2017 09:00:00",
            "end": "Wed, 10 Apr 2017 10:00:00"
    }, {
        "id": 2,
            "title": "Good Afternoon",
            "start": "Wed, 03 Apr 2013 13:00:00",
            "end": "Wed, 03 Apr 2013 17:00:00"
    }, ]
});

var arr = [];
var removedEvt = null;

$("#btnToggle").click(function () {
    if (arr.length > 0) {
        var myNewEvent = {
            "id": removedEvt.id,
                "title": removedEvt.title,
                "start": removedEvt.start,
                "end": removedEvt.end,
                "_id": removedEvt._id,
                "_start": removedEvt._start,
                "_end": removedEvt._end
            /*,
                "source" : removedEvt.source*/
        };
        $('#calendar').fullCalendar("renderEvent", myNewEvent, true);
        arr = [];
    } else {
        arr = $('#calendar').fullCalendar("clientEvents");
        $('#calendar').fullCalendar('removeEvents', 1);
        for (var i = 0, len = arr.length; i < len; i++) {
            if (arr[i].id === 1) {
                removedEvt = arr[i];
                console.log(removedEvt);
            }
        }
    }
});