Formatting multi-line item in month view

4 posts, 1 answers
  1. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 20 Feb 2014 Link to this post

    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!

  2. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 24 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 25 Feb 2014 in reply to Alexander Popov Link to this post

    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
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 27 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready