Overnight view highlight Midnight

6 posts, 0 answers
  1. Jon
    Jon avatar
    73 posts
    Member since:
    Oct 2013

    Posted 20 Jun 2018 Link to this post

    Hi, the latest feature to allow an overnight view is great and I have used it for shift working from 7PM to 7AM. 

    Is there a way to highlight the midnight timeline and make it bolder/ different colour.. similar to the attached visual (albeit with a straighter line :) )

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 22 Jun 2018 Link to this post

    Hi Jon,

    The Scheduler does not expose a configuration option that would allow you to force it displaying the midnight line. Nevertheless, you could apply a CSS rule in order to make the border of the respective cell more visible. Here you could find a small sample demonstrating that. You will notice that the CSS used in this case is the following:

    #scheduler > table > tbody > tr:nth-child(2) > td:nth-child(1) > div > table > tbody > tr:nth-child(11) > th,
    #scheduler > table > tbody > tr:nth-child(2) > td:nth-child(1) > div > table > tbody > tr:nth-child(36) > th,
    #scheduler > table > tbody > tr:nth-child(2) > td:nth-child(1) > div > table > tbody > tr:nth-child(61) > th,
    #scheduler > table > tbody > tr:nth-child(2) > td:nth-child(2) > div > table > tbody > tr:nth-child(11) > td,
    #scheduler > table > tbody > tr:nth-child(2) > td:nth-child(2) > div > table > tbody > tr:nth-child(36) > td,
    #scheduler > table > tbody > tr:nth-child(2) > td:nth-child(2) > div > table > tbody > tr:nth-child(61) > td {
      border-bottom: 3px solid red;
    }

    Note, that you will need to adjust the above rule according to your specific scenario.

    Regards,

    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jon
    Jon avatar
    73 posts
    Member since:
    Oct 2013

    Posted 22 Jun 2018 in reply to Veselin Tsvetanov Link to this post

    Veselin, 

    Many thanks.... unfortunately, I use the scheduler in a very dynamic way. I have two dropdowns where a team and team member(s) can be selected. So dependant on these selections there would be a need for one or more lines to be highlighted. I suppose I could determine what the max number would be necessary and create the css rules. As I understand if it can't find it, it will be ignored.

    I would recommend that for a future update some form of configuration is allowed as I'm sure it would be very useful.

    Many Thanks

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 22 Jun 2018 Link to this post

    Hi Jon,

    Applying the CSS rule when the Scheduler view is dependent on dynamic values may not be the best approach. As you have suggested, you could define the CSS rule for the maximum number of resources that could be loaded. Also, you are right that the CSS selectors, which do not find the corresponding elements on the page would be simply disregarded.

    As per the feature, I would suggest you to log your idea as on our Feedback portal. I believe, that many developers would find it useful. Based on the support it receives from the community, we will decide on whether to proceed with its implementation.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jon
    Jon avatar
    73 posts
    Member since:
    Oct 2013

    Posted 28 Jun 2018 in reply to Veselin Tsvetanov Link to this post

    Hi Veselin,

    I have everything working regarding the highlighting. I've gone the route of creating a style rule for 10 recourses as this is the max members per team. Unfortunately this has all been in vein as the overnight view only seems to work in timeline views... Day, Week, WorkWeek which are the views I wanted to use will not render the events. The Demo example only has Timeline and TimelineWeek showing.

    Can I get my events rendered on the Day, Week and WorkWeek Views?

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 02 Jul 2018 Link to this post

    Hello Jon,

    I am afraid that currently, only the Timeline view of the Scheduler offers the overnight functionality discussed. The Day, Week and WorkWeek views would always render their layout from 00:00 to 00:00. You could still render overnight events on those views. Nevertheless, such event will be split in two different days on the view.

    Providing the overnight functionality for the day, week and workWeek views may be a helpful feature of the widget. Therefore, I would suggest you to log that idea on the Feedback portal too.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 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