FullCalendar

Official: https://fullcalendar.io/

Business Hours

https://fullcalendar.io/docs/business-hours

Modal HTML Example

<div class="modal" tabindex="-1" role="dialog" id="md_calendar">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Open Hours</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id='calendar'></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Javascript App

var calendar_app = function(){
    var $md = null;
    var $c = null;
    var calendar = null;
    var id = 0;

    function init(id){
        $md = $('#md_calendar');
        $c = $md.find('#calendar');

        $('.open_hours').on('click', function(e){
            e.preventDefault();
            var $this = $(this);
            var id = $this.data('id');
            show(id);
        });
    }

    function show(_id){
        id = _id;
        $md.modal();
        //clear();
        refresh();
    }

    function refresh(){
        calendar = new FullCalendar.Calendar($c[0], {
            initialView: 'timeGridWeek',
            views: {
                timeGrid: {
                    allDaySlot: false,
                    slotDuration: '01:00:00',
                    slotLabelFormat: {
                        hour: '2-digit'
                    },
                    slotMinTime: '09:00:00',
                    slotMaxTime: '22:00:00'
                }
            },
            events: '/open_hours?id=' + id
        });

        calendar.render();
    }

    return {
        init: init, 
        show: show
    }
}();

PHP Example (Laravel)

    public function open_hours(Request $req){
        $bid = $req->input('id');
        $branch = BranchM::find($bid);
        $json = json_decode($branch->hours);
        $hours = $json->selection;
        if($hours == false){
            $data = false;
        }else{
            $data = [];
            foreach ($hours as $key => $item) {
                //logg($item, false);
                foreach($item->hours as $key2 => $hour){
                    $event = [];
                    $event['id'] = $key . '_' . $key2;
                    $event['title'] = 'Open';
                    $event['start'] = '2020-12-01';
                    $event['daysOfWeek'] = $item->days;
                    $event['startTime'] = $hour->from_hour . ':00';
                    $event['endTime'] = $hour->to_hour . ':00';
                    $event['startRecur'] = '2020-12-01';

                    $data[] = $event;
                }
            }
        }

        return response()->json($data);
    }

Quick Links: