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

document.addEventListener( 'DOMContentLoaded', () => {
  const calendarEl = document.getElementById( 'calendar' );
  const calendar = new FullCalendar.Calendar( calendarEl, {
    initialView: 'timeGridWeek',
  events: function ( info, successCallback ) {
    successCallback(
    [
      {
      title: 'サンプル時間',
      start: Date.now(),
      end: Date.now() + ( 5 * 60 * 60 * 1000 )
      }
    ]
    )
  },
    businessHours: [
      {
        daysOfWeek: [ 1, 2, 3, 4, 5, ],
        startTime: '9:00',
        endTime: '18:00',
      },
      {
        daysOfWeek: [ 0, 6 ],
        startTime: '9:00',
        endTime: '12:00',
      }
     ]
  } );
  
  calendar.render();
} );

External CSS

  1. https://cdn.jsdelivr.net/npm/fullcalendar@5.11.2/main.min.css
  2. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://cdn.jsdelivr.net/npm/fullcalendar@5.11.2/main.min.js