Change Date Time on Calendar's Agenda View

3 posts, 0 answers
  1. Joshua
    Joshua avatar
    1 posts
    Member since:
    Aug 2016

    Posted 05 Aug 2016 Link to this post

    Hi,

     

    I am trying to change the Time column on the Agenda View to be in 24 hour format instead of showing AM/PM.  I saw a lot of support in other areas of the Scheduler but not so much on the Agenda View, and the only area of Agenda view I saw that can be modified date wise was the header.

    http://demos.telerik.com/aspnet-ajax/scheduler/examples/agenda-view/defaultcs.aspx

    Thanks in advance,

    Josh D.

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    464 posts

    Posted 10 Aug 2016 Link to this post

    Hello Josh,

    I am afraid that currently there is no built-in option to change the time format in Agenda view.

    Excuse us for the inconvenience caused.

    Regards,
    Peter Milchev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. Peter Milchev
    Admin
    Peter Milchev avatar
    464 posts

    Posted 04 Apr 2018 Link to this post

    Hello,

    The customization of the date time format can be achieved with DOM manipulation as demonstrated in the Custom date format in Scheduler with Agenda View Code Library project. 

    <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>

    Regards,
    Peter Milchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top