We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Show full date or time by day

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

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team July 22, 2019 11:44 AM UTC

Dear Customer, 
 
Syncfusion greetings. 
 
Yes, template option can be used to customize the event as per your requirement. Kindly refer the below sample. 
 
<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 



UN Unknown Syncfusion Team August 11, 2019 09:11 AM UTC

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>





KK Karthigeyan Krishnamurthi Syncfusion Team August 12, 2019 07:04 AM UTC

Dear Customer, 
 
Thanks for the update. 
 
We have implemented our previous solution with your code example in the below sample. 
 
<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 


Loader.
Live Chat Icon For mobile
Up arrow icon