JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.4.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.4.0/main.min.css">
<button class="holiday">Add Feiertage</button>
<div id='calendar'></div>

CSS

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

#calendar {
  max-width: 800px;
  margin: 40px auto;
 }
button.holiday{
  margin: 1em;
  padding: 0.5em 0.8em;
}

JavaScript

jQuery(document).ready(function($) {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek'
    },
    initialDate: '2020-11-12',
    businessHours: true, // display business hours
    editable: true,
    events: [{
        title: 'Business Lunch',
        start: '2020-11-03T13:00:00',
        constraint: 'businessHours'
      },
      {
        title: 'Meeting',
        start: '2020-11-13T11:00:00',
        constraint: 'availableForMeeting', // defined below
        color: '#257e4a'
      },
      {
        title: 'Conference',
        start: '2020-11-18',
        end: '2020-11-20'
      },
      {
        title: 'Party',
        start: '2020-11-29T20:00:00'
      },

      // areas where "Meeting" must be dropped
      {
        groupId: 'availableForMeeting',
        start: '2020-11-11T10:00:00',
        end: '2020-11-11T16:00:00',
        display: 'background'
      },
      {
        groupId: 'availableForMeeting',
        start: '2020-11-13T10:00:00',
        end: '2020-11-13T16:00:00',
        display: 'background'
      },

      // red areas where no events can be dropped
      {
        start: '2020-11-18',
        title: 'Test-Holiday',
        overlap: false,
        display: 'background',
        color: '#ff9f89'
      }
    ]
  });

  calendar.render();

  $('.holiday').on('click', function() {
    calendar.addEventSource({
      events: [ // put the array in the `events` property
        {
          title: 'Test-Event',
          start: '2020-11-11',
          overlap: false,
          display: 'background',
          color: '#ff9f89'
        }
      ]
    });
  });
});