How to show only hours of work in the full calendar?

Question

I am using jQuery fullCalendar . The client wants to see only the hours of work on the calendar. Is it possible? How?

Example: a business opens from 9 a.m. to 1 p.m. and from 3 p.m. to 10 p.m.

Answer 1

The minTime and maxTime parameters allow you to set the first and last hour. I don’t think you can have a calendar with a break in the middle, though.

Perhaps you could create a recurring event called lunch and color it differently into your actual events.

Answer 2

a full calendar update has been added that allows you to apply working hours

http://fullcalendar.io/docs/display/businessHours/

however, I do not think that you will allow you to take a break during the day. here

Apply different time slots and ranges for each day on Fullcalendar

you will find my approach on a similar problem that I used Javascript to prevent the selection of a certain period, and also with css I highlighted areas that I did not want them to be selectable.

Answer 3

To completely hide the desired line (NON business / break hour), you must change 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 don't enter a while clause that adds the html code:

 while (slotTime < this.maxTime) {...} 

you can add an if clause inside this, or work even harder to enter a configuration parameter to check inside that iteration.

Answer 4

Hiding the gap period is still not possible, as far as I know, but in version 2 there are now minTime and maxTime objects that you can use to hide non-working hours.

Documentation here: http://fullcalendar.io/docs/agenda/minTime/

Answer 5

Use the selectConstraint and eventConstraint options to prevent the click event from working after hours (from full 2.2). in my case, I used selectConstraint: "businessHours" https://fullcalendar.io/docs/selection/selectConstraint/ https://fullcalendar.io/docs/event_ui/eventConstraint/