Fullcalendar via yarn webpack and rails 6

gistfile1.txt

# How to add Fullcalendar to your rails app it requires jQuery

yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/list @fullcalendar/timegrid
yarn add moment

# insert html code to your views 

<div id='calendar'></div> 

# if you're using modal for example boostrap5 modal an you wold like to render your calendat in modal use script
<script>

$('#your-modal-id').on('shown.bs.modal', function () {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin ],
    contentHeight:"auto",
    handleWindowResize:true,
    timeZone: 'UTC',
  events: [
    {
      id: 'a',
      title: 'my event',
      start: '2022-02-01'
    }
  ]
  });

  calendar.render();
});
</script>

# if you want to render fullcalendar on the page use other script

document.addEventListener("DOMContentLoaded", function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {
      header: {
        left: 'prev,next',
        right: 'dayGridMonth, listMonth'
      },
 
      plugins: [ dayGridPlugin, listPlugin ],
      defaultView: 'dayGridMonth'
    });
 
    calendar.render();
});

# in your application.js
// fullcalendar
import moment from 'moment';
window.moment = moment;

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

window.Calendar = Calendar;
window.dayGridPlugin = dayGridPlugin;
window.timeGridPlugin = timeGridPlugin;
window.listPlugin = listPlugin;
// fullcalendar

# in your applicaction.scss
@import '@fullcalendar/common/main.css';
@import '@fullcalendar/daygrid/main.css';
@import '@fullcalendar/timegrid/main.css';
@import '@fullcalendar/list/main.css';