Using Scheduler as syntax with events

I've noticed the following error in the console:

daypilot-all.min.js:34 Uncaught TypeError: $k.events.update is not a function

I would like to mention that I'm adding the events like this:

vm.scheduler.events.list = [];
_.forEach(mappedEvents, function (value) {
    vm.scheduler.events.list.push(value);
});            

After updating my code to make use of events.list instead on config.events, the speeds is great, but most of the existing code is broken. I'm aware of the vm.config that will no longer work, and that I should probable make use of vm.scheduler, but even the filtering is broken:

vm.scheduler.events.filter(vm.searchText);
// TypeError: csg is not a function undefined - where 'csg' was the searchText

I'm guessing it's because I'm making use of vm.scheduler.events.list and not vm.scheduler.events, but this goes for allot of the other code implementations...

Your setup seems to overwrite the "events" property of the DayPilot.Scheduler object somewhere. The events property holds not only the event data (events.list) but also other methods (events.update(), events.add(), etc.). The "events" property serves as a namespace here.

What is your "vm.scheduler" object? Is it the DayPilot.Scheduler object (saved using "publish-as" attribute) or is it the config object ("config" attribute)?

  <daypilot-scheduler id="dp" config="ctrl.config" events="ctrl.events" publish-as="ctrl.scheduler" ></daypilot-scheduler>

In this example, ctrl.scheduler holds the DayPilot.Scheduler object and you can use it to load events like this:

<script>
    var app = angular.module('main', ['daypilot']).controller('SchedulerCtrl', function() {
        var ctrl = this;
        ctrl.loadEvents = function() {
            ctrl.scheduler.events.list = [ /* ... */ ];
            ctrl.scheduler.update();
        };
    });
</script>

The latest version of DayPilot will also accept "events" or "events.list" in the config object (but it brings the same performance problem as the events attribute).

Using events.list of the DayPilot.Scheduler object is fine. But you may have overwritten the events object somewhere accidentally.

Hi Dan,

I apologize if this is a bit of a code dump, but I'm not sure how else to show you what I'm doing:

