Changing column widths on a scheduler

Question

I am trying to do something that seems like it should be relatively easy to do, though I can't find any sources on how to do it.

I have a Kendo Scheduler control that is rendered as a DayView. I am simply trying to change the width of the columns. Here is a screen shot:

Here is my MVC view code:

<div>
    @(Html.Kendo().Scheduler<TechScheduler.Infrastructure.ViewModels.ScheduleEventModel>()
    .Name("scheduler")
    .Editable(true)
    .Date(DateTime.Now)
    .StartTime(new DateTime(DateTime.Now.AddYears(-1).Year, DateTime.Now.AddYears(-1).Month, DateTime.Now.AddYears(-1).Day, 0, 0, 0))
    .EndTime(new DateTime(DateTime.Now.AddYears(1).Year, DateTime.Now.AddYears(1).Month, DateTime.Now.AddYears(1).Day, 23, 59, 59))
    .WorkDayStart(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0))
    .WorkDayEnd(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 23, 59, 0))
    .WorkWeekStart(0)
    .WorkWeekEnd(7)
    .MajorTick(60)
    .Height(600)                
    .Timezone("Etc/UTC")
    .Events(e =>
    {
        e.ResizeEnd("scheduler_resizeEnd");
        e.DataBound("scheduler_dataBound");
        e.Edit("scheduler_edit");
    })
    .Views(views =>
    {
        views.DayView(z =>
        {
            z.StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0));
            //z.EndTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 23, 59, 59));
            z.MajorTick(60);
            z.ShowWorkHours(false);
            z.Footer(false);
            z.EventTemplateId("evenTemplate");
        });            
    })
    .Group(group => group.Resources("Attendees").Orientation(SchedulerGroupOrientation.Horizontal))
    .Resources(resource =>
    {
        resource.Add(m => m.Attendees)
            .Title("Attendees")
            .Name("Attendees")
            .Multiple(true)
            .DataTextField("TechnicianName")
            .DataValueField("TechnicianId")
            .DataColorField("Color")
            .DataSource(ds => ds.Read("GetTechnicians", "Ajax"));
    })
    .DataSource(d => d.Model(m =>
            {
                m.Id(f => f.MeetingID);
                m.RecurrenceId(f => f.RecurrenceID);
                m.Field(f => f.Title).DefaultValue("No title");
            })
            .Read("GetSchedule", "Ajax")
    )
    )
</div>

There is a ColumnWidth property, but it says in the notes right below the property that its only supported in the TimeLine view.

How can I make my column widths smaller?

Answer 1

I was able to figure this out. In case anyone else has this issue, I used this CSS code to change the size:

.k-scheduler-content .k-scheduler-table,
.k-scheduler-header .k-scheduler-table {
    width: @(TechScheduler.Infrastructure.Technicians.GetNumberOfTechnicians() * 100)px;
}

I have a method called GetNumberOfTechnicians() which basically returns the number of columns on my scheduler, then I'm multiplying that by the number of pixels I want each column to be (100px). It seems to be working well with all my tests so far!