Month view items visually truncated

[Mark]

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>()
    .Name("diary")
    .Editable(false)
    .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>" +                 
                    "</div>")
    .Views(views =>
    {
        views.MonthView();
        views.WeekView();
        views.DayView();
    })
    .Timezone("Etc/UTC")
    .DataSource(d => d
        .ServerOperation(true)
        .Read(read => read.Action("GetAppointments", "Diary").Data("getAdditionalData"))
    )
    .Resources(resource =>
    {
        resource.Add(m => m.Title)
        .Title("Type")
        .DataTextField("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
        .DataBound("onSchedulerOpen")
    )
)

Thanks, Mark

[Vladimir Iliev]

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:

• Scheduler: Custom view example 

Regards,
Vladimir Iliev
Telerik