Fullcalendar just opposite feature or BusinessHours

Question

I am implementing Fullcalendar in my project but i'm stuck in between, what i want is just opposite of business hours for example

in business hours

businessHours: 
    {
        dow: [0, 1, 2, 3, 4, 5, 6, 7 ],
        start: '08:00',
        end: '09:00' ,
    },

when i give this code, then in fullcalendar it beacome like this

it means it show grey field for all hours but 8-9

i want to give a feature where a user can give his time break and then in calendar it will some other color on the particular day and time. also i thought to fetch the time from db and show as a breakTime but the problem is i can only fetch time and day not date so how can i show in event with only day and time?

any idea how can i achieve it.

Answer 1

I got the answer, for those who want the exact feature just add this code in fullcalendar.js

 function F(e) {
            var i, r = n.businessHours,
                s = {
                    className: "fc-nonbusiness",
                    start: "09:00",
                    end: "17:00",
                    dow: [1, 2, 3, 4, 5],
                    rendering: "background"
                },
                o = I.getView();
            return r && (i = t.extend({}, s, "object" == typeof r ? r : {})), i ? (e && (i.start = null, i.end = null), T(E(i), o.start, o.end)) : []
        }

and then you can show you breaktime using business hours cheers..!

Answer 2

Providing you have FullCalendar 2.9.1 or later, you can give multiple businessHours definitions. Therefore you can express the day as two (or more) periods of working time, with the break shown in grey in between them. It won't be in a different colour entirely, but it will at least be clear what the working hours are. For example:

    businessHours: [
    {
        dow: [1, 2, 3, 4, 5], // Monday - Friday
        start: '09:00',
        end: '12:30'
    },
    { 
        dow:[1, 2, 3, 4, 5], 
        start: '13:30', 
        end: '17:00'
    }
    ]

would imply a one-hour break between 12:30 and 13:30

If you prefer to fetch the time from the DB, I would first ask - what is to stop you adding the date yourself in order to create an event? You can do it either on the server or in the client, it's up to you.