Schedule links and timeline view per minutes?

[Cesar Smerling]

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]

Hi Cesar, 

Greetings from Syncfusion Support. 

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

Sample: https://stackblitz.com/edit/angular-ppbkar?file=app.component.ts 

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]

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]

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> 

Sample: https://stackblitz.com/edit/angular-fwv2ya?file=app.component.html 

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

UG: https://ej2.syncfusion.com/angular/documentation/schedule/header-rows/?no-cache=1 

Kindly check the above and revert us for further assistance. 

Regards, 

Vengatesh