Formatting multi-line item in month view

[Bil]

Hi guys,

I'm trying to coax the scheduler into displaying an entry in month view to have 4 lines of text. Essentially I'm looking to show one entry for each day with 4 lines of stats so something like this for each entry:

10 Calls
105 Customers
32 Call backs
5 Resolutions

I have a custom view model implementing ISchedlerEvent and just setting the title to an HTML string but there's probably a better way to do this. The biggest problem I have is I've set the event height value in the month view but if I set it to anything higher than say 30 the entire event for that day just turns into 3 dots.

Here's my markup for the scheduler:

        @(Html.Kendo().Scheduler<MonthlyStatsViewModel>()
            .Name("scheduler")
            .Views(views =>
            {
                views.MonthView(x => x.EventHeight(60));
            })
            .Editable(false)
            .BindTo(Model)
        )

If I don't include the EventHeight value it works but only shows the default event (25px high) which is enough to only show 1 line of the title.

Any ideas on trying to get what I'm looking for here (I can add a mockup if you need it)

Thanks!

[Alexander Popov]

Hi,

You can achieve this behavior in the following manner:

1. Use a Template to populate the rows and use a smaller font if necessary. For example:   

   <script id="evenTemplate" type="text/x-kendo-tmpl">
       <div class="smallText">
           #=Calls# Calls </br>
           #=Customers# Customers</br>
           #=CallsBack# Call backs</br>
           #=Resolutions# Resolutions
       </div>
   </script>
   <style>
       .smallText {
           font-size: 9px;
       }
   </style>

2. Override the MonthView's default slot height:

   .k-scheduler-monthview .k-scheduler-table td {
       height:200px !important;
   }

3. Once you've done that you can also adjust the events height without them turning into a button: 

   .Views(views =>
   {
       views.DayView();
       views.WorkWeekView();
       views.WeekView();
       views.MonthView(v => v.EventTemplateId("evenTemplate").EventHeight(50).Selected(true));
       views.AgendaView();
   })

Regards,
Alexander Popov
Telerik

[Bil]

Alexander,

Thanks, that seems to get me what I need. It seems I need to set the CSS to be double the height of the event (for month view). Is there any way to set it so the calendar cell is the same size as the event markup (i.e. the event fills the entire cell in month view). I'm only using one event per day and just want 4 lines to show for each day in the month view.

Thanks

[Alexander Popov]

Hello again,

It is possible to specify the event's height using CSS, however that will make two events in a single day to overlap each other (see screenshot).

Regards,
Alexander Popov
Telerik

[Nandakumar]

Hi Popov,

 

I have a similar requirement, where in I need to display around four rows for a day in month view and the remaining will be covered by (...) button, but instead of the "..." button I need to display the "More events...". So just looking for the options to play with the

monthview -> daytemplate field. Pls let me know if we have any examples.

[Veselin Tsvetanov]

Hello Nandakumar,

As far as I can understand, you need to display 4 events (rows) for each day in a Scheduler month view. In addition you would like to customize the more events button with a custom text. If this is your case, you could display more events by making the day time-slot higher:

html .k-scheduler-monthview .k-hidden,
html .k-scheduler-monthview .k-scheduler-table td {
    height: 160px;
}

While the button content could be overwritten in the Scheduler DataBound event:

dataBound: function() {
    $('.k-more-events span').text('More events...');
},

You will also have to apply styles to that button, according to your specific requirements:

div.k-more-events span {
  font-size: 0.6em;
  line-height: 2;
}

Here you will find a simple Dojo implementing the above.

Regards,
Veselin Tsvetanov
Telerik by Progress