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

document.addEventListener( 'DOMContentLoaded', () => {
  const calendarEl = document.getElementById( 'calendar' );
  const calendar = new FullCalendar.Calendar( calendarEl, {
    initialView: 'timeGridDay',
    headerToolbar: {
      left: '',
      center: 'title',
      right: 'dayGridMonth,timeGridDay,listMonth'
    },
    buttonText: {
      month: '月',
      week: '週',
      day: '日',
      list: '一覧'
    },
    events: function ( info, successCallback ) {
      successCallback(
        [
          {
            title: 'サンプル時間',
            start: Date.now(),
            end: Date.now() + ( 5 * 60 * 60 * 1000 )
          }
        ]
      )
    },
    navLinks: true,
    slotDuration: '02:00:00',
    slotLabelInterval: { hours: 4 },
    slotLabelFormat: {
      hour: 'numeric',
      minute: '2-digit',
      omitZeroMinute: false,
      meridiem: 'narrow'
    },
    slotLabelContent: args => {
      if ( 'timeGridDay' !== args.view.type ) {
        return args.text;
      }

      let labelText = args.text;
      let hour = parseInt( args.text.replace( /a|p/, '' ).split( ':' )[0] );
        const minute = args.text.replace( /a|p/, '' ).split( ':' )[1];
      
      if ( /p/.test( args.text ) ) {
        if ( 12 != hour ) {
          hour += 12;
        }
      } else {
        if ( 12 == hour ) {
          hour -= 12;
        }
      }
      
      labelText = `${hour}:${minute}`;

      return labelText;
    }
  } );
  
  calendar.render();
} );