Question

我有一个kendo计划，我想根据日期更改颜色，如果事件计划是将来的日期蓝色和小于红色并完成为绿色。我正在以下面的方式做，但这里的问题有时候这有效$（＆＃39; div.k-event [data-uid =＆＃34;＆＃39; + eventDetails [＆＃39; uid＆＃39;] +＆＃39;＆＃34;]＆＃39;）。长度如果> 0，否则无法在小于0时设置样式。对此有任何帮助都非常感谢。

     @(Html.Kendo().Scheduler<BHI.TESQ.Entities.Entities.SchedulerData>()
    .Name("scheduler")
    .Events(e =>
        {
            e.Save("scheduler_save");
            e.Remove("scheduler_remove");
            e.Move("scheduler_move");
            e.Edit("scheduler_edit");
            e.MoveStart("scheduler_moveStart");
            e.ResizeStart("scheduler_ResizeStart");
            e.DataBound("scheduler_dataBound");
        })
    .Group(group => group.Resources("Equipment").Orientation(SchedulerGroupOrientation.Vertical))
    .Resources(resource =>
    {
        resource.Add(m => m.Id)
        .Title("Equipment")
        .Name("Equipment")
        .Multiple(false)
        .DataTextField("Text")
        .DataValueField("Value")
        .DataColorField("Color")
        .DataSource(ds => ds
            .Read(read => read.Action("GetLocations", "Schedule").Data("sendLocations")).Events(e => e.Change("refreshScheduler"))
        );
    })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.Field(f => f.Title).DefaultValue("New Event");
            m.Field(f => f.Start);
            m.Field(f => f.End);
            m.Field(f => f.Description);
            m.Field(f => f.EquipName);
            m.Field(f => f.EquipmentId);
        })
        .Read(read => read.Action("Read", Request.RequestContext.RouteData.Values["controller"].ToString()).Data("additionalInfo"))
        .ServerOperation(true)
        )
    .Views(views =>
    {
        views.TimelineWorkWeekView(timeline =>
        {

            timeline.StartTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 00, 00, 00).AddDays(-1 * ((int)DateTime.Today.DayOfWeek)));
            timeline.EndTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 00, 00, 00).AddDays(7 - ((int)DateTime.Today.DayOfWeek)).AddMinutes(-1));

            timeline.EventHeight(25);
            timeline.Title("Work Week View");
            timeline.MajorTick(1500);
        });
        views.TimelineWeekView(timeline =>
        {
            timeline.StartTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 00, 00, 00).AddDays(-1 * ((int)DateTime.Today.DayOfWeek)));
            timeline.EndTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 00, 00, 00).AddDays(7 - ((int)DateTime.Today.DayOfWeek)).AddMinutes(-1));
            timeline.EventHeight(25);
            timeline.Title("Week View");
            timeline.MajorTick(1500);

        });
        views.TimelineMonthView(timeline =>
        {
            timeline.Selected(true);
            timeline.StartTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 01, 00, 00, 00));
            timeline.EndTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 01, 00, 00, 00).AddMonths(1).AddMinutes(-1));
            timeline.MajorTick(1440);
            timeline.EventHeight(25);
            timeline.Title("Month View");
        });
        views.DayView(dayView =>
        {
            dayView.Title("Day View");
            dayView.StartTime(new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 00, 00, 00, 00));

        });
    })

    .Editable(true)
    .Timezone("Etc/UTC")
            //.Timezone("Asia/Calcutta")
    .Height(750)
    .BindTo(Model)
    )

</div>


function scheduler_dataBound(e) {
        var jobTestId = @Convert.ToInt64(Session["JobTestId"]);
        if (e.sender._selectedViewName != "day")
        {
            debugger;
            e.sender._data.forEach(function(eventDetails) {
                if(eventDetails['JobTestId'] != jobTestId)
                {
                    if ($('div.k-event[data-uid="'+eventDetails['uid']+'"]').length != 0)
                    {

                        $('div.k-event[data-uid="'+eventDetails['uid']+'"]')[0].style.backgroundColor = "blue";
                        $('div.k-event[data-uid="'+eventDetails['uid']+'"]')[0].style.color = "white";
                        if (eventDetails['TestStatus'] === 'Completed') {
                            $('div.k-event[data-uid="'+eventDetails['uid']+'"]')[0].style.backgroundColor = "green";
                        }
                        if(eventDetails['TestStatus'] === 'Abandoned')
                        {
                            $('div.k-event[data-uid="'+eventDetails['uid']+'"]')[0].style.backgroundColor = "red";
                            $('div.k-event[data-uid="'+eventDetails['uid']+'"]')[0].style.borderColor = "red";
                        }
                        if ((eventDetails['TestStatus'] === 'In Progress' || eventDetails['TestStatus'] === 'Scheduled') && Date.parse(eventDetails['end']) <=  Date.parse(new Date())) {
                            $('div.k-event[data-uid="'+eventDetails['uid']+'"]')[0].style.backgroundColor = "red";
                            $('div.k-event[data-uid="'+eventDetails['uid']+'"]')[0].style.borderColor = "red";
                        }
                    }

                }
                else if ($('div.k-event[data-uid="'+eventDetails['uid']+'"]').length != 0)
                    $('div.k-event[data-uid="'+eventDetails['uid']+'"]')[0].style.backgroundColor = "yellow";

            });
        }
    }

Answer 1

根据Telerik论坛，有两种方法可以改变事件的颜色。通过资源或通过模板。（更多信息enter link description here）我认为更容易通过模板，根据日期选择相应的模板。

更新：

使用模板你应该有两个CSS类，一个用于以前的事件，另一个用于未来的事件

.EventTemplate("#if(start <new Date()){#"+
"<div class='event-1'></div>"+
"#}else{#"+
"<div class='event-2'></div>"+
"#}#")

我使用了kendo UI dojo进行了快速测试，它可以与特定日期进行比较，您可以在这里观看演示demo

pd：如果信息来自数据库并不重要，因为渲染是在客户端完成的。

如何根据条件

1 个答案: