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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Show full date or time by day

Thread ID:

Created:

Updated:

Platform:

Replies:

146094 Jul 19,2019 09:40 AM UTC Aug 12,2019 07:04 AM UTC Angular - EJ 2 3
loading
Tags: Schedule
Unknown
Asked On July 19, 2019 09:40 AM UTC

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 [Syncfusion]
Replied On 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 


Unknown
Replied On 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>




Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon