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

Month view items visually truncated

1 Answer 145 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Mark asked on 22 Sep 2015, 03:09 PM

Hi there,

I'm using a Kendo Scheduler pretty much out of the box.  In month view, if there are multiple items it stacks them vertically with a down arrow if there are too many - enough to fit 2 items on the screen.  However, if there is only 1 item it still shrinks it to the same smaller size and therefore truncates some of the content visually (see screenshot).  Is there anything I can do about this?

Here is my view scheduler declaration :-

@( Html.Kendo().Scheduler<Models.DiaryItemViewModel>()
    .Date(schedulerInitDate)   // sets the initial date for when it loads as today - in month view this takes you to current month, week view to current week etc.
    .StartTime(new DateTime(2015, 6, 1, 7, 00, 00))  // sets the start time in day view - 1/6/2015 is arbitrary here, could be any date!
    .EndTime(new DateTime(2015, 6, 1, 19, 00, 00))   // sets the end time in day view - 1/6/2015 is arbitrary here, could be any date!
    .EventTemplate("<div title='#= title #'>" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'><span style='font-weight: bold;'>#= title #</span></div>" +
                        "#if(Confirmed) {#<div class='k-event-template' style='width:100%; margin-bottom:6px;'><img src='/Content/images/icons/calendar.png' /> Appointment Confirmed</div>#" +
                        "} else {#<div class='k-event-template' style='width:100%; margin-bottom:6px;'><img src='/Content/images/icons/calendar-grey.png' /> Appointment Unconfirmed</div>#}#" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'>#= Reference #</div>" +
                        "<div class='k-event-template' style='width:100%; margin-bottom:6px;'><span style='font-weight: bold;'>Visit By:</span> #= VisitBy #</div>" +                 
    .Views(views =>
    .DataSource(d => d
        .Read(read => read.Action("GetAppointments", "Diary").Data("getAdditionalData"))
    .Resources(resource =>
        resource.Add(m => m.Title)
        .BindTo(new[] { 
                        new { text = "General", value = "General", color = "#ffffff" } ,
                        new { text = "Legionella", value = "Legionella", color = "#000000" } ,
                        new { text = "Survey", value = "Survey", color = "#cccccc" } 
    .Events(e => e

Thanks, Mark

1 Answer, 1 is accepted

Sort by
Vladimir Iliev
Telerik team
answered on 24 Sep 2015, 10:10 AM
Hello Mark,

Please note that the "month" and "timeline" views have "eventHeight" option which is responsible for the event height and currently does not support dynamic event height depending on the available space. The only possible solution in this case would be creating custom view which to extend the "month" view and override the methods responsible for positioning and rendering the events. For example of creating custom view you can check the following demo in our CodeLibrary:
Vladimir Iliev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question