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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Schedule links and timeline view per minutes?

Thread ID:

Created:

Updated:

Platform:

Replies:

151124 Jan 31,2020 12:00 PM UTC Feb 4,2020 12:26 PM UTC Angular - EJ 2 3
loading
Tags: Schedule
Cesar Smerling
Asked On January 31, 2020 12:00 PM UTC

Hello, we are testing the schedule component for our teams projects and we want to know is there is a way to create links (connection, depenencies) between events in the Timeline Resource View. The other possibility is to use the Gantt Chart but organize the task as resources like the scheduler in timelineview.

Another question is the Timeline header rows and scale could be in minutes, we need to show columns for each 5 minutes or 15 minutes. There is a way to zoom between this timescales?

Thanks

Vengatesh Maniraj [Syncfusion]
Replied On February 3, 2020 09:29 AM UTC

Hi Cesar, 

Greetings from Syncfusion Support. 

We have prepared a sample for both your queries and it can be viewed from the following link, 


Q1: When we click on the any event(appointments) it will automatically navigated to the Testing event using popupOpen event and for further reference kindly refer the below snippets, 

  public onPopupOpen(args: PopupOpenEventArgs): void { 
    if (args.type == "QuickInfo" && args.target.classList.contains('e-appointment')) { 
      args.cancel = true; 
      let events: any = this.scheduleObj.getCurrentViewEvents(); 
      for (let i = 0; i < events.length; i++) { 
        if (events[i].Subject == "Testing") { 
          let date = new Date(events[i].StartTime).getTime(); 
          let eventPosition = document.querySelector('[data-date="' + date + '"]'); 
          document.querySelector(".e-content-wrap").scrollLeft = (eventPosition as HTMLDivElement).offsetLeft; 
        } 
      } 
    } 
  } 

Q2: We have achieved your requirement using slider component, such that Scheduler can be zoom out / zoom in using slider adjustment by using the timescale property and for further reference kindly refer the below snippets, 

  public sliderChange(args: SliderChangeEventArgs): void { 
    if (this.scheduleObj.currentView === "TimelineMonth") { 
      if (args.value === 0) { 
        this.scheduleObj.setProperties({ headerRows: [{ option: "Date" }] }); 
      } else if (args.value === 10) { 
        this.scheduleObj.setProperties({ headerRows: [{ option: "Week" }, { option: "Date" }] }); 
      } else if (args.value === 20) { 
        this.scheduleObj.setProperties({ headerRows: [{ option: "Month" }, { option: "Week" }, { option: "Date" }] }); 
      } else if (args.value === 30) { 
        this.scheduleObj.setProperties({ headerRows: [{ option: "Year" }, { option: "Month" }, { option: "Week" }, { option: "Date" }] }); 
      } 
    } else { 
      if (args.value === 0) { 
        this.scheduleObj.setProperties({ timeScale: { enable: true, interval: 60, slotCount: 1 } }); 
      } else if (args.value === 10) { 
        this.scheduleObj.setProperties({ timeScale: { enable: true, interval: 60, slotCount: 2 } }); 
      } else if (args.value === 20) { 
        this.scheduleObj.setProperties({ timeScale: { enable: true, interval: 60, slotCount: 3 } }); 
      } else if (args.value === 30) { 
        this.scheduleObj.setProperties({ timeScale: { enable: true, interval: 60, slotCount: 4 } }); 
      } else if (args.value === 40) { 
        this.scheduleObj.setProperties({ timeScale: { enable: true, interval: 60, slotCount: 5 } }); 
      } else if (args.value === 50) { 
        this.scheduleObj.setProperties({ timeScale: { enable: true, interval: 60, slotCount: 6 } }); 
      } 
    } 
  } 

Kindly try the above sample, if you have any concerns please revert us back for further assistance.  

Regards,  
Vengatesh 


Cesar Smerling
Replied On February 3, 2020 11:19 AM UTC

Hi!

For Q1:
Didn't anwser my question, it's seems that I not explained well.

What we need is connect the events in the "diagram" like the gannt chart connections, so there is a data dependency between events. Another solution for us could be organize the Gantt Component grouping by resource (we need the resources on the left and the events on the right). It's seems that this is not posibble with the Scheduler and also the Gantt cannot be organized by resource.

For Q2:
It's closed, but this is not what we need, we need to change the timeline to another scale, the minumim is minutes, then hours, then days, then weeks, then months... etc, like a Gantt Chart. And the timeline is infinite or determined between two dates.

This are funtionallity of gantt but I saw them in schedulers of other branchs too. Im asking is this is posible to achieve in this Scheduler.

Thanks


Vengatesh Maniraj [Syncfusion]
Replied On February 4, 2020 12:26 PM UTC

Hi Cesar, 

Thanks for the update. 

For Q1: We have deeply checked the possibilities in source level but regret to let you know this is not feasible with our scheduler's current architecture. 

For Q2: Thanks for sharing more details. From the shared details, we have prepared the below sample like hour, days, week, month and year by making use of our headerRows property. Kindly check the below sample 

<e-header-rows> 
              <e-header-row option='Year'></e-header-row> 
                <e-header-row option='Month'> 
                    <ng-template #template let-data> 
                        <span [innerHTML]="getMonthDetails(data)"></span> 
                    </ng-template> 
                </e-header-row> 
                <e-header-row option='Week'> 
                    <ng-template #template let-data> 
                        <span [innerHTML]="getWeekDetails(data)"></span> 
                    </ng-template> 
                </e-header-row> 
                <e-header-row option='Date'></e-header-row> 
                <e-header-row option='Hour'></e-header-row> 
            </e-header-rows> 


Kindly check the above and revert us for further assistance. 

Regards, 
Vengatesh 


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