Increase height of appointment in RadScheduler

[Hrushikesh Mokashi]

Hi All,

I am using RadScheduler

How can increase the height of appointment  in month/week view.

Thanks

[Peter]

Hi Hrushikesh,

Here are a couple of kb articles that you might find helpful:

How to set the appointment's height to accomodate the entire subject's text in Month View

 How to tweak the appearance of RadScheduler's cells 


Regards,
Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[wan]

Hi ,

I want to increse height of appointment like picture named "increase_height.jpg". (remark: one day has only one appointment) 

And I try to do following the articles but it doesn't work for me. (following flie "radScheduler.jpg")
Please Help

    <style type="text/css">
     .rsMonthView .rsWrap
     {
        height: 50px !important;
     }
     .rsMonthView .rsDateWrap
     {
        height: 24px !important;
     }
     .rsMonthView .rsLastWrap
     {
        height: 24px !important;
     }
     .rsMonthView .rsApt
     {
        height: 48px !important;
     }
    .RadScheduler_Default
    {
      height:150px !important;
    }
    </style>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadScheduler1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />


 <telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px"
        Height="600px" SelectedView="MonthView" Skin="WebBlue"
        TimeZoneOffset="00:00:00" SelectedDate="2011-05-01"
        AllowDelete="False" AllowEdit="False" AllowInsert="False"
        DayView-UserSelectable="false" WeekView-UserSelectable="false"
        OverflowBehavior="Expand" VisibleAppointmentsPerDay="1"
        DataSourceID="SqlDataSource_Plan"
        DataKeyField="planNo"
        DataSubjectField="subject"
        DataStartField="startDate" DataEndField="endDate"
        DataDescriptionField="status" >
        <AdvancedForm Modal="true" />
    <TimelineView UserSelectable="false" />
    <TimeSlotContextMenuSettings EnableDefault="False" />
    <AppointmentContextMenuSettings EnableDefault="False" />
    <MonthView UserSelectable="False"></MonthView>
</telerik:RadScheduler>

Thanks

[Peter]

Hi wan,

Please, try the following settings and check if it gets you closer to your requirement.

<telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedView="MonthView"
       RowHeight="50px">
       <MonthView AdaptiveRowHeight="true" />
   </telerik:RadScheduler>

Greetings,
Peter
the Telerik team

[wan]

hi,
Thanks for your Response.
It's work !!!  ^___^

[Chandramouli]

Hello; I tried this option. It doesn't work for me. Atatched screenshot.

[Peter]

Hi,

What version of RadControls do you use? I just tested these settings and they worked as expected -
http://screencast.com/t/0bqDiqvJ7n5


Kind regards,
Peter
the Telerik team

[Tofan]

Can you fit your text to match your radscheduler appointment size? Text displayed from RadScheduler AppointmentTemplate part. My RadScheduler AppointmentTemplate part is:

                    <AppointmentTemplate>
                        <div style="font-style: italic; width: 100%">
                            Subiect:
                            <%# Eval("Subject") %></div>
                        <div style="font-style: italic; width: 100%; visibility: hidden">
                            Operatie:
                            <%# Eval("Operatie.Text")%></div>
                        <div style="font-style: italic; width: 100%; visibility: hidden">
                            Sala Operatie:
                            <%# Eval("Sala.Text")%></div>
                    </AppointmentTemplate>                                                                                                                                                                                                                                                                                                                                                                                                                       Please help.

[Plamen]

Hello,

Such behavior is supported in MonthView as for example it is described in this KB article. In the other views the appointment's height is calculated according to the RowHeight property that is set to RadScheduler.

Regards,
Plamen
Telerik

[David]

Plamen, I followed that example and it appears that this method works wonders if there is only one appointment in a given day. However in my application I have multiple appointments and the lowest appointment is getting cut in half, apparently by the same amount as the rsMonthView .rsAptContent min-height setting?

Help would be appreciated.