<daypilot-scheduler id="dp" publish-as="vm.scheduler">
</daypilot-scheduler>

                vm.scheduler.theme = 'briteplan';
                vm.scheduler.businessBeginsHour = 8;
                vm.scheduler.businessEndsHour = 17;
                vm.scheduler.dynamicEventRenderingMargin = 20;
                vm.scheduler.progressiveRowRendering = true;
                vm.scheduler.heightSpec = 'Max';
                vm.scheduler.height = 500;
                vm.scheduler.rowMarginBottom = 20;
                vm.scheduler.dynamicEventRenderingCacheSweeping = true;
                vm.scheduler.eventMovingStartEndEnabled = true;
                vm.scheduler.eventResizingStartEndEnabled = true;
                vm.scheduler.timeRangeSelectingStartEndEnabled = false;
                vm.scheduler.scale = 'Day';
                vm.scheduler.days = vm.daysInCurrentMonth * 2;
                vm.scheduler.cellDuration = 1440;
                vm.scheduler.cellWidth = 60;
                vm.scheduler.eventHeight = 30;
                vm.scheduler.startDate = moment().subtract(1, 'months').startOf('month').format(appConfig.alternativeDateFormat);
                vm.scheduler.showNonBusiness = true;
                vm.scheduler.timeHeaders = [
                    { groupBy: 'Month' },
                    { groupBy: 'Cell', format: 'ddd d' }
                ];
                vm.scheduler.events = [];
                vm.scheduler.events.list = [];
                vm.scheduler.separators = [
                    { color: 'Red', location: moment().format(appConfig.alternativeDateFormat), layer: 'BelowEvents' }
                ];
                vm.scheduler.contextMenu = new DayPilot.Menu({
                    items: [
                        {
                            // SHOW THE EVENT DETAILS
                            text: 'Show details',
                            onclick: function () {
                                viewEventModal(this.source.data);
                            }
                        },
                        {
                            // EDIT THE EVENT
                            text: 'Edit event',
                            onclick: function () {
                                addEditEventModal(this.source.data);
                            }
                        },
                        { text: '-' },
                        {
                            // DELETE THE SELECTED BOOKING EVENT
                            text: 'Delete',
                            items: [
                                {
                                    text: 'Yes', onclick: function () {
                                        vm.scheduler.events.remove(this.source);
                                        bookingApi.removeBookingById(this.source.id())
                                            .then(function (result) {
                                                if (result) {
                                                    //vm.scheduler.message('booking event removed...');
                                                    // inform the user of what happened
                                                    toastr['success']('booking event removed...', 'Resource Booking Event');
                                                }
                                            });
                                    }
                                },
                                { text: 'Cancel', onclick: function () { return; } }
                            ]
                        }
                    ]
                });
                vm.scheduler.bubble = new DayPilot.Bubble({
                    onLoad: function (args) {
                        args.html = args.source.bubbleHtml();
                    }
                });
                //ON-BEFORE-EVENT-RENDER
                vm.scheduler.onBeforeEventRender = onBeforeEventRender;
                //ON-BEFORE-CELL-RENDER
                vm.scheduler.onBeforeCellRender = onBeforeCellRender;
                //ON-EVENT-FILTER
                vm.scheduler.onEventFilter = onEventFilter;
                //ON-ROW-FILTER
                vm.scheduler.onRowFilter = onRowFilter;
                //ON-TIME-RANGE-SELECTED
                vm.scheduler.onTimeRangeSelected = onTimeRangeSelected;
                //ON-EVENT-CLICKED
                vm.scheduler.onEventClicked = onEventClicked;
                //ON-EVENT-MOVE
                vm.scheduler.onEventMoved = onEventMoved;
                //ON-EVENT-RESIZED
                vm.scheduler.onEventResized = onEventResized;

                vm.scheduler.treePreventParentUsage = true;
                vm.scheduler.init();

               // clear any existing data
               vm.scheduler.events.list = [];

               vm.scheduler.resources = _.map(vm.activeBookingModels,
                   function (item) {
                       return { name: item.FullName, id: item.Id }
                   });

            var bookings = flatten ? _.map(bookingArgs, 'Bookings') : bookingArgs;
            var mappedEvents = _.map(flatten ? _.flattenDeep(bookings) : bookingArgs,
                function (item) {
                    var e = {
                        start: new DayPilot.Date(item.FromDate.format(appConfig.alternativeDateFormat))
                            .addHours(vm.scheduler.businessBeginsHour),
                        end: new DayPilot.Date(item.ToDate.format(appConfig.alternativeDateFormat))
                            .addHours(vm.scheduler.businessEndsHour),
                        id: item.Id,
                        resource: item.ResourceID,
                        text: item.Description,
                        bubbleHtml: 'Hours: ' + item.Hours,
                        meta: item
                    };
                    return e;
                });

            _.forEach(mappedEvents, function (value) {
                vm.scheduler.events.list.push(value);
            });            

            vm.scheduler.eventHoverHandling = 'Bubble';
            vm.scheduler.update();

Can you perhaps see anything?

Thanks Dan

Yes, I can - see this line:

 vm.scheduler.events = [];

It's below "vm.scheduler.timeHeaders".

You might also consider using the plain JavaScript initialization instead of the <daypilot-scheduler> angular element:

<div id="dp"></dp>

<script>
vm.scheduler = new DayPilot.Scheduler("dp");
// ... config ...
vm.scheduler.init();
</script>

Because when you don't use "config" and "events" attributes it doesn't bring any benefit.

The angular element (<daypilot-scheduler>) works like this:

1. It creates the placeholder <div>
2. It creates DayPilot.Scheduler object without any config.
3. It calls .init()
4. Then it watches the config and events attributes for changes.
5. If any changes are detected, they are applied and the Scheduler is updated using .update().

Your config section calls .init() the second time - but it's only legal to call it once. The second call is ignored. That might be the reason why some of your settings are not applied properly. If you want to keep your current setup you need to replace the .init() call with .update().

Thanks Dan - I'll give a shot and report back with some feedback!

Richard