Show full date or time by day

[Unknown]

Hello,

is there a possibility to display in schedule:

1. Full date

2. Time for current day or date range

I want to display it in this place:

Because for now when there are displayed only time - it is kind of incorrect if we are standing not on day when event starts. In this case my full date is 2019.01.01 22:00 - 9999.12.31 23:59 but in every day in this place I see only time 22:00-23:59.

You can see same thing in this sample: https://stackblitz.com/edit/angular-es6mba?file=data.ts

[Karthigeyan Krishnamurthi]

Dear Customer, 

 

Syncfusion greetings. 

 

Yes, template option can be used to customize the event as per your requirement. Kindly refer the below sample. 

https://stackblitz.com/edit/angular-syznus-bd8xju?file=app.component.html 

 

<ejs-schedule width='100%' height='650px' [selectedDate]="selectedDate" [eventSettings]="eventSettings"> 

    <ng-template #eventSettingsTemplate let-data> 

      <div class='template-wrap'> 

        <div class="subject">{{data.Subject}}</div> 

        <div class="time">Time: {{getTimeString(data.StartTime)}} -<br> {{getTimeString(data.EndTime)}}</div> 

        </div> 

    </ng-template> 

    </ejs-schedule> 

 

 

Regards, 

Karthi 

[Unknown]

Maybe you can give an example how can I add this template to my code?

I want to see everything like I saw previous instead of time formatting (as I was written before I want to see full date and time).

My .html file looks like this:

<div class="control-section">

<div class="col-lg-12 content-wrapper">

<ejs-schedule #gpSchedule width='99%' cssClass='timeline-resource-grouping' [height]="height"

[selectedDate]="selectedDate" [group]="group" [eventSettings]="eventSettings" [locale]="locale"

(actionBegin)="onActionBegin($event)" (dataBound)="onDataBound($event)" (navigating)="onNavigating($event)"

[readonly]="true" [firstDayOfWeek]="firstDayOfWeek">

<e-resources>

<e-resource [field]='Settings.ParentSettings.FieldName' [dataSource]='parentDataSource'

[allowMultiple]='allowMultiple' name='Parent' [textField]='Settings.ParentSettings.TextField'

[idField]='Settings.ParentSettings.IdField' [query]="parentQuery">

</e-resource>

<e-resource [field]='Settings.ChildSettings.FieldName' [dataSource]='childDataSource'

[allowMultiple]='allowMultiple' name='Child' [textField]='Settings.ChildSettings.TextField'

[idField]='Settings.ChildSettings.IdField' [groupIDField]='Settings.ChildSettings.GroupIdField'

[query]="childQuery">

</e-resource>

</e-resources>

<e-views>

<e-view option="TimelineDay" displayName="TimelineDay"></e-view>

<e-view option="TimelineWeek" displayName="TimelineWeek"></e-view>

<e-view option="TimelineWorkWeek" displayName="TimelineWorkWeek"></e-view>

<e-view option="TimelineMonth" displayName="TimelineMonth"></e-view>

</e-views>

</ejs-schedule>

</div>

</div>

[Karthigeyan Krishnamurthi]

Dear Customer, 

 

Thanks for the update. 

 

We have implemented our previous solution with your code example in the below sample. 

https://stackblitz.com/edit/angular-3vv5f6-chl3ck?file=app.component.html 

 

<ejs-schedule #scheduleObj width='99%' cssClass='timeline-resource-grouping' [height]="height" [selectedDate]="selectedDate" 

     [group]="group" [eventSettings]="eventSettings" (actionBegin)="onActionBegin($event)" (dataBound)="onDataBound($event)" 

     (navigating)="onNavigating($event)" [firstDayOfWeek]="firstDayOfWeek"> 

      <e-resources> 

        <e-resource field='ProjectId' title='Choose Project' [dataSource]='projectDataSource' [allowMultiple]='allowMultiple' name='Projects' 

         textField='text' idField='id' colorField='color'> 

        </e-resource> 

        <e-resource field='TaskId' title='Category' [dataSource]='categoryDataSource' [allowMultiple]='allowMultiple' name='Categories' 

         textField='text' idField='id' groupIDField='groupId' colorField='color'> 

        </e-resource> 

      </e-resources> 

      <e-views> 

        <e-view option="TimelineDay"></e-view> 

        <e-view option="TimelineWeek"></e-view> 

        <e-view option="TimelineWorkWeek"></e-view> 

        <e-view option="TimelineMonth"></e-view> 

        <e-view option="Agenda"></e-view> 

      </e-views> 

      <ng-template #eventSettingsTemplate let-data> 

        <div class='template-wrap'> 

          <div class="subject">{{data.Subject}}</div> 

          <div class="time">Time: {{getTimeString(data.StartTime)}} - {{getTimeString(data.EndTime)}}</div> 

        </div> 

      </ng-template> 

    </ejs-schedule> 

 

Regards, 

Karthi