CODEWITHSUNDEEP
javascriptfullcalendar
Ivan
Ivan

Reputation: 15962

How to show only opening hours in fullCalendar?

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

Upvotes: 8

Views: 19279

Answers (7)

kennedy Hipolito
kennedy Hipolito

Reputation: 1

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

Upvotes: 0

laconbass
laconbass

Reputation: 17824

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:

  1. 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))
  1. 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

Upvotes: 4

Sreekanth Karini
Sreekanth Karini

Reputation: 1285

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/

Upvotes: 0

Souhaieb Besbes
Souhaieb Besbes

Reputation: 1504

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/

Upvotes: 0

user2213042
user2213042

Reputation: 61

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.

Upvotes: 0

nikolas
nikolas

Reputation: 722

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..

Upvotes: 1

tocallaghan
tocallaghan

Reputation: 9572

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

Upvotes: 11

Related Questions