JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.0/fullcalendar.css">

  <title>calendario fiscal</title>

  <script href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.0/gcal.js'></script>
 <script src='https://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="https://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='https://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>


 <div id="calendar"></div>

JavaScript

function doRequest(options, printResult) {
    var x = new XMLHttpRequest();
    x.open(options.method, options.url);
    x.onload = x.onerror = function() {
      printResult(
        (x.responseText || '')
      );
    };
    x.send(options.data);
  }
  
  
 (function() {
    doRequest({
        method: 'GET',
        url: 'https://www.googleapis.com/calendar/v3/calendars/<---YOURID-->/events?key=<--YOURKEY-->',
    }, function printResult(result) {

    result = JSON.parse(result);
    var i;
    var color;
    var str,end;
    eventsList = {
        events: []
    }
    controleList = {
        controles: []
    }
    for(i=0;i < result.items.length;i++) {

        str = result.items[i].start.dateTime;
        
        end = result.items[i].end.dateTime;
        
       
        eventsList.events.push({
            "title": result.items[i].summary+ "\n Salle : " + result.items[i].location,
            "start": str,
            "end": end,
            "color": color,
            "description": result.items[i].description + "\n" + result.items[i].location
        });
    }
                    var myEvents = eventsList.events;
                      $('#calendar').fullCalendar({
                      
                      header: {
                        left: 'prev,next today controle',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                      },
                      defaultView: 'agendaWeek',
                       timezone: "Europe/Paris",
                      selectable: true,
                      selectHelper: true,
                      minTime:"07:00:00",
                      maxTime:"21:00:00",
                      contentHeight: 685, 
                      lang: 'fr',
                      select: function(start, end) {
                        var title = prompt('Event Title:');
                        var eventData;

                        if (title) {
                         ...