kendo-ui - 减小 kendo Scheduler 框的大小

Question

我有以下剑道调度程序，我想减小事件所在的块的大小：

我已经在样式方面尝试了一切以使其正常工作，但是当我这样做时，我通常会弄乱整个调度程序，最终看起来像这样：

有没有办法可以使日程块与事件的大小相同。我正在努力减少屏幕上浪费的空间，这就是我苦苦挣扎的地方。以下是我可用并一直在使用的所有样式：

  .new-time-marker {
    width: 0px;
    height: 0px;
    border: 6px solid transparent;
    border-left-color: blue;
    position: absolute;
    transform: translateY(-6px);
}

.k-dialog .k-window-titlebar .k-dialog-title {
    visibility: hidden;
}

.dvform {
    margin: 0 20px 6px 0;
}

.k-state-hover .dock-template a,
.dock-template a:hover {
    color: #000000;
}

.documentloaded-all-Yes {
    width: 100%;
    height: 108% !important;
    background-color: #ffffff;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    position: relative;
    float: left;
    overflow: hidden;
}

.documentloaded-all-No {
    width: 100%;
    height: 100%;
    background-color: #4573CC;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    position: relative;
    float: left;
    overflow: hidden;
    border-top: 4px solid red;
}

.documentloaded-all-0 {
    width: 100%;
    height: 100%;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    position: relative;
    float: left;
    overflow: hidden;
    border-top: 4px solid red;
}


.order-container {
    height: 100%;
    background-color: #4573CC;
    float: left;
    display: inline-block;
}

.order-container-current {
    height: 100%;
    float: left;
    display: inline-block;
    font-weight: 700;
    color: #ffffff;
    background: repeating-linear-gradient( -55deg, #222, #222 10px, #333 10px, #333 20px );
}

.time-bar-0 {
    height: 100%;
    float: left;
    display: inline-block;
    color: #000000;
    font-size: 11pt;
}


.time-bar-f {
    height: 35%;
    background-color: darkorange;
    float: left;
    display: inline-block;
    color: #ffffff;
    font-size: 11pt;
}

.time-bar-p {
    height: 100%;
    background-color: #137b06;
    float: left;
    display: inline-block;
    color: #ffffff;
    font-size: 11pt;
}


.k-tooltip {
    background: #e4e6eb !important;
    width: 650px;
    padding: 0px !important;
    margin: 0px !important;
    border: 1px solid green;
}

.tooltipMain {
    width: 100%;
    margin: 0px;
}

.tooltipleft {
    width: 49%;
    float: left;
    text-align: left;
    background-color: #e4e6eb;
    color: #475984;
    border: 1px solid black;
    padding: 3px 3px 3px 3px;
}

.tooltipright {
    width: 48%;
    float: right;
    text-align: left;
    background-color: #e4e6eb;
    color: #475984;
    border: 1px solid black;
    padding: 3px 3px 3px 3px;
}

.current-activity {
    font-size: 15pt;
    font-weight: 900;
    color: #ffffff;
    background: repeating-linear-gradient( -55deg, #222, #222 10px, #333 10px, #333 20px );
}

.order-cutoff-0 {
    background-color: #0C4076;
    height: 50%;
    float: right;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    color: #ffffff;
    font-size: 8pt;
}

.order-cutoff-1 {
    background-color: darkorange;
    height: 50%;
    float: right;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    color: #ffffff;
}

#scheduler {
    width: 100%;
}

.k-event-actions {
    height: 0px;
}

.k-event {
    height: 47px !important;
    top: 0px;
    left: 422px;
    width: 46px !important;
}



.documentloaded-row-No {
    background-color: red;
    color: #ffffff;
}

.emailvalid-row-0 {
    background-color: red;
    color: #ffffff;
}

/*.k-scheduler-dayview div:not(.k-scheduler-header) .k-today:not(.k-nonwork-hour):not(.k-state-selected), .k-scheduler-timelineview .k-today:not(.k-nonwork-hour) {
    background-color: transparent;
    padding: 0px;
    width: 23px;
}*/

order-cutoff-0.text-center {
    width: 35px;
}

.k-event, .k-task-complete {
    border-color: #3174ad;
    background: #0c4076;
    color: #fff;
}

我的调度程序如下所示：

  @(Html.Kendo().Scheduler<CycleSchedulerModel>()
                        .Name("scheduler")
                        .Date(DateTime.Now.Date)
                        .StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 6, 00, 00))
                        .Editable(false)
                        .Selectable(false)
                        .MajorTimeHeaderTemplate("<strong>#=kendo.toString(date, 'HH:mm')#</strong></sup>")
                        .EventTemplateId("  ")
                        .Views(views =>
                        {
                            views.TimelineView(timeline =>
                            {
                                timeline.StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 7, 30, 00));
                                timeline.EndTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 22, 00, 00));
                                timeline.MajorTick(30);
                                timeline.ColumnWidth(40);
                                timeline.EventHeight(38);   
                            });

                        })
                        .Timezone("Etc/UTC")
                        .Group(group =>
                        {
                            group.Resources("Zones").Orientation(SchedulerGroupOrientation.Vertical);

                        })
                        .Resources(resource =>
                        {
                            resource.Add(m => m.ZoneID)
                            .Title("Zone")
                            .Name("Zones")
                            .DataTextField("ZoneTypeDesc")
                            .DataValueField("ZoneID")
                            .DataColorField("Color")
                            .Multiple(true)
                            .BindTo(cOrderManagement.GetCycleSchedulerZones(new cDataAccess(true), cCore.ClientID, cCore.SiteID ?? 0, cCore.UserID, Model.oCycleTypeID));

                        })
                        .DataSource(d => d
                        .Model(m =>
                        {

                            m.Id(f => f.TaskID);
                            m.Field(f => f.Title).DefaultValue("Trip Name");
                            m.Field(f => f.Start);
                            m.Field(f => f.End);
                            m.Field(f => f.OwnerID);
                            m.Field(f => f.Description);
                            m.Field(f => f.IsAllDay);
                            m.Field(f => f.RecurrenceRule);
                            m.Field(f => f.Image);
                            m.RecurrenceId(f => f.RecurrenceID);
                            m.Field(f => f.ClientID);
                            m.Field(f => f.SiteID);
                            m.Field(f => f.ScheduleDate);

                            m.Field(f => f.Cycle);
                            m.Field(f => f.ZoneID);
                            m.Field(f => f.CycleTypeID);
                            m.Field(f => f.CycleDate);
                            m.Field(f => f.ZoneTypeDesc);
                            m.Field(f => f.PickingCapacity);
                            m.Field(f => f.PickersPerCycle);
                            m.Field(f => f.OutstandingPicks);
                            m.Field(f => f.Capacity);
                            m.Field(f => f.UtilizationPercentage);
                            m.Field(f => f.SerialNumber);
                            m.Field(f => f.CycleStart);
                            m.Field(f => f.CycleEnd);

                            m.Field(f => f.Editable);
                        })
                        .Read(r => r.Action("GetCycleScheduleItems", "OrderManagement", new { cycleTypeID = Model.oCycleTypeID }).Data("getSearchArgs"))


                        )
)

标签： kendo-uischedulerstyling