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

Change Date Time on Calendar's Agenda View

2 Answers 111 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 05 Aug 2016, 09:39 PM

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 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 10 Aug 2016, 10:00 AM
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.
0
Peter Milchev
Telerik team
answered on 04 Apr 2018, 07:05 AM
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.
Tags
Scheduler
Asked by
Joshua
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or