JSFiddle - React, Tailwind, and code Playground

by LukasHH

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

document.addEventListener('DOMContentLoaded', 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();
});

jQuery(document).ready(function($) {
   $('.holiday').on('click', function() {
   console.log('klick');
  // external events

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl);

    var src = calendar.getEventSources();
    console.log(src);
    var i = calendar.initialEvents();
    console.log(i);    
    calendar.addEventSource(
      {
        events: [ // put the...