React Scheduler: Ellipsis in Week View? (See Month View)

4 posts, 1 answers
  1. Brent
    Brent avatar
    6 posts
    Member since:
    Mar 2021

    Posted 02 Apr Link to this post

    There is a feature in Month View where a day with many appointments will display an ellipsis ("...") at the bottom, indicating to the user that the day in question has more events scheduled than are listed on the screen.  Does Week View have a feature similar to this?

    My users will sometimes display busy schedules with many appointments listed, and I would rather display "..." than the first character of each appointment as the component tries to mash all the appointments into the same box.

    This thread references the feature I'm referring to in Month View:

    https://www.telerik.com/forums/react-scheduler-render-more-events-in-month-view

    As does this GitHub Issue:

    https://github.com/telerik/kendo-react/issues/642

  2. Krissy
    Admin
    Krissy avatar
    23 posts

    Posted 05 Apr Link to this post

    Hi Brent,

    The items in the WeekView are visualized very differently than those in the MonthView, since they are ordered according the time of the day they are scheduled for and their duration, since events may overlap in different time slots. Could you please provide an image that serves as an example of what is desired to be achieved, so that I am able to understand fully the requirements for this case?

    Regards,
    Krissy
    Progress Telerik

    Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

  3. Brent
    Brent avatar
    6 posts
    Member since:
    Mar 2021

    Posted 07 Apr in reply to Krissy Link to this post

    Thanks for looking into this!  I've attached some screenshots.

    One is a picture from Month View which is very similar to what I hope to achieve in Week View.  I've circled the ellipsis which indicates there are more appointments on that day.  Double-clicking it directs the user to Day View which has more space to list all the appointments.

    Another is a screenshot of a proof-of-concept app I'm putting together to demonstrate to the others here what the Scheduler component can do.  This screen lists a cluster of appointments on early Wednesday afternoon.  It's hard to read event titles because each block only gets a tiny amount of horizontal real estate.

    Another screenshot is one I edited to explain what I'd like to be able to do in Week View.  The component has detected many simultaneous appointments and condensed them into a "+3 others..." box, which, in my head, will navigate the user to Day View when double-clicked.  These are not precise requirements!  I just want some way to de-clutter dense clusters of appointments to enhance readability.

  4. Answer
    Kiril
    Admin
    Kiril avatar
    25 posts

    Posted 08 Apr Link to this post

    Hi Brent,

    Thank you for providing the screenshots. I spoke with the lead developer of the Scheduler and we do indeed find this implementation interesting.

    We are currently working on providing more information, in regards to the internal Scheduler's state, to the developers using it. We will provide the ability to get the information regarding which items in a slot are next to each other, to allow the developer to customize their rendering and achieve the condensed view of "+3 others". This can be expected in the next release. 

    Keep in mind, however, that the functionality you want to achieve will not be out-of-the-box, and the custom rendering of items will have to be handled by you.

    I've opened a public issue regarding this case and we will keep track of its progress there: 
    https://github.com/telerik/kendo-react/issues/906 

    Regards,
    Kiril
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top