Appointment height proportionnal to duration

11 posts, 0 answers
  1. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 09 Jun 2009 Link to this post

    Hi,

    I need to show appointments with graphical height that is real-size according to appointment duration, not rounded to timeslots.

    How can I achieve this ?

    Thanks.
  2. Andreas Selling
    Andreas Selling avatar
    20 posts
    Member since:
    May 2009

    Posted 09 Jun 2009 Link to this post

    I 've also looked at this but I don't think it is possible in an easy way. One way I taught of was to have a div inside the appointment fill it with a color and then set top and bottom margin to show the duration. Outlook does it like that.

    The scheduler is now rendered with 1 row for each half hour so I think that is the only way.
    I've done weekly calendars with table and accuracy to 5 minutes but when it renders the webbrowser becomes very slow because of all the table code. So thats not a god idea which I think Telerik has tested.

    The best way I think if they could render it like the calendar in Mac OS/X. That would be really nice.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 10 Jun 2009 Link to this post

    I think the best way to achieve this is by drawing appointments in a div drawn with absolute coordinates (relative to scheduler position and size) and relative size according to appointment duration, with "overflow: hidden"... Because the other way is like you said : MinutesPerRow = 5 but too heavy HTML...
    Maybe a way to optimize should be to render scheduler parts client-side (like time slots) to avoid this...

    But this is very important that I render exact time appointments, even if I have to have a scheduler 3000px tall...

    If Telerik team has an idea :o)

    Thanks.

  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 10 Jun 2009 Link to this post

    Hello Damien,

    We don't have any other idea but the one you already considered - using the MinutesPerRow property.


    Peter
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 10 Jun 2009 Link to this post

    Hi Peter,

    I can achieve this if you rewrite your scheduler by using combination of table and div.

    Here is a small demo code for a week view :
    <html> 
        <head> 
            <title>TEST</title> 
            <style type="text/css"
    .day 
        height: 1440px; /* 60min*24hours */
        width: 100px; 
        display: block; 
        background: #DEDEDE; 
        position: relative; /* required for position */
     
    .appt 
        left: 0px; 
        width: 100px; 
        display: block; 
        overflow: hidden; 
     
        position: absolute; 
            </style> 
        </head> 
        <body> 
            <table> 
                <tr> 
                    <th>[hh:mm]</th> 
                    <th>Monday</th> 
                    <th>T</th> 
                    <th>W</th> 
                    <th>T</th> 
                    <th>F</th> 
                    <th>S</th> 
                    <th>S</th> 
                </tr> 
                <tr> 
                    <td> 
                        [hh:mm] 
                    </td> 
                    <td> 
                        <div class="day"
                            <div class="appt" style="top: 20px; height: 100px; background: #FF00FF;"
                                From : 00:20<br /> 
                                To : 02:00<br /> 
                                Subject : Monday is here 
                            </div> 
                        </div> 
                    </td> 
                    <td> 
                        <div class="day"
                            <div class="appt" style="top: 20px; height: 600px; background: #FFFF00;"
                                From : 00:20<br /> 
                                To : 10:20<br /> 
                                Subject : Tuesday warmup 
                            </div> 
                            <div class="appt" style="top: 630px; height: 40px; background: #00FF00;"
                                From : 10:30<br /> 
                                To : 11:10<br /> 
                                Subject : Tuesday is up 
                            </div> 
                        </div> 
                    </td> 
                    <td> 
                        <div class="day"
                            <div class="appt" style="top: 20px; height: 100px; background: #FF0000;"
                                From : 00:20<br /> 
                                To : 02:00<br /> 
                                Subject : Offline time 
                            </div> 
                            <div class="appt" style="top: 100px; height: 30px; background: #00FFFF;"
                                From : 01:40<br /> 
                                To : 02:10<br /> 
                                Subject : Overlap test time 
                            </div> 
                        </div> 
                    </td> 
                    <td> 
                        <div class="day"
                        </div> 
                    </td> 
                    <td> 
                        <div class="day"
                        </div> 
                    </td> 
                    <td> 
                        <div class="day"
                        </div> 
                    </td> 
                    <td> 
                        <div class="day"
                        </div> 
                    </td> 
                </tr> 
            </table> 
        </body> 
    </html> 

    Here is as start of how I think about this :

    Three layers : one for regular time slots, one for custom time slots, one for appointments

    Regular time slots layer : can be rendered as table, with actual behavior. Can be shown or not. It may be rendered client-side to avoid HTML overhead when "MinutesPerRow=1"

    Custom time slots layer : rendering behavior is like appointments, but they are readonly, and they can be used to set rules...

    Appointments layer : each day cell has known heigh, each appointment has known start and end time. With some math, you can compute top position, height and overlapping rules (overlapped appointments show one top of other, or side by side). Rendering can be templated.

    With all this, you can achieve a proportionnal time appointment rendering.

    <dream>Maybe in 2009 Q2 sp1 ? :o)</dream>

    Thanks.
  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 10 Jun 2009 Link to this post


    Thank you for your suggestion. I have forwarded it to our developement team to consider it.


    Best wishes,
    Peter
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. SKS
    SKS avatar
    32 posts
    Member since:
    Aug 2009

    Posted 21 Oct 2009 Link to this post

    hi
    is it possible to do this or not?
    my appointment start time is 9:45 to 12:15.but it shows from 9:00 to 1:00.
    is it possible to show exact time or not?

    thanks
  9. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 23 Oct 2009 Link to this post

    Hi Sudhir,

    We plan to provide this feature probably for Q1 2010.


    Greetings,
    Peter
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. SKS
    SKS avatar
    32 posts
    Member since:
    Aug 2009

    Posted 20 Jan 2010 Link to this post

    hi
    have you provided this functionality?
    i have set the minutes per row property of scheduler to 15,Row Height to 12px and TimeLabelRowSpan to 4.
    A 2 hour appointment from 6 PM to 8 PM is showing up as 6PM to 7:30 PM because the appointment is displayed based on its duration which is 2 hours.

    the problem is
    the scheduler doesnt consider that the Row Height and minutes per row have been changed and the appointment height should be appropriately adjusted.
    the scehduler renders a 2 hour appointment asuming that minutes per row is 30 and height of row is 25 px(which is default).therefore the appointment appears to be shorter than 2 hours(6PM to 7:30 PM)
    i hope this information is helpful for you to fix this issue

    thanks
  11. Gennadiy Pochtar
    Gennadiy Pochtar avatar
    1 posts
    Member since:
    Dec 2009

    Posted 06 Apr 2010 Link to this post

    Hi Peter,
    this issue is also very important for me.
    We've just bought 2010 Q1 and it looks like the feature is not there:-(
  12. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 08 Apr 2010 Link to this post

    Hello guys,

    We still haven't implemented this feature due to the unexpected complications that we discovered during our research on the matter. The earliest that we will be able to start working on this feature again is Q3 2010. Please, excuse us if this delay is causing you inconvenience.


    Greetings,
    Peter
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017