I am also trying to do the same thing in Timeline View, expanding the rows to display the full text of the appointment

  

<style type="text/css">
    .NowCss
    {
        border-left:2px solid red !important;
    }
    .Disabled{
        background: silver !important;
        cursor: not-allowed;
    }
    .Disabled.rsAptCreate{
        background: silver !important;
    }
    .CurrentDayStyle{
        background: yellow;
    }
    .CurrentTimeSlotStyle_Left{
        background: yellow;
        border-left:2px solid red !important;
    }
    .CurrentTimeSlotStyle_Right{
        background: yellow;
        border-right:2px solid red !important;
    }
    .RadScheduler .rsExportButton
    {
        position: absolute;
        bottom: 0;
        right: 0;
        border: 0;
        height: 24px;
        width: 24px;
        background: url('../Images/Outlook.gif') no-repeat center center;
    }

    .RadScheduler .rsAllDayRow
    {
        height: 26px;
    }
    .RadScheduler .rsAllDayRow .rsExportButton
    {
        display:none;
        right: 20px;
        height: 16px;
        width: 16px;
        background: url('../Images/smallOutlook.gif');
    }

    .rsApt .rsAptContent .custom-table
    {
        width: 100%;
        border-collapse: collapse;
    }
    .rsApt .rsAptContent .custom-table td
    {
        border: 0;
    }
    hr{
        margin:5px 5px !important;
        border-width: 1px 0 0 1px ;
        height: 1px;
    }

    /*set timeline view heights*/
    .RadScheduler .rsAllDayCell div.rsWrap
    {
        min-height:60px;
    }

    .RadScheduler .rsHoursTable th.rsSubHeaderHidden
    {
        min-height:60px;
    }

    .RadScheduler .rsHoursTable tr th.rsSubHeaderLast
    {
        min-height:62px;
    }

    .appointment-tooltip {
     padding: 10px;
     }

    .appointment-tooltip p {
        margin: 0 0 5px 0;
    }
    /* set Month Appoint height*/
    .RadScheduler .rsMonthView .rsWrap,
    .RadScheduler .rsMonthView .rsAptContent
    {
    min-height: 40px;
    }
    .RadScheduler .rsMonthView .rsWrap,
       .RadScheduler .rsMonthView .rsApt,
       .RadScheduler .rsMonthView .rsAptOut,
       .RadScheduler .rsMonthView .rsAptIn,
       .RadScheduler .rsMonthView .rsAptMid,
       .RadScheduler .rsMonthView .rsAptContent
       {
               position: static !important;
               height: auto !important;
       }
       .RadScheduler .rsMonthView .rsWrap
       {
               overflow: hidden;
               font-size: 0;
               line-height: 0;
       }
       .RadScheduler .rsMonthView .rsLastWrap
       {
               height: 16px !important;
       }
       .RadScheduler .rsMonthView .rsAptContent
       {
               position: relative !important;
               border-top: 0;
               border-bottom: 0;
               left: 0;
               top: 0;
       }
       * html .RadScheduler .rsMonthView .rsAptIn
       {
               border-width: 0 1px;
               top: 0;
           margin-left: -1px;
           margin-right: -1px;
       }
       * html .RadScheduler .rsMonthView .rsAptMid
       {
               top: 0;
               left: 1px;
               margin: 0 1px;
               border-width: 1px 0;
       }

</style>

 

[Plamen]

Hello David,

I have tested the described behavior and it worked correctly at my side in  MonthView. I am attaching a sample page that I tested at my side. Please review it and let me know if you have further questions.

As for your second question in Timeline view and in the other views the same behavior is not supported and the appointment's height is calculated according to the RowHeight property that is set to RadScheduler.

Hope this information will be helpful.

Regards,
Plamen
Telerik

 

 

[David]

No joy. I replaced my css with what was in the test.zip, updated all the settings to match, and still the day with multiple events cuts the last event in half.

