RadScheduler Appointment is rendered with wrong end date

[Jan]

Hello,

I have problem with Appointment rendering. I am using Web service rendering in ASP.NET MVC. Since I have changed MinutesPerRow="15" and RowHeight="12px" the appointments are rendered with wrong end date. I was debugging  OnClientAppointmentDataBound and the appointment is initialized well, but the data shown in calendar are wrong.
(ex. data in eventArgs.get_appointment()  are 9:00 -> 13:15 but they are rendered as 9:00 -> 10:45).
Do You have any idea what is wrong?

Thank You Jan

Sample code is below:

   <script type="text/javascript">
 function OnClientAppointmentEditing(sender, eventArgs) {
            //cancel showing inline edit form - it will be redirected to Appointment/Edit
            eventArgs.set_cancel(true);
        }

        function OnClientAppointmentDoubleClick(sender, eventArgs) {
            var apt = eventArgs.get_appointment();
            var appType = apt.get_attributes().getAttribute("appointmentType");

            if (appType == "Appointment")
                document.location = '<%= HttpContext.Current.CreateUrl("/Appointment/Edit/") %>' + apt._id;
            if (appType == "Email")
                document.location = '<%= HttpContext.Current.CreateUrl("/Email/Edit/") %>' + apt._id;
            if (appType == "Call")
                document.location = '<%= HttpContext.Current.CreateUrl("/Call/Edit/") %>' + apt._id;
            if (appType == "Task")
                document.location = '<%= HttpContext.Current.CreateUrl("/Task/Edit/") %>' + apt._id;
        }

        function OnClientTimeSlotClick(sender, eventArgs) {

            //Redirect to appointment create
            document.location = '<%= HttpContext.Current.CreateUrl("/Appointment/Create?") %>StartTime=' + eventArgs.get_time().format('dd/MM/yyyy H:mm');
        }


        function OnClientAppointmentDataBound(sender, eventArgs) {
            var apt = eventArgs.get_appointment();
            var allowEditValue = apt.get_attributes().getAttribute("allowEdit");
            var assignedTo = apt.get_attributes().getAttribute("assignedTo");
            var description = apt.get_attributes().getAttribute("description");
            var appType = apt.get_attributes().getAttribute("appointmentType");
            var appTypeLocalized = apt.get_attributes().getAttribute("appointmentTypeLocalized");
            var cssClass = '';

            if (appType != undefined) {
                cssClass = 'AppointmentType_' + appType + ' ';
            }
            if (allowEditValue == "false") {
                apt.set_allowEdit(false);
                cssClasscssClass = cssClass + 'AppEditDisabled';
            }


            var tooltip = apt.get_subject();


            tooltip = appTypeLocalized + ': ' + tooltip + (assignedTo != undefined ? ' (' + assignedTo + ')&#13;' : '');

            if (description != undefined) {
                tooltip += description;
            }
            apt.set_toolTip(tooltip);

            apt.set_cssClass(cssClass);
        }
</script>
<telerik:RadCodeBlock runat="server" ID="InitialScriptCodeBlock1">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptLocalization="true"
            EnableScriptGlobalization="true" />
        <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <ClientEvents />
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Office2007"
             BackImageUrl="~/Content/Images/loadingAnimation.gif" BackgroundPosition="Center" />

        <telerik:RadAjaxPanel ID="Panel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadScheduler runat="server" ID="RadScheduler1" AllowDelete="false" AllowEdit="true" RowHeight="12px"
                AllowInsert="false" MinutesPerRow="15" StartEditingInAdvancedForm="false" StartInsertingInAdvancedForm="false"
                OnClientAppointmentDoubleClick="OnClientAppointmentDoubleClick" OnClientTimeSlotClick="OnClientTimeSlotClick"
                OnClientAppointmentDeleting="OnClientAppointmentDeleting" OnClientAppointmentDataBound="OnClientAppointmentDataBound"
                Height="900px" OnClientAppointmentEditing="OnClientAppointmentEditing" OnClientAppointmentContextMenuItemClicked="appointmentContextMenuItemClicked"
                SelectedView="WeekView" DayHeaderDateFormat="dddd, dd MMMM yyyy" HoursPanelTimeFormat="HH:mm">
                <AppointmentContextMenus>
                    <%--The appointment context menu interaction is handled on the client--%>
                    <%--See the JavaScript code above--%>
                    <telerik:RadSchedulerContextMenu runat="server" ID="SchedulerAppointmentContextMenu">
                        <Items>
                            <telerik:RadMenuItem Text="Export iCalendar" Value="GenerateVCal" ImageUrl="~/Content/Images/Icons/iCalendar16.png" />
                            <telerik:RadMenuItem IsSeparator="True" />
                            <telerik:RadMenuItem Text="Delete" Value="CommandDelete" ImageUrl="~/Content/Images/DataEditing/Delete.gif"
                                Enabled="True" />
                        </Items>
                    </telerik:RadSchedulerContextMenu>
                </AppointmentContextMenus>
                <TimelineView GroupBy="Calendar" GroupingDirection="Vertical" />
                <AdvancedForm Enabled="false" EnableResourceEditing="false" />
                <WebServiceSettings Path="~/Models/SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />
            </telerik:RadScheduler>
        </telerik:RadAjaxPanel>
    </telerik:RadCodeBlock>

       

[Jan]

Hello,

I just found the solution. It was caused by RowHeight. It should be set to 16px at least. How can I change RowHeight to value less than 16px?

Thanks Jan

[Peter]

Hello Jan,

RadScheduler does not support values for RowHeight less than 16px. Please, excuse us for this limitation of the control.


Regards,
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.

[Allen]

Please refer to the attached screen print.  Is there a way to make scheduler smaller, so it can fit in one page without using the scrollbar.  I have already set RowHight = 16px.

[Peter]

Hello Allen,

Unfortunately, there is a limit to how small RadScheduler can get. If you have already set RowHeight = 16px, I am afraid you cannot go any further than this.

All the best,
Peter
the Telerik team