Kendo Scheduler Dynamic DataSource with Angular

Question

I have a Kendo Scheduler on my page.

<div kendo-scheduler k-options="schedulerOptions" k-data-source="items"></div>

My angular controller will make a call to the server to get data, it looks like this, but I do not know what my URL parameter will be until it loads up ($scope.$watch).

$scope.$watch(function () { return MyService.leadID; }, function (newValue) {
    if (newValue) {
        getAppointmentsTabData(newValue);
    }
});

var getAppointmentsTabData = function (leadID) {
    MyService.getAppointmentsTabData(leadID)
       .then(function (data) {
            $scope.items = data;
           }
       }
   );
};

How can I bind this data to my Kendo Scheduler?

I can get this Scheduler to work with static data, but not the JSON list of objects that get returned when the server sends them. I would like to be able to bind my $scope.items to the dataSource, but that does not appear to work.

Here is the schedulerOptions code.

$scope.schedulerOptions = {
    date: new Date("2014/10/13"),
    startTime: new Date("2014/10/13 07:00 AM"),
    height: 310,
    views: [
        "agenda",
        { type: "week", selected: true, allDaySlot: false },
        { selectedDateFormat: "{0:dd-MM-yyyy}" }
    ],
    eventTemplate: "<span class='custom-event'>{{dataItem.title}}</span>",
    allDayEventTemplate: "<div class='custom-all-day-event'>{{dataItem.title}}</div>",
    timezone: "Etc/UTC",
    dataSource: {
        data: $scope.items,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { from: "ID", type: "number" },
                    appointmentId: { from: "AppointmentId", type: "number" },
                    resource: { from: "Resource", type: "number" },
                    description: { from: "Description" },
                    isAllDay: { type: "boolean", from: "IsAllDay" },
                    end: { from: "End", type: "date" },
                    start: { from: "Start", type: "date" },
                    title: { from: "Title", defaultValue: "No title" },
                    startTimezone: { from: "StartTimezone" },
                    endTimezone: { from: "EndTimezone" },
                    recurrenceRule: { from: "RecurrenceRule" },
                    recurrenceException: { from: "RecurrenceException" },
                }
            }
        },
    }
};

I can get the static approach to work. I cannot really use the remote data approach that looks like this (below) because I do not know what my URL is until my $scope.$watch is triggered. I need to append query string params.

 dataSource: {
    batch: true,
    transport: {
        read: {
            url: "/MyController/GetMyData",
            dataType: "json",
        },

Does anyone have any suggestions on how I can populate my Scheduler dataSource dynamically?

I have seen this question, Kendo update scheduler options dynamically, but I am not having any luck getting the setOptions(). If only I could call $scope.myScheduler.setOptions("dataSource", myJsonObjectArry), that would be awesome, but nothing.

I am able to manipulate $scope.myScheduler._data (as an array), but I need some form of a refresh method to redraw my UI. This approach doesn't seem right though.

Thanks for any help.

score 4 · Accepted Answer · answered Oct 16 '14 at 14:04

I am answering my own question. In case you run into this situation, here is how I solved it.

Here is my schedulerOptions now. Notice there is no dataSource set and no schema. This is because I will populate that with my own dataSource dynamically.

$scope.schedulerOptions = {
    date: new Date("2014/10/13"),
    startTime: new Date("2014/10/13 07:00 AM"),
    showWorkHours: true,
    height: 310,
    views: [
        "agenda",
        { type: "week", selected: true, allDaySlot: false },
        { selectedDateFormat: "{0:dd-MM-yyyy}" }
    ],
    edit: $scope.edit,
    editable: {
        template: $("#editor").html()
    },
    timezone: "Etc/UTC",
    dataSource: {
        data: [], // will be set dynamically
    }
};

When my data is returned to this js controller, I will call this.

$scope.myScheduler.dataSource.data(getSchedulerEvents($scope.data.items));

Which in turn will call this, which creates the dataSource for me.

var getSchedulerEvents = function (items) {
    var result = [];
    var event;

    for (var i = 0, length = items.length; i < length; i++) {
        event = items[i];

        result.push(new kendo.data.SchedulerEvent({
            id: event.ID,
            title: event.Title,
            description: event.Description,
            start: kendo.parseDate(event.Start),
            end: kendo.parseDate(event.End),
            isAllDay: event.IsAllDay,
            recurrenceException: event.RecurrenceException,
            recurrenceId: event.RecurrenceId,
            recurrenceRule: event.RecurrenceRule,
            resource: event.Resource,
        }));
    }
    return result;
}

If you run into this problem, hopefully this helps.

You can access Scheduler from $scope by naming it when you create it, like this: — Ryan Sorensen, Aug 27 '15 at 23:59

Kendo Scheduler Dynamic DataSource with Angular

1 Answers1