Formatting multi-line item in month view

6 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
    1433 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. 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
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1433 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!
  5. Nandakumar
    Nandakumar avatar
    2 posts
    Member since:
    Nov 2015

    Posted 14 Mar in reply to Alexander Popov Link to this post

    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.

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    469 posts

    Posted 16 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top