This is a migrated thread and some comments may be shown as answers.

Tasks color don't work

1 Answer 61 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Gianni
Top achievements
Rank 1
Gianni asked on 19 Mar 2014, 07:46 AM
I have a scheduler where I'd like to display more calendars.
In my situation I have to load the empty scheduler and then populate it dinamically. 

For simulate it, I have two methods in the main function: "scheduler_show" that display the scheduler without data and "schduler_update" that load data on it.

I don't know why, but it loads correctly all the calendars and items, but doesn't show the right colour of the tasks (also if they're associated with the right resource).

Where I'm wrong?

This is the script:

$(function() {
    scheduler_show();
    scheduler_update();
});
 
var schedulerTasks = [];
var schedulerDataSource = new kendo.data.SchedulerDataSource({
    transport: {
        read: function (request) {
            request.success(schedulerTasks);
        },
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return {
                    models: kendo.stringify(options.models)
                };
            }
        }
    },
    schema: {
        model: {
            id: "taskId",
            fields: {
                taskId: { from: "Id" },
                title: { from: "Title", validation: { required: true } },
                start: { type: "date", from: "StartDate" },
                end: { type: "date", from: "EndDate" },
                description: { from: "Description" },
                calendarId: { from: "CalendarId", validation: { required: true } },
                isAllDay: { type: "boolean", from: "IsAllDay" }
            }
        }
    },
    filter: {
        logic: "or",
        filters: []
    }
});
 
function scheduler_show() {
    kendo.culture("it-IT");
    $("#scheduler").kendoScheduler({
        date: new Date("2014/03/19"),
        startTime: new Date("2014/03/19 01:00 AM"),
        height: $(document).height() - 20,
        views: [
            { type: "day", dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'ddd dd')#</strong>")},
            { type: "workWeek", selected: true, dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'ddd dd')#</strong>") },
            { type: "week", dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'ddd dd')#</strong>")},
            "month",
            "agenda"
        ],
        save: scheduler_save,
        remove: scheduler_remove,
        timezone: "Etc/UTC",
        dataSource: schedulerDataSource,
        resources: [
            {
                field: "calendarId",
                title: "Calendario",
                dataSource: []
            }
        ]
    });
}
 
function scheduler_update()
{
    var calendarResources = [ {  "text": "Calendar ONE", "value": "mycalendar1", "color": "#9fc6e7" },{  "text": "Calendar TWO", "value": "mycalendar2", "color": "#7bd148" }];
    var calendarFilters = [ { "field": "calendarId", "operator": "eq", "value": "mycalendar1" },{ "field": "calendarId", "operator": "eq", "value": "mycalendar2" }];
    schedulerTasks = [{"Id": "task1","Title": "Task 1","Description": null,"CalendarId": "mycalendar1","StartDate": "2014-03-19 08:00","EndDate": "2014-03-19 09:00","IsAllDay": false},
                      {"Id": "task2","Title": "Task 2","Description": null,"CalendarId": "mycalendar2","StartDate": "2014-03-19 10:00","EndDate": "2014-03-19 11:00","IsAllDay": false}];
    var schedulerControl = $("#scheduler").data("kendoScheduler");
    schedulerControl.resources[0].dataSource.data(calendarResources);
    schedulerControl.resources[0].dataSource.filter(calendarFilters);
    schedulerDataSource.read();
    schedulerControl.view(schedulerControl.view().name);
}
 
function scheduler_save(options) {
}
 
function scheduler_remove(options) {
}

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 21 Mar 2014, 08:45 AM
Hi Gianni,

Apologies for not getting back to you earlier. 

The issue is due to incorrect Scheduler dataSource filters - you should filter by the "value" field. For your convenience I prepared a simple example which demonstrates this approach in action. 

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Gianni
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or