Change Height of Appointment "Node"

[Brian]

If you go to the RadScheduler Web Service demo on the Telerik website, one of the things that you will be able to observe is the Height of each appointment "node" that appears within the scheduler. Obviously, the Height of each appointment represents the start time / end time of the specific appointment. For example, the Height of the Strategic Planning appointment for Monday the 30th visually depicts a start time / end time of 10am - 11am. Compare this, for example, to the Height of the all day appointments listed for Thursday the 2nd.

In the upper-right of the scheduler are the different views (Day, Week, Month, Timeline). This demo defaults to Week view. If you click Timeline to change the view, notice that the start and end times are no longer included in this view, and all of the appointment "nodes" have the same Height.

Is there a way to specify or change the Height of the appointment nodes that appear in Timeline view?

Thank you,
Steven

[Plamen]

Hi Steven,

 
In TimeLine-View you can set different width to the appointments depending on what is their duration as it is shown in the ExactTimeRendering demo. 

If you want to increase the height of all appointments you can change the RowHeight property of RadScheduler.

Hope this will be helpful.

Kind regards,
Plamen Zdravkov
the Telerik team

[Brian]

Plamen
That information helps.

Can I submit a "feature request"? It would be nice if the Timeline view provided the ability to allow *individual* appointment nodes to grow and shrink, based on the amount of text stored with each node. Easier said than done, I'm sure, but it would be nice.

Thanks for your reply,
Steven

[Plamen]

Hello Steven,

Thank you for the suggestion. I'll forward it to our development team for further consideration.

Regards,

Plamen Zdravkov
the Telerik team

[Petulka77]

Any update on that?

Only solution what I have and which works for me is by CSS settings:

 .RadScheduler .rsTimelineView .rsWrap, .RadScheduler .rsTimelineView .rsApt, .RadScheduler .rsTimelineView .rsAptOut, .RadScheduler .rsTimelineView .rsAptIn, .RadScheduler .rsTimelineView .rsAptMid, .RadScheduler .rsTimelineView .rsAptContent
        {
            position: static !important;
            height: auto !important;
        }

Declarative/programmatic adjustment would be helpful.

[Plamen]

Hi,

 
One possible programmatic workaround for setting the appointments autoheight in timeLineView is to use Appointment Template with a div as below and the following javascript:

<AppointmentTemplate>
            <div class="newDiv">
...
 </div>

<script type="text/javascript">
       function pageLoad() {
           var $ = $telerik.$;
           $(".rsWrap").each(function myfunction(index, elem) {
               var $elem = $(elem),
                   newHeight = $elem.height();
               $elem.find(".newDiv").each(function myfunction(ind, apt) {
                   var $apt = $(apt);

                   if ($apt.height() > newHeight) {
                       newHeight = $apt.height();
                   }
                   $apt.parents(".rsApt").height($apt.height());
               })
               $elem.height(newHeight);
           })

           //if you use group by resources in vertical direction
           var rsVerticalHeaderTableTh = $(".rsVerticalHeaderTable th");
           var rsAllDayTableTr = $(".rsAllDayTable tr");
           rsAllDayTableTr.each(function(index, elem) {
               var h = $(elem).height() - 1;
               rsVerticalHeaderTableTh[index].style.height = h + "px";
           });
       }
   </script>

Hope this will be helpful.

Regards,
Plamen
the Telerik team

[Mike]

I also recommend for this functionality to be included.

[Plamen]

Hi Mike,

 
Thank you for the suggestion -I will forward it to our developers team for consideration.

Regards,
Plamen
Telerik