Angular - Scheduler - changing options after initialization

[Peter]

Hello,
When using scheduler with angular initial options sent through options attribute are accepted. However, directive don't watch options changes to update and we don't have some kind of API like scheduler.setOptions('editable', true).
So, queation is: How to set option (like editable) after initialization.

[Mihai]

Hello,

To set a widget option after initialization you can acquire a reference to the widget by passing a name to the kendo-scheduler directive, e.g.:

<div kendo-scheduler="sched" k-options="options"></div>

Now you can access the widget via $scope.sched in your controller:

$scope.sched.setOptions(...);

Regards,
Mihai
Telerik

 

 

[Gabriel Buck]

I am struggling with this same question. I have tried the following, but nothing is working. In my angular controller that contains the kendo scheduler, I set the $scope.schedulerOptions with everything I think I need, except I omit the "data" key. My options code is below. 

$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,
                    //data: [{ "AppointmentUid": 550616, "Title": "Get groceries", "Description": "go to food store", "IsAllDay": false, "Start": "\/Date(1413230400000)\/", "End": "\/Date(1413235800000)\/", "StartTimezone": null, "EndTimezone": null, "RecurrenceRule": null, "RecurrenceException": null, "Resource": 2 }, { "AppointmentUid": 550615, "Title": "Get hair done", "Description": "barber shop visit", "IsAllDay": false, "Start": "\/Date(1413216000000)\/", "End": "\/Date(1413217800000)\/", "StartTimezone": null, "EndTimezone": null, "RecurrenceRule": null, "RecurrenceException": null, "Resource": 2 }],
                    //data: JSON.parse(getData()),
                    //data: $scope.items,
                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                id: { from: "ID", type: "number" },
                                appointmentUid: { from: "AppointmentUid", 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" },
                            }
                        }
                    },
                }
            };

$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: will set dynamically!,
                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                id: { from: "ID", type: "number" },
                                appointmentUid: { from: "AppointmentUid", 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" },
                            }
                        }
                    },
                }
            };

When I am ready to populate the dataSource, I am trying this, but nothing is working.

$scope.appointmentsScheduler.setOptions("dataSource", $scope.items);

or this... 

$scope.appointmentsScheduler.setOptions("dataSource", [{ "AppointmentUid": 550616, "Title": "Get groceries", "Description": "go to food store", "IsAllDay": false, "Start": "\/Date(1413230400000)\/", "End": "\/Date(1413235800000)\/", "StartTimezone": null, "EndTimezone": null, "RecurrenceRule": null, "RecurrenceException": null, "Resource": 2 }, { "AppointmentUid": 550615, "Title": "Get hair done", "Description": "barber shop visit", "IsAllDay": false, "Start": "\/Date(1413216000000)\/", "End": "\/Date(1413217800000)\/", "StartTimezone": null, "EndTimezone": null, "RecurrenceRule": null, "RecurrenceException": null, "Resource": 2 }]);

or this...
$scope.appointmentsScheduler.dataSource.options.data = $scope.items; // this is a json object array

If this is possible, can you share in code how you solved this problem? Thanks!

[Atanas Korchev]

Hello Gabriel,

If you want to change only the data option of the data source you should use the data method of its data source:

$scope.appointmentsScheduler.dataSource.data($scope.items);

Regards,
Atanas Korchev
Telerik