Scheduler Custom view

6 posts, 2 answers
  1. Shahinez
    Shahinez avatar
    8 posts
    Member since:
    Jul 2017

    Posted 07 Aug 2017 Link to this post

    Hello, 

    I'm trying to implement kendo ui Scheduler . 
    But I realised that when I have many events in the same day I could see only two events and the others are collapsed on "three points".
    When I click on the point it redirect me to Day view to see all the planned events.

    I really want to remove the Day view and show only Month and Agenda Views.
    It is possible to modify the code so when I click on the "three points" it redirect me to the Agenda view or could the Month view be resized dynamically depending on the number of the events ? 
    I tried to modify the CSS of the schudeler , but I didn't like the result 

      

    <style>
            .k-scheduler-table td, .k-scheduler-table th
            {
              height: 15.5em;
            }
            .k-scheduler-monthview .k-scheduler-table td
            {
              height: 15.5em;
            }
     
     .k-scheduler-timecolumn{
        visibility:collapse !important;
        width:0 !important;
    .k-more-events > span {
      margin-top: 0em;
      height: 20px;
    }
     
    div.k-more-events {
      font-size: 12px;
      height: 20px;
    }
    .k-scheduler-table td, .k-scheduler-table th {
         height: 1em;
         padding: .334em .5em;
         font-size: 100%;
    }
    </style>    

     

    Thank you in advance, 

    Best. 

  2. Answer
    Tyler
    Tyler avatar
    19 posts
    Member since:
    Jul 2017

    Posted 07 Aug 2017 in reply to Shahinez Link to this post

    This css will modify the height:

    .k-scheduler-monthview .k-scheduler-table td{

    height: whatever;

    }

    Doing it dynamically..... that would be tough, considering you don't want cells of all various heights in the month view... you want a consistent square.

    In the dataBound event, you can look through each day (by getting the start of the scheduler view) and do occurrencesInRange and check how many events are in that day, get the maximum, and then set the height based on the maximum...

    Or, you can control where those little '...' buttons go in the dataBound:

    dataBound: function(e){
        $('div.k-more-events.k-button').each(function(){
        //console.log(this);
          $(this).click(function(){
          e.sender.view('agenda'); 
          });
        });
      }

    which will take you to the agenda view like in This dojo

    Otherwise, you will probably be looking at constructing a custom Month view, in which Kendo has documentation on creating custom views (it won't be as simple as the above options, specifically the second option I mentioned is the quickest).

  3. Shahinez
    Shahinez avatar
    8 posts
    Member since:
    Jul 2017

    Posted 07 Aug 2017 in reply to Tyler Link to this post

    Thank you Tyler .

    I tried to apply the dataBound as first solution . 

  4. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2053 posts

    Posted 09 Aug 2017 Link to this post

    Hello Shahinez,

    Currently we do not have a solution for resizing dynamically the Scheduler in order for all events to be displayed in the month view, so setting the cells height, as Tyler demonstrated, is the only viable approach for displaying more events at the moment.

    Regards,
    Ivan Danchev
    Progress Telerik
    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.
  5. Dynamic
    Dynamic avatar
    5 posts
    Member since:
    Dec 2005

    Posted 27 Jun 2019 in reply to Ivan Danchev Link to this post

    Hello Ivan,

    I also want to increase height of individual Row in schedular as per data and i think it's basic functionality of any control to manage height automatically as per data.  Move user to different view has more click for user to see whole day data. it should be any alternative way for it.

    kindly add this functionality in next release.

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2053 posts

    Posted 01 Jul 2019 Link to this post

    Hello,

    We agree this functionality would be nice to have and there is a feature request about it logged in the Feedback Portal, however, the community hasn't expressed a lot of interest in it so far. We would suggest voting for it, as this increases its chances of getting approved for implementation.

    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top