My users might just have to live with it, at least it displays the title of all the events.

[Plamen]

Hi David,

Would you please elaborate a little bit what is the difference in your scenario and the page I attached so we could inspect it and be more helpful?

Regards,
Plamen
Telerik

 

 

[David]

One, I have alot more going on.... which makes it harder to trim things down. I cut all the irrelevant segments out of the page snippet listed below.

Two, I have a date with 5 appointments on it.


css:

.bitGreen{
    box-sizing: border-box;
    bottom: 0;
    right: 0;
    border: 0;
    height: 10px;
    width: 10px;
    background-image: url('../Images/bitGreen.png');
    overflow: hidden;
}

.bitRed{
    box-sizing: border-box;
    bottom: 0;
    right: 0;
    border: 0;
    height: 10px;
    width: 10px;
    background-image: url('../Images/bitRed.png');
    overflow: hidden;
}

.NowCss
{
    border-left:2px solid red !important;
}
.Disabled{
    background: silver !important;
    cursor: not-allowed;
}
.Disabled.rsAptCreate{
    background: silver !important;
}
.CurrentDayStyle{
    background: yellow;
}
.CurrentTimeSlotStyle_Left{
    background: yellow;
    border-left:2px solid red !important;
}
.CurrentTimeSlotStyle_Right{
    background: yellow;
    border-right:2px solid red !important;
}
.RadScheduler .rsExportButton
{
    position: absolute;
    bottom: 0;
    right: 0;
    border: 0;
    height: 24px;
    width: 24px;
    background: url('../Images/Outlook.gif') no-repeat center center;
}

        .RadScheduler .rsAllDayRow
{
    height: 26px;
}
.RadScheduler .rsAllDayRow .rsExportButton
{
    display:none;
    right: 20px;
    height: 16px;
    width: 16px;
    background: url('../Images/smallOutlook.gif');
}

.rsApt .rsAptContent .custom-table
{
    width: 100%;
    border-collapse: collapse;
}
.rsApt .rsAptContent .custom-table td
{
    border: 0;
}
hr{
    margin:5px 5px !important;
    border-width: 1px 0 0 1px ;
    height: 1px;
}

/*set timeline view heights*/
.RadScheduler .rsAllDayCell div.rsWrap
{
    min-height:60px;
}

.RadScheduler .rsHoursTable th.rsSubHeaderHidden
{
    min-height:60px;
}

.RadScheduler .rsHoursTable tr th.rsSubHeaderLast
{
    min-height:62px;
}

.appointment-tooltip {
 padding: 10px;
 }

.appointment-tooltip p {
    margin: 0 0 5px 0;
}

/* set Month Appoint height*/
.RadScheduler .rsMonthView .rsWrap,
.RadScheduler .rsMonthView .rsApt,
.RadScheduler .rsMonthView .rsAptOut,
.RadScheduler .rsMonthView .rsAptIn,
.RadScheduler .rsMonthView .rsAptMid,
.RadScheduler .rsMonthView .rsAptContent {
    position: static !important;
    height: auto !important;
}

