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

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

Posted on September 01, 2015 0 Comments

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.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

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