search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Using Scheduler as syntax with events

Asked by Richard
3 years ago.

Hi,

I'm busy making use of the scheduler as syntax. I'm have attached an event to the scheduler:

vm.scheduler.onEventResized = onEventResized;

But the event never fires? I have also set the following properties:

vm.scheduler.dynamicEventRenderingCacheSweeping = true;
vm.scheduler.eventMovingStartEndEnabled = true;
vm.scheduler.eventResizingStartEndEnabled = true;
vm.scheduler.timeRangeSelectingStartEndEnabled = false;

Which made no difference.

Any suggestions?
Thanks

Comment posted by Richard
3 years ago.

I've noticed the following error in the console:

daypilot-all.min.js:34 Uncaught TypeError: $k.events.update is not a function
Comment posted by Richard
3 years ago.

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);
});            
Comment posted by Richard
3 years ago.

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

Answer posted by Dan Letecky [DayPilot]
3 years ago.

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)?

An example from the docs (https://doc.daypilot.org/scheduler/angularjs/):
  <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.

Comment posted by Richard
3 years ago.

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:

HTML:
<daypilot-scheduler id="dp" publish-as="vm.scheduler">
</daypilot-scheduler>
Configure the 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();
Load the resources:
               // clear any existing data
               vm.scheduler.events.list = [];

               vm.scheduler.resources = _.map(vm.activeBookingModels,
                   function (item) {
                       return { name: item.FullName, id: item.Id }
                   });
Loading the events:
            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

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Yes, I can - see this line:

 vm.scheduler.events = [];

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

Comment posted by Dan Letecky [DayPilot]
3 years ago.

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

Comment posted by Richard
3 years ago.

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

Richard

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.