Digital Experience Sitefinity

Change the time format of the date field when creating Events in Sitefinity

Default Blog Top Image
by Atanas Valchev Posted on September 01, 2015

When creating events, the time format is 24 hours. This can cause confusion for users in the US, since the preferred format there is AM/PM. 

To change the format, we need to create a new template for the DateTime field. It will not contain any markup changes, we will add some additional javascript in order to extend the default functionality and change the format of the time.

To do this, create a new ascx file and call it, for example, DateFieldExtended and paste the below template: 

<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
 
<sf:ResourceLinks id="resourcesLinks" runat="server" Theme="Default" UseEmbeddedThemes="true">
    <sf:ResourceFile Name="Styles/jQuery/jquery.ui.datepicker.css" />
    <sf:ResourceFile Name="Styles/jQuery/jquery.ui.slider.css" />
    <sf:ResourceFile Name="Styles/jQuery/jquery.ui.theme.sitefinity.css" />
</sf:ResourceLinks>
<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    <Templates>
        <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
            <sf:SitefinityLabel id="titleLabel_read" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />
            <sf:SitefinityLabel id="dateAsText" runat="server" WrapperTagName="div" HideIfNoText="false" DataFormat="MM/dd/yyyy hh:mm:ss " />
        </sf:ConditionalTemplate>
        <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
 
            <asp:Label ID="titleLabel_write" runat="server" CssClass="sfTxtLbl" AssociatedControlID="datePicker" />
            <asp:LinkButton ID="expandButton" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander"></asp:LinkButton>
            <asp:Panel ID="expandableTarget" runat="server" CssClass="sfFieldWrp">
                <asp:TextBox id="datePicker" runat="server" CausesValidation="false" AutoPostBack="false" CssClass="sfTxt" />
                <sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
                <sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
            </asp:Panel>
        </sf:ConditionalTemplate>
    </Templates>
</sf:ConditionalTemplateContainer>
<script>
    Telerik.Sitefinity.Web.UI.Fields.DateField.prototype._setDateTimeMode = function (dFormat, tFormat) {
        this._datePicker = jQuery("#" + this._datePickerId).datetimepicker({
            dateFormat: dFormat,
            hourGrid: tFormat,
            timeFormat: 'hh:mm TT',
            minuteGrid: 10,
            beforeShow: this._datePickerOnPopupOpeningDelegate,
            onClose: this._datePickerOnPopupClosingDelegate,
            showOn: "focus",
            ampm: true
        });
 
        if (this.get_value() == null && this._datePicker.val()) {
            this._value = GetUserPreferences().sitefinityToUniversalDate(new Date(this._datePicker.val()));
        }
 
        this._setDateTimeCommand = "setDate";
        if (this.get_IsUtcOffsetModeClient()) {
            this._datePicker.datepicker(this._setDateTimeCommand, this.get_value() ? this.get_value() : "");
        }
        else {
            this.set_value(this.get_valueRegardingProvidedUtcOffset());
        }
    }
    Telerik.Sitefinity.Web.UI.Fields.DateField.prototype._setTimeMode = function (tFormat) {
        this._datePicker = jQuery('#' + this._datePickerId).timepicker({
            hourGrid: 'hh:mm TT',
            timeFormat: 'hh:mm TT',
            minuteGrid: 10,
            beforeShow: this._datePickerOnPopupOpeningDelegate,
            onClose: this._datePickerOnPopupClosingDelegate,
            showOn: 'focus',
            ampm: true
        });
        this._setDateTimeCommand = 'setDate';
        if (this.get_IsUtcOffsetModeClient()) {
            this._datePicker.datepicker(this._setDateTimeCommand, this.get_value() ? this.get_value() : '');
        } else {
            this.set_value(this.get_valueRegardingProvidedUtcOffset());
        }
    }
</script>

 

When the template is in place, map it using the view map from Administration - Settings - Controls -ViewMap:

HostType: Telerik.Sitefinity.Web.UI.Fields.DateField, Telerik.Sitefinity

LayoutTemplatePath: ~/DateFieldExtended.ascx

After you save the changed, restart the application and the format will be changed:

TimeSelectorFormat

For the calendar popup on the frontend, you need to modify a different template. Create a new ascx called ViewEventDialogExtended.ascx and use the following template:

<%@ Control Language="C#" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
 
 
<sf:ResourceLinks ID="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css" Static="True" />
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_default_min.css" Static="true" />
</sf:ResourceLinks>
 
