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">×</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: