Implements an Angular Directive to show a custom time tick for the Kendo UI Scheduler

schedulerTimeMarker.js

define(['../module', 'lodash', 'moment', 'schedulerService', 'utils'],
    function (module, _, moment, schedulerService, utils) {
        function directive($interpolate, $timeout) {
            function link($scope, element, attrs) {
                let widget;

                function ensureTick(element, offset, isVertical) {
                    let tick = element.find('.rnd-k-scheduler-tick');

                    if (tick.length === 0) {
                        const orientation = isVertical ? 'vertical' : 'horizontal';
                        element.append(`<div class="rnd-k-scheduler-tick ${orientation}"></div>`);
                        tick = element.find('.rnd-k-scheduler-tick');
                    }

                    tick.css('top', offset);
                }

                function removeTick(element) {
                    element.find('.rnd-k-scheduler-tick').remove();
                }

                function renderMarker() {
                    const content = element.find('.k-scheduler-layout .k-scheduler-content');
                    const times = element.find('.k-scheduler-layout tr:nth-child(2) .k-scheduler-times');

                    const view = widget.view();

                    if (view && view.options.timeMarkerTimezone) {
                        const timezone = view.options.timeMarkerTimezone;
                        const start = view.startTime();
                        const end = view.endTime();

                        const endMoment = moment(end);
                        if (endMoment.isSame(start)) {
                            endMoment.add(1, 'day');
                        }
                        const duration = endMoment.diff(start, 'hour', true);

                        const contentTable = content.find('.k-scheduler-table');
                        const cellSize = contentTable.height() / duration;

                        const currentMoment = moment(schedulerService.convertToTimezone(timezone, new Date()));
                        const startMoment = moment(start);
                        const timeOfDay = currentMoment.diff(currentMoment.clone().startOf('day'), 'hour', true);
                        const startTimeOfDay = startMoment.diff(startMoment.clone().startOf('day'), 'hour', true);

                        if (timeOfDay >= startTimeOfDay && timeOfDay <= duration + startTimeOfDay) {
                            const offset = cellSize * (timeOfDay - startTimeOfDay);
                            ensureTick(content, offset, true);
                            ensureTick(times, offset, true);
                        } else {
                            removeTick(content);
                            removeTick(times);
                        }
                    }
                }

                function init() {
                    if (widget) {
                        widget._events.navigate.push(onSchedularNavigate);
                        onSchedularNavigate();
                    }
                }

                function detach() {
                    if (widget) {
                        utils.remove(widget._events.navigate, onSchedularNavigate);
                    }
                }

                function onSchedularNavigate() {
                    $timeout(() => renderMarker());
                }

                const widgetProperty = $interpolate(attrs.schedulerTimeMarker)($scope);
                $scope.$watch(widgetProperty, () => {
                    if (!widget) {
                        widget = _.get($scope, widgetProperty);
                        if (widget) {
                            init();
                        }
                    }
                });

                $scope.$on('$destroy', () => detach());
            }

            return {
                restrict: 'A',
                link: link,
                template: null
            };
        }
    
        module.directive('schedulerTimeMarker', directive);
});