javascript - 剑道调度任务颜色

Question

我想在 ViewModel 中为特定属性的不同值使用不同的颜色。

我的 ViewModel 是::

public class SchedulerViewModel : ISchedulerEvent
{
    public string ScheduleID { get; set; }
    public int? RecurrenceID { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public DateTime Start { get; set; }
    public DateTime End { get; set; }
    public string RecurrenceRule { get; set; }
    public string RecurrenceException { get; set; }
    public bool IsAllDay { get; set; }
    public string StartTimezone { get; set; }
    public string EndTimezone { get; set; }
    public int IsDismissed { get; set; }

}

在查看我正在使用以下内容::

@(Html.Kendo().Scheduler<Invoice.Models.ViewModels.SchedulerViewModel>()
        .Name("scheduler")
        .StartTime(DateTime.UtcNow)
        .AutoBind(true)
        .Date(DateTime.UtcNow)
        .Views(views =>
        {
            views.DayView(dateformat => dateformat.SelectedDateFormat("{0:dd-MMM-yyyy}"));
            views.WeekView(weekview => weekview.Selected(true));
            views.MonthView();
            views.AgendaView();
        })

        .Resources(resource =>
        {
                        resource.Add(m => m.IsDismissed)
                               .Title("Is Dismissed")
                               .DataValueField("Value")
                               .DataColorField("Color")
                               .BindTo(new[] {
                                new { Value = 1, Color = "#f8a398" } ,            //red
                                new {Value = 0, Color = "#51a0ed" }              //Blue
                            });
        })

        .DataSource(d => d
            .Batch(false)
            .Model(m =>
            {
                m.Id(f => f.ScheduleID);
                m.Field(f => f.Title).DefaultValue("No title");
                m.Field(f => f.IsDismissed).DefaultValue(0);
                m.Field(f => f.Start).DefaultValue(DateTime.UtcNow);
                m.Field(f => f.End).DefaultValue(DateTime.UtcNow);
            })
            .ServerOperation(true)
            .Read("Calendar_ReadSchedule", "Dispatch")
            .Create("Calendar_CreateSchedule", "Dispatch")
            .Destroy("Calendar_DestroySchedule", "Dispatch")
            .Update("Calendar_UpdateSchedule", "Dispatch")

    )
)

问题是我只得到调度程序中任务的默认颜色为红色。但我想要基于属性“IsDismissed”中的值的不同颜色。

怎么可能？

Answer 1

也许您的数据绑定不是 korrekt，因此所有事件都获得默认值

将事件添加到调度程序： ... .Events(events => events .DataBound("scheduler_dataBound")) ... 和 javascript 中的函数： function scheduler_dataBound(e) { scheduler._data.forEach(function (name) { console.日志（“id”+name.id+“uid”+name.uid）}）；

} ...在你的情况下 scheduler._data.forEach(function (name) { console.log( "isDis " + name.IsDismissed)

调试事件可能有助于您检测错误。

Answer 2

尝试这样的事情：

$(function() {
   scheduler_update();
});


function scheduler_update()
{
    var calendarResources = [ {  "text": "Calendar ONE", "value": "mycalendar1", "color": "#9fc6e7" },{  "text": "Calendar TWO", "value": "mycalendar2", "color": "#7bd148" }];

    var calendarFilters = {logic: "or", filters: [ { "field": "value", "operator": "eq", "value": "mycalendar1" },{ "field": "value", "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);
}

演示

Answer 3

您可以使用 EventTemplate 属性为事件的背景着色。

    @(Html.Kendo().Scheduler<Invoice.Models.ViewModels.SchedulerViewModel>()
        .Name("scheduler")
        .StartTime(DateTime.UtcNow)
        .AutoBind(true)
        .EventTemplate( "<div style= 'background-color:( #= IsDismissed # );'>" +
                        "<h3>#= title #</h3>" +
                    "</div>")