.RadScheduler .rsMonthView .rsWrap {
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

.RadScheduler .rsMonthView .rsLastWrap {
    height: 16px !important;
}

.RadScheduler .rsMonthView .rsAptContent {
    position: relative !important;
    border-top: 0;
    border-bottom: 0;
    left: 0;
    top: 0;
}

* html .RadScheduler .rsMonthView .rsAptIn {
    border-width: 0 1px;
    top: 0;
    margin-left: -1px;
    margin-right: -1px;
}

* html .RadScheduler .rsMonthView .rsAptMid {
    top: 0;
    left: 1px;
    margin: 0 1px;
    border-width: 1px 0;
}

.RadScheduler .rsMonthView .rsWrap,
.RadScheduler .rsMonthView .rsAptContent {
    min-height: 25px;
}

aspx:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <link rel="stylesheet" type="text/css" href="../Styles/Scheduler.css" />

    <telerik:RadCodeBlock runat="server" ID="rCode">
        <script type="text/javascript">


         //   Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
            function beginRequestHandler(sender, args) {

                if (args.get_postBackElement().id.indexOf('rsFlights') != -1) {
                    hideActiveToolTip();
                }
            }


            function onClientAppointmentsPopulated() {
                markCurrentHour();
            }

            //mark current hour
            function markCurrentHour() {
                var currentHour = (new Date()).format("HH");
                var currentMinutes = (new Date()).format("mm");
                if (+currentHour == 0) {
                    currentHour = "12AM";
                }
                else if (+currentHour < 12) {
                    currentHour += "AM";
                }
                else if (+currentHour == 12) {
                    currentHour = "12PM";
                }
                else {
                    currentHour = (+currentHour - 12) + "PM";
                }
                var verticalHeaderTables = $(".rsVerticalHeaderTable"); // Each view type has a table (day view, week view, etc.)
                if (verticalHeaderTables) {
                    $.each(verticalHeaderTables, function (index, item) {
                        var hourCells = $(item).find(".rsAmPm"); // 24 cells with the hours (12AM, 1AM, 2AM, etc.)
                        $.each(hourCells, function (index, item) {
                            if (item.parentNode.innerText.trim() == currentHour) { // Current hour cell
                                if (+currentMinutes < 30) { // First 30 minutes cell
                                    item.parentNode.parentNode.style.borderBottomColor = "lightgreen";
                                    item.parentNode.parentNode.style.borderBottomWidth = "5px";
                                }
                                else { // Next 30 minutes cell
                                    $(item.parentNode.parentNode.parentNode).next().children()[0].style.borderBottomColor = "lightgreen";
                                    $(item.parentNode.parentNode.parentNode).next().children()[0].style.borderBottomWidth = "5px";
                                }
                            }
                        });
                    });
                }
            }

            function pageLoad()
            {
                var scheduler = $find('<%=rsFlights.ClientID %>');
                if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.TimelineView)
                {
                    //alert("The selected view is Timeline");
                    var $ = $telerik.$;
                    $(".rsWrap").each(function myfunction(index, elem) {
                        var $elem = $(elem),
                            newHeight = $elem.height();
                        $elem.find(".apptDiv").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";
                    });
                    var cusid_ele = document.getElementsByClassName('apptICS');
                    for (var i = 0; i < cusid_ele.length; ++i) {
                        var item = cusid_ele[i];
                        item.display = "none";
                    }
                }
            }

    </script>

</telerik:RadCodeBlock>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" Runat="Server">

                <telerik:RadScheduler ID="rsFlights"
                    runat="server" EnableRecurrenceSupport="False" EnableDescriptionField="true"
                    ProviderName="SchedulerData"
                    DataKeyField="intScheduleId" DataStartField="dtStart" DataEndField="dtEnd" DataSubjectField="strSubject"
                    EnableCustomTimeZones="true"
                    CustomAttributeNames="OwnerId,locName,toolTip"
                    Height="95%" RowHeight="25"  MinimumAppointmentHeight="60" StretchAppointments="true"
                    AllowDelete="False"
                    OnAppointmentDataBound="rsFlights_AppointmentDataBound"
                    OnTimeSlotCreated ="rsFlights_TimeSlotCreated"
                    onClientAppointmentsPopulated="onClientAppointmentsPopulated"
                    OnAppointmentCreated="rsFlights_AppointmentCreated"
                    OnAppointmentsPopulating="rsFlights_AppointmentsPopulating"
                    OnDataBound="rsFlights_DataBound" >

                    <ExportSettings FileName="AASF_Flight_Schedule" OpenInNewWindow="True">
                        <Pdf AllowPrinting="False" PageBottomMargin="1in" PageLeftMargin="1in" PageRightMargin="1in" PageTopMargin="1in"
                            StyleSheets="StyleSheet.css, ../Styles/Scheduler.css" />
                    </ExportSettings>

                    <AppointmentContextMenuSettings EnableDefault="true" />
                    <TimeSlotContextMenuSettings EnableDefault="true" />
                    <MonthView VisibleAppointmentsPerDay="10" AdaptiveRowHeight="false" />

                    <WeekView UserSelectable="true" EnableExactTimeRendering="true" DayStartTime="06:00:00" />

                    <DayView UserSelectable="true" ShowAllDayInsertArea="true" EnableExactTimeRendering="true" DayStartTime="06:00:00" />

                    <Localization AdvancedSubject="Mission" />

                    <TimelineView UserSelectable ="true" EnableExactTimeRendering="true" SlotDuration="02:00:00" ColumnHeaderDateFormat="d ddd<br/>HH00" TimeLabelSpan="1" ShowResourceHeaders="true" GroupBy="Location" GroupingDirection="Vertical" ShowInsertArea="true" NumberOfSlots="8" StartTime="08:00:00"/>

                     <AgendaView UserSelectable="True" ReadOnly="true" ResourceMarkerType="Bar" ShowResourceHeaders="true" ShowColumnHeaders="true" ShowDateHeaders="true" NumberOfDays="7" GroupBy="Date,Location" />

                    <AppointmentTemplate>
                        <div class="apptDiv" style="min-height:60px;">
                            <div style="min-height:40px;">
                            <asp:Label runat="server" ID="lblToolTip" />
                            <br />
                            </div>
                           <div class="apptICS" style="text-align: right;">
                                <asp:Button runat="server" ID="btnExportICS" CssClass="rsExportButton" ToolTip="Export to iCalendar"
                                     CommandName="Export" OnClientClick="Export(this, event); return false;" Style="cursor: pointer;cursor: context-menu;">
                                </asp:Button>
                           </div>
                        </div>
                    </AppointmentTemplate>

               </telerik:RadScheduler>


</asp:Content>

[Plamen]

Hi,

in case when you set the VisibleAppointmentsPerDay property to a greater number the following code is not necessary:

/*.RadScheduler .rsMonthView .rsLastWrap {
    height: 16px !important;
}*/

After I have commented it all the appointments were seen correctly with the code that you shared.

Hope this will help you solve the issue.


Regards,
Plamen
Telerik

 

 

[David]

That worked for the month view...

now on to getting the timeline view to show more than 25px worth of the event :(

[David]

Is there a resource that displays the entire css class for the radscheduler? I feel like a blind-man hunting for just the right item on a workbench....

[Plamen]

Hi David,

Unfortunately in timeline view the auto height of the appointments is not supported scenario. in such case we would rather recommend to set the RowHeight property of the control to a greater value.

As for your second question- RadScheduler is quite a big control with lots of CSS styles such resource would rather be quite confusing too. In such cases we recommend using browsers' developer tools to find out the exact CssClass needed.

Hope this information will be helpful.

Regards,
Plamen
Telerik

 

 

[David]

I have set the RowHeight property. I can't seem to set that property from the code-behind, which means the right size row-height in timeline puts the DayView running off the screen...

As to the CSS, I would recommend a trimmed down document that speaks just to the appointment area and the timeslot/timeheader.

 For instance, I need to shrink unused timeslots in order to make more room on the screen. This is as easy as setting the OnTimeSlotCreated is timeslot.appointments.count = 0 set width to shrunk, but the header stays normal width and gets mis-aligned.

Having a document that details the CSS for these two elements would be very helpful.

[Plamen]

Hi David,

You can set the RowHeight property of RadScheduler from the code behind as for example it is done in this on-line demo.

As for the second question: such adaptive behavior of the timeslots is only supported in MonthView by setting the AdaptiveRowHeight property as for example it is shown in this demo.

Hope this information will be helpful.

Regards,
Plamen
Telerik