<div runat="server" id="windowWrapper" style="display: none;">
    <h2 class="sfcalendarEventPreviewTitle">
        <asp:HyperLink ID="titleLink" runat="server" CssClass="sfTxtLbl" />
    </h2>
    <div class="sfcalendarEventPreviewContent">
        <sf:SitefinityLabel runat="server" ID="startDateLabel" HideIfNoText="false" WrapperTagName="div" CssClass="sfcalendarEventPreviewStartDate" />
        <sf:SitefinityLabel runat="server" ID="startTimeLabel" HideIfNoText="false" WrapperTagName="div" CssClass="sfcalendarEventPreviewEndDate" />
        <sf:SitefinityLabel runat="server" ID="timeZoneDisplayNameLabel" HideIfNoText="false" WrapperTagName="div" CssClass="sfcalendarEventTimeZone" />
 
        <div class="sfcalendarEventPreviewEditLnkWrp" runat="server" id="editEventWrapper">
            <asp:HyperLink ID="editEventButton" runat="server" Text='<%$Resources:EventsResources, EditEvent%>' CssClass="sfcalendarEventPreviewEditLnk" />
        </div>
        <div runat="server" id="exportDiv" class="sfAddEventWrp">
            <sf:SitefinityLabel runat="server" HideIfNoText="false" Text="<%$Resources:EventsResources, AddEventTo %>" />
              
            <asp:HyperLink runat="server" ID="exportToGoogleLink" Text="<%$ Resources: EventsResources, GoogleEventExporterTitle %>" CssClass="sfgooglecalendar" Target="_blank" />, 
            <asp:HyperLink runat="server" ID="exportToOutlookLink" Text="<%$ Resources: EventsResources, OutlookEventExporterTitle %>" CssClass="sfoutlook" Target="_blank" />, 
            <asp:HyperLink runat="server" ID="exportToICalLink" Text="<%$ Resources: EventsResources, ICalEventExporterTitle %>" CssClass="sfical" Target="_blank" />
        </div>
    </div>
</div>
 
<script>
    $(document).ready(function () {
        Telerik.Sitefinity.Modules.Events.Web.UI.ViewEventDialog.prototype._rebind = function () {
            jQuery(this.get_titleLink()).html(this._appointment.get_subject());
            var startDate = this._appointment.get_start().format("dddd, MMMM d");
            jQuery(this.get_startDateLabel()).html(startDate);
 
            if (this._appointment.get_attributes().getAttribute("AllDay") != "True") {
                var startTime = this._appointment.get_start().format("hh:mm tt");
                jQuery(this.get_startTimeLabel()).html(startTime);
 
                var userTimeZone = GetUserPreferences().get_timeZoneDisplayName();
                jQuery(this.get_timeZoneDisplayNameLabel()).html(userTimeZone);
            }
            else {
                jQuery(this.get_startTimeLabel()).html("");
                jQuery(this.get_timeZoneDisplayNameLabel()).html("");
            }
 
            var timeZoneDisplayName = this._appointment.get_attributes().getAttribute("TimeZoneDisplayName");
            jQuery(this.get_timeZoneDisplayNameLabel()).html(timeZoneDisplayName);
 
            if (this.get_exportDiv()) {
                jQuery(this.get_exportDiv()).hide();
            }
 
            var that = this;
            jQuery.ajax({
                type: 'GET',
                url: this.get_radSchedulerServiceUrl() + String.format('event/{0}/?provider={1}', this._appointment.get_id(), this._providerName),
                contentType: "application/json",
                processData: false,
                beforeSend: function (xhr) {
                    if (that._uiCulture) {
                        xhr.setRequestHeader("SF_UI_CULTURE", that._uiCulture);
                    }
                },
                success: this._getEventSuccessDelegate
            });
 
            jQuery(this.get_titleLink()).attr("href", "#");
            var that = this;
            jQuery.ajax({
                type: 'GET',
                url: this.get_radSchedulerServiceUrl() + String.format('event/url/{0}/?provider={1}&hostUrlKeyPrefix={2}&detailsPageId={3}',
                    this._appointment.get_id(), this._providerName, this.get_hostUrlKeyPrefix(), this.get_detailsPageId()),
                contentType: "application/json",
                processData: false,
                beforeSend: function (xhr) {
                    if (that._uiCulture) {
                        xhr.setRequestHeader("SF_UI_CULTURE", that._uiCulture);
                    }
                },
                success: function (data) {
                    jQuery(that.get_titleLink()).attr("href", data);
                }
            });
        };
    });
</script>

After that map it like so:

HostType: Telerik.Sitefinity.Modules.Events.Web.UI.ViewEventDialog, Telerik.Sitefinity.ContentModules

LayoutTemplatePath: ~/ViewEventDialogExtended.ascx

After you save and restart the calendar popup will also be using AM/PM format:

CalendarPopupTimeFormat

 

Atanas Valchev
Atanas Valchev is a Tech Support Engineer at Telerik. He joined the Sitefinity Support team in March 2012.
More from the author
Prefooter Dots
Subscribe Icon

Latest Stories in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation