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

Month view items visually truncated

1 Answer 79 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Mark
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>()
    .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

1 Answer, 1 is accepted

Sort by
0
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:
Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Mark
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or