Time Scale Am/PM Adding

[Kavishka Subashana]

I want to have AM/PM for all of these. Like 12 AM here.

Thank you

[Ravikumar Venkatesan]

Hi Kavishka,

Greetings from Syncfusion support.

We have validated your requirement “Time Scale Am/PM Adding” at our end. You can achieve your requirement with help of Schedule TimeScale MajorSlotTemplateId API as shown in the below code snippet. We have prepared a sample for your reference.

[Default.aspx]

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <div>

        <ej:Schedule ClientIDMode="Static" runat="server" ID="Schedule1" Width="100%" Height="525px" CurrentDate="5/2/2014" Orientation="Horizontal">

            <TimeScale MajorSlotTemplateId="#majorTemplate" />

            <AppointmentSettings Id="Id" Subject="Subject" AllDay="AllDay" StartTime="StartTime" EndTime="EndTime" Description="Description" Recurrence="Recurrence" RecurrenceRule="RecurrenceRule" />

        </ej:Schedule>

    </div>

 

</asp:Content>

 

<asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">

    <script id="majorTemplate" type="text/x-jsrender">

        <span>{{:~hour(date)}}</span>

        <span class="e-horizontaltimespandiv">{{:~period(date)}}</span>

    </script>

    <script type="text/javascript">

        function _hourFormat(date) {

            var dFormat = ej.format(new Date(date), "hh");

            return dFormat;

        }

        function _periodFormat(date) {

            var dFormat = ej.format(new Date(date), "tt");

            return dFormat;

        }

        $.views.helpers({ hour: _hourFormat, period: _periodFormat });

    </script>

</asp:Content>

 

<asp:Content ID="styleSection" ContentPlaceHolderID="StyleSection" runat="server">

    <style type="text/css">

        .e-schedule .e-horizontaltimespandiv {

            margin-left: 4px !important;

        }

    </style>

</asp:Content>

 

Kindly try the shared sample and let us know if you need any further assistance.

UG: https://help.syncfusion.com/aspnet/schedule/templates#timescale-templates

Regards,

Ravikumar Venkatesan

Attachment: ejwebformsschedulewithtimescalecustomization_4fbc289c.zip

[Kavishka Subashana]

Great, That worked. But came up with small issue like this.

The alignment is going little bit off and its increasing when we go more right side

[Kavishka Subashana]

Can I have the customized codes for the vertical calendar also. For the same AM/PM issue?

Thank you.

[Ravikumar Venkatesan]

Hi Kavishka,

Q1: The alignment is going little bit off and its increasing when we go more right side

We have validated your reported problem at our end. But, we are unable to reproduce the problem at our end and it works as expected as shown in the below screenshot. Kindly try the shared sample and if you still facing the same problem share the below requested details to provide a solution earlier.

• Reproduce the problem in our shared sample or
• Share an issue reproducing sample if possible.

Output:

Q2: Can I have the customized codes for the vertical calendar also. For the same AM/PM issue?

You can achieve your requirement with the same Schedule TimeScale MajorSlotTemplateId API as shown in the below code snippet.

[Default.aspx]

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <div>

        <ej:Schedule ClientIDMode="Static" runat="server" ID="Schedule1" CellHeight="120px" CellWidth="160px" CurrentDate="5/2/2014" Views="Week,WorkWeek,Month,Agenda" CurrentView="Week" Orientation="Horizontal">

            <TimeScale MajorSlotTemplateId="#majorTemplate" />

        </ej:Schedule>

    </div>

</asp:Content>

 

<asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">

    <script id="majorTemplate" type="text/x-jsrender">

        <span>{{:~hour(date)}}</span>

        <span>{{:~period(date)}}</span>

    </script>

 

    <script type="text/javascript">

        function _hourFormat(date) {

            var dFormat = ej.format(new Date(date), "hh");

            return dFormat;

        }

        function _periodFormat(date) {

            var dFormat = ej.format(new Date(date), "tt");

            return dFormat;

        }

        $.views.helpers({ hour: _hourFormat, period: _periodFormat });

    </script>

</asp:Content>

 

<asp:Content ID="styleSection" ContentPlaceHolderID="StyleSection" runat="server">

    <style type="text/css">

        .e-schedule .e-horizontaltimespan {

            width: 60px !important;

        }

    </style>

</asp:Content>

Output:

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

Attachment: ejwebformsscheduleverticalviewswithtimescaletemplate_3d35bd8f.zip