This is a migrated thread and some comments may be shown as answers.

Appointment height proportionnal to duration

10 Answers 143 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Dédé
Top achievements
Rank 1
Dédé asked on 09 Jun 2009, 02:42 PM
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.

10 Answers, 1 is accepted

Sort by
0
Andreas Selling
Top achievements
Rank 2
answered on 10 Jun 2009, 01:39 AM
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.
0
Dédé
Top achievements
Rank 1
answered on 10 Jun 2009, 07:33 AM
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.

0
Peter
Telerik team
answered on 10 Jun 2009, 11:55 AM
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.
0
Dédé
Top achievements
Rank 1
answered on 10 Jun 2009, 12:20 PM
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.
0
Peter
Telerik team
answered on 10 Jun 2009, 03:06 PM

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.
0
SKS
Top achievements
Rank 1
answered on 22 Oct 2009, 04:04 AM
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
0
Peter
Telerik team
answered on 23 Oct 2009, 02:45 PM
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.
0
SKS
Top achievements
Rank 1
answered on 20 Jan 2010, 06:33 PM
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
0
Gennadiy Pochtar
Top achievements
Rank 1
answered on 06 Apr 2010, 03:53 PM
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:-(
0
Peter
Telerik team
answered on 08 Apr 2010, 01:12 PM
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.
Tags
Scheduler
Asked by
Dédé
Top achievements
Rank 1
Answers by
Andreas Selling
Top achievements
Rank 2
Dédé
Top achievements
Rank 1
Peter
Telerik team
SKS
Top achievements
Rank 1
Gennadiy Pochtar
Top achievements
Rank 1
Share this question
or