Custom date format in Scheduler with Agenda View

1 posts, 0 answers
  1. Peter
    Peter avatar
    13 posts
    Member since:
    May 2016

    Posted 03 Apr 2018 Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.NET AJAX 2017 R3

    Supported Browsers and Platforms

    all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    RadScheduler, .NET 4.0/4.5 C#

    PROJECT DESCRIPTION 

    The Agenda View does not support built-in removing of the end time of an appointment and using a custom format. Nevertheless, this project demonstrates how the HTML elements containing the dates can be modified as per the project requirements. 



    <telerik:RadScriptManager runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Scheduler.ClientRendering.ClientRendering.js" />
        </Scripts>
    </telerik:RadScriptManager>

    <script>
        function pageLoadHandler() {
            var scheduler = $find('<%= RadScheduler1.ClientID %>');
            var format = "HH:mm:ss";
            var showEndDate = false;
            formatAgendaViewDates(scheduler, format, showEndDate)
        }
     
        function formatAgendaViewDates(scheduler, format, showEndDate) {
            var $ = $telerik.$;
            var $sch = $(scheduler.get_element())
            var $rows = $sch.find('.rsAgendaRow');
            var format = format || "HH:mm";
     
            $rows.each(function myfunction(ind, row) {
                var $cell = $(row).find('td:first');
                var renderer = scheduler.get_activeModel()._getRenderer();
                var apt = scheduler.getAppointmentFromDomElement(row);
                var part = renderer._getModelAppointmentParts(apt, scheduler.get_activeModel())[0];
     
                // change the format here
                var startText = renderer._getFormattedDateText(part.start, format),
                    endText = renderer._getFormattedDateText(part.end, format),
                    formatString = renderer._getTimeCellFormatString(part);
                if (!showEndDate && formatString == "{0} - {1}") {
                    // remove end time
                    formatString = "{0}";
                }
     
                $cell.html(String.format(formatString, startText, endText));
            })
        }
     
        Sys.Application.add_load(pageLoadHandler);
    </script>



Back to Top