ScheduleTooltip

//<code-header>
fiddle.title = 'Schedule tooltip';
//</code-header>
const calendar = new Calendar({
    appendTo : targetElement,
    height   : 700,

    // We have a little less width in our context, so reduce the responsive breakpoints
    responsive : {
        small : {
            when : 480
        },
        medium : {
            when : 640
        }
    },

    // Start life looking at this date
    date : '2020-03-01',

    // Used to create view titles
    dateFormat : 'DD MMM YYYY',

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        transport : {
            load : {
                url : 'data/Calendar/examples/feature/company-events.json'
            }
        },
        autoLoad : true
    },

    // Features named by the properties are included.
    // An object is used to configure the feature.
    features : {
        scheduleTooltip : {
            // Add to the default content of the tooltip if hovering outside core hours.
            renderer(view, date, preciseDate) {
                const
                    { coreHours } = view,
                    content      = this.defaultRenderer(view, preciseDate),
                    hour         = preciseDate.getHours();

                if (hour < coreHours.start || hour >= coreHours.end) {
                    return `<strong>Outside core hours</strong>${content}`;
                }
                return content;
            }
        },
        drag : {
            // Each drag mode has a separate validation callback.
            // We route them all to one on the calendar instance
            validateCreateFn : 'up.validateDrag',
            validateMoveFn   : 'up.validateDrag',
            validateResizeFn : 'up.validateDrag'
        }
    },

    // Modes are the views available in the Calendar.
    // An object is used to configure the view.
    modes : {
        agenda : null,
        year   : null,
        week   : {
            dayStartTime : 8,
            coreHours    : {
                overlayDay : true,
                start      : 9,
                end        : 18
            }
        },
        day : {
            dayStartTime : 8,
            coreHours    : {
                overlayDay : true,
                start      : 9,
                end        : 18
            }
        }
    },

    onBeforeAutoCreate({ view, startDate, endDate }) {
        return this.validateEventDates(view, startDate, endDate);
    },

    validateDrag({ drag, eventRecord }) {
        return this.validateEventDates(drag.target.view, eventRecord.startDate, eventRecord.endDate);
    },

    validateEventDates(view, startDate, endDate) {
        const
            { coreHours } = view,
            endHour       = endDate.getHours() + (endDate.getMinutes() / 60) + (endDate.getSeconds() / 3600);

        // Enforce core hours.
        if (startDate.getHours() < coreHours.start || endHour > coreHours.end) {
            Toast.show(`Events can only be between ${coreHours.start}:00 and ${coreHours.end}:00`);
            return false;
        }
    }
});