<script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.9/index.global.min.js'></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var calendarEl = document.getElementById('calendar');

      var calendar = new FullCalendar.Calendar(calendarEl, {
        
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        headerToolbar: { 
          right:'prev,next today,dayGridMonth,resourceTimeGridDay'
        }, // buttons for switching between views
        initialView: 'dayGridMonth',
        views: {
          resourceTimeGridDay: {
            allDaySlot: false,
            slotMinTime: '09:00:00',
            slotMaxTime: '22:00:05',
            slotDuration: '00:05:00',
            slotLabelFormat: {
              hour: '2-digit',
              minute: '2-digit',
              hour12: false
            },
            titleFormat: { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' } ,
            eventTimeFormat: {
              hour: '2-digit',
              minute: '2-digit',
              hour12: false
            },
            eventClick: function (info) {
              // info 是一个对象，包含了关于被点击事件的详细信息
              alert('Event title: ' + info.event.title);
              // 可以执行更多操作，例如打开一个模态框来显示事件详情或者编辑事件等

              // 如果你不希望 FullCalendar 对点击操作做默认处理（比如跳转链接），可以调用以下方法：
              info.jsEvent.preventDefault(); // 防止当点击有 url 的事件时自动跳转页面
            }
          }
        },
        resources: [
          { id: 'a', title: 'column1' },
          { id: 'b', title: 'column2' },
          { id: 'c', title: 'column3' },
          { id: 'd', title: 'column4' }
        ]
      });

      calendar.render();
    });

  </script>