Customise Schedule Timeline Component (remove time and reduce the day's width)

[Woosung Lee]

Hi support

My team is verifying functionality before purchasing SyncFusion' lisence.

I downloaded the demo and now I'm having trouble implementing what I want.

We have to describe the schedule as a capture in the form of a timeline.

But the Sinkfusion's timeline view displays time unconditionally. And the area is too wide, too.

I attach my sample source. Can you help me?

I have to use a SyncFusion to create a capture-like view.

https://imgur.com/a/Gg9MlCg

Attachment: syncfusion_882f2cb7.zip

[Karthigeyan Krishnamurthi]

Hi Woosung, 

 

Thank you for contacting Syncfusion support. 

 

Time duration can be removed using timeScale option and for the same we have prepared the below sample for your reference. 

https://stackblitz.com/edit/angular-kwerxk?file=timeline.html 

https://ej2.syncfusion.com/angular/documentation/api/schedule#timescale 

 

<ejs-schedule #schedule height='650px' [timeScale]="timeScale" [(selectedDate)]="selectedDate" [eventSettings]="eventSettings" 

     [(currentView)]="currentView"> 

      <e-views> 

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

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

        <e-view displayName='2 Weeks' option='TimelineWeek' [interval]="weekInterval"></e-view> 

        <e-view displayName='TimelineMonth' option='TimelineDay' [interval]=31></e-view> 

      </e-views> 

    </ejs-schedule> 

 

public timeScale: TimeScaleModel = { enable: false }; 

 

Regards, 

Karthigeyan 

[Woosung Lee]

Thank you for your reply..

Bu. even with "timeScale", I can't see the view I want.

I just want to erase the time items from the timeline view.

Using the "timeScale" eliminates the meaning of time in the bar of the schedule.

[Karthigeyan Krishnamurthi]

Hi Woosung, 

 

Thanks for your update. 

 

We have checked the provided image and suspect that your requirement is to display the events in their respective time but without displaying the time duration in Schedule. In the below sample we have used time scale to achieve your requirement. 

https://stackblitz.com/edit/angular-ssca9o-anetlj?file=timeline.html 

 

public timeScale: TimeScaleModel = { enable: true, interval: 1440, slotCount: 1 }; 

 

 

Regards, 

Karthigeyan 

 

 

[Woosung Lee]

Hi Karthigeyan.

Thank you for your help.

I got the desired result through your help and css modifying.

I always appreciate your kindness.

Regards

[Karthigeyan Krishnamurthi]

Hi Woosung, 

 

We are happy that our solution fulfilled your requirement. 

 

Regards, 

Karthigeyan