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

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

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.


Attachment: syncfusion_882f2cb7.zip

5 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team December 18, 2018 05:50 AM UTC

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. 
<ejs-schedule #schedule height='650px' [timeScale]="timeScale" [(selectedDate)]="selectedDate" [eventSettings]="eventSettings" 
        <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> 
public timeScale: TimeScaleModel = { enable: false }; 

WL Woosung Lee December 18, 2018 06:49 AM UTC

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.

KK Karthigeyan Krishnamurthi Syncfusion Team December 18, 2018 12:12 PM UTC

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. 
public timeScale: TimeScaleModel = { enable: true, interval: 1440, slotCount: 1 }; 

WL Woosung Lee December 19, 2018 04:00 AM UTC

Hi Karthigeyan.

Thank you for your help.
I got the desired result through your help and css modifying.
I always appreciate your kindness.


KK Karthigeyan Krishnamurthi Syncfusion Team December 19, 2018 04:03 AM UTC

We are happy that our solution fulfilled your requirement. 

Live Chat Icon For mobile
Up arrow icon