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

Increase height of appointment in RadScheduler

19 Answers 915 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Hrushikesh Mokashi
Top achievements
Rank 1
Hrushikesh Mokashi asked on 17 Oct 2008, 08:49 AM
Hi All,

I am using RadScheduler

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

Thanks

19 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 17 Oct 2008, 12:13 PM
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.
0
wan
Top achievements
Rank 1
answered on 08 May 2011, 03:21 PM
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
0
Peter
Telerik team
answered on 11 May 2011, 10:30 AM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
wan
Top achievements
Rank 1
answered on 11 May 2011, 05:40 PM
hi,
Thanks for your Response.
It's work !!!  ^___^
0
Chandramouli
Top achievements
Rank 1
answered on 02 Mar 2012, 11:46 PM
Hello; I tried this option. It doesn't work for me. Atatched screenshot.
0
Peter
Telerik team
answered on 05 Mar 2012, 04:45 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tofan
Top achievements
Rank 1
answered on 07 Feb 2014, 12:36 PM
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.

0
Plamen
Telerik team
answered on 12 Feb 2014, 11:54 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
David
Top achievements
Rank 1
answered on 21 Oct 2014, 03:59 PM
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>

 


0
Plamen
Telerik team
answered on 22 Oct 2014, 10:30 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
David
Top achievements
Rank 1
answered on 22 Oct 2014, 12:51 PM
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.
0
Plamen
Telerik team
answered on 22 Oct 2014, 01:06 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
David
Top achievements
Rank 1
answered on 22 Oct 2014, 01:52 PM
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>
0
Plamen
Telerik team
answered on 27 Oct 2014, 01:02 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
David
Top achievements
Rank 1
answered on 28 Oct 2014, 03:37 PM
That worked for the month view...

now on to getting the timeline view to show more than 25px worth of the event :(
0
David
Top achievements
Rank 1
answered on 28 Oct 2014, 06:41 PM
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....

0
Plamen
Telerik team
answered on 31 Oct 2014, 08:49 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
David
Top achievements
Rank 1
answered on 31 Oct 2014, 11:40 AM
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.
0
Plamen
Telerik team
answered on 04 Nov 2014, 11:37 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Scheduler
Asked by
Hrushikesh Mokashi
Top achievements
Rank 1
Answers by
Peter
Telerik team
wan
Top achievements
Rank 1
Chandramouli
Top achievements
Rank 1
Tofan
Top achievements
Rank 1
Plamen
Telerik team
David
Top achievements
Rank 1
Share this question
or