How to show only opening hours in fullCalendar? - fullcalendar

Question

I'm using jQuery fullCalendar. A client wants to see only their bussiness opening hours in the calendar. Is that possible? How?
Example: a bussiness opens from 9am to 1pm and from 3pm to 10pm

Answer 1

The minTime and maxTime options will let you set the first and last hour. I don't think you can have a calendar with a break in the middel though.
Maybe you could create a recurring event called lunch and color it differently to your actual events

Answer 2

On current fullcallendar version (5.x), maxTime and minTime options where renamed to slotMaxTime and slotMinTime.
To hide most business time - i.e., night and/or non-working days:
Calculate some values right from your businessHours specification
const workSpec = [
{
daysOfWeek: [1, 2, 3, 4],
startTime: '08:00',
endTime: '18:00'
}
{
daysOfWeek: [5],
startTime: '09:00',
endTime: '14:00'
}
]
/*
* calculate the following:
* - minimum "opening time"
* - maximum "opening time"
* - working days
* - non-working days
*/
const workMin = workSpec.map(item => item.startTime).sort().shift()
const workMax = workSpec.map(item => item.endTime).sort().pop()
const workDays = [...new Set(workSpec.flatMap(item => item.daysOfWeek))]
const hideDays = [...Array(7).keys()].filter(day => !workDays.includes(day))
Use calculated values on the related properties - i.e. for #fullcalendar/react:
<FullCalendar
//...
businessHours={workSpec}
slotMinTime={workMin}
slotMaxTime={workMax}
hiddenDays={hideDays}
//...
/>
Disclaimer: this was a quick-n-dirty go. There may be refactors to improve performance

Answer 3

there has been an update on fullcalendar that allows you to apply business hours
http://fullcalendar.io/docs/display/businessHours/
however, i don't think it ll allow you to impement a break within the day..
over here
Apply different timeslots and ranges for each day on Fullcalendar
you ll find my approach on a similar issue that i used Javascript to prevent selection of specific period and also with css i highlighted the areas that i didn't want to be able to be selected..

Answer 4

To completely hide the desired row (NON business/break hour) you have to modify the following method inside fullcalendar.js:
// Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
renderSlatRowHtml: function() {...}
and then avoid entering the while clause that adds the html code:
while (slotTime < this.maxTime) {...}
you can add an if clause up inside that while, or even more work out to enter a config param to check inside that while iteration.

Answer 5

hiding the break period is still not possibleas far as i know,
but version 2 has now to peoperties minTime and maxTime which you can use to hide non-business hours.
Documentation here: http://fullcalendar.io/docs/agenda/minTime/

Answer 6

Use selectConstraint and eventConstraint options to prevent click event in non business hours (from full calendar 2.2version). in my case i used selectConstraint: "businessHours" https://fullcalendar.io/docs/selection/selectConstraint/ https://fullcalendar.io/docs/event_ui/eventConstraint/

Answer 7

For anyone trying this.
This one is to remove the non business
<style>
.fc .fc-non-business {
background: var(--fc-non-business-color);
display: none;
}
</style>
This one is for the business hours to remove those time that you want to disable
selectConstraint: 'businessHours',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
startTime: '07:00', // a start time (10am in this example)
endTime: '20:00', // an end time (6pm in this example)
}
Use Content height to adjust the calendar height
contentHeight: 680,
This is the whole configuration for the calendar
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
hiddenDays: [0],
allDaySlot: false,
selectOverlap:false,
selectable: true,
selectConstraint: 'businessHours',
businessHours: {
daysOfWeek: [ 1, 2, 3, 4,5,6], // Monday - Thursday
startTime: '07:00', // a start time (10am in this example)
endTime: '20:00', // an end time (6pm in this example)
},
select: function(data) {
var start = formatDateToTime(data.start);
var end = formatDateToTime(data.end);
var date = data.startStr.substring(0, 10);
var uid = "add";
$.ajax({
type: "POST",
url: "{{ url('event/getModal')}}",
data: {
uid: uid,
start: start,
end: end,
date: date
},
success: function(response) {
$("#modal-view").modal('toggle');
$("#modal-view").find(".modal-title").text("Add Event");
$("#modal-view").find("#modal-display").html(response);
}
});
},
headerToolbar:{
start: '', // will normally be on the left. if RTL, will be on the right
center: '',
end: '' // will normally be on the right. if RTL, will be on the left
},
dayHeaderFormat:{ weekday: 'long' },
editable: true,
events: <?php echo $Events?>,
contentHeight: 680,
eventClick: function(calEvent, jsEvent, view) {
console.log(calEvent);
},
viewDidMount: function(event, element) {
$('td[data-time]').each(function() {
var time = $(this).attr("data-time");
if(time < "07:00:00"){
$(this).parent().remove();
}
if(time > "19:30:00"){
$(this).parent().remove();
}
console.log($(this).parent());
});
},
eventDidMount: function(event, element) {
// To append if is assessment
if(event.event.extendedProps.description != '' && typeof event.event.extendedProps.description !== "undefined")
{
$(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.description+"</b>");
$(event.el).find(".fc-event-title").append("<br/><b>"+event.event.extendedProps.prof+"</b>");
}
}
});
calendar.render();
Sample Output
Check this