Landing page on today

[Razvan Nicolae]

Hello, I have to create chart with landing page on today:

I have the projectStartDate, I want to create an eventMarker on today(easy part) and center the chart to display this event in the middle of the page and have the same ammount of days between projectStartDate -- Today in Today -- projectEndDate

[Jonesherine Stephen]

Hi Razvan, 

 

We couldn’t understand your exact requirement from your query. We have prepared the sample and rendered event marker with today date and loaded today time line to the middle of the Gantt schedule dates (projectStartDate & projectEndDate).  

Sample: https://stackblitz.com/edit/ht9o8t-ine4fw 

If above the solution doesn’t meet your requirement, kindly share more information related to your query like screenshot/reference sample. It will be helpful for us to serve you better. 

 

Regards, 

Jone sherine P S 

[Razvan Nicolae]

Hi Jone,

Thank you! What you did there is great, almost complete.

Let me explain better, cause now I read what I have written before and it doesn't make any sense.

Let's say the startingDate is 1 January 2019, today's date is 30.10.2019, then the end date will be: today's date + 302 = 27.08.2020 the difference between today and 

startDate.

After these dates are set and calculated and the eventMarker is set in Today I need to move the scroll right so in the screen it will appear the eventMarker for today(first solution I thought about, but don't know how to implement) or to zoom out to see the startDate, today(centered), and endDate(again don't know how to implement)

Thank you,

Razvan

[Pooja Priya Krishna Moorthy]

Hi Razvan, 

 

We can set Gantt’s timeline start date and end date by using projectStartDate and projectEndDate properties. To set eventMarker in today, set eventMarkers.day as today date. By using scrollToDate method, you can scroll into any date you want. This method will moves the scroller to beginning of timeline. You can move this to center position by adjusting the date.  Please find the code snippet below, 

 

[index.ts] 

//........ 

 

//Start Date Calculation 

let pStartDate = new Date("02/14/2019"); 

let today = new Date(); 

today.setHours(0, 0, 0, 0); 

let diff = today.getTime() - pStartDate.getTime(); 

 

//End Date Calculation 

let pEndDate = new Date(today); 

pEndDate.setTime(pEndDate.getTime() + diff); 

 

//........ 

 

let gantt: Gantt = new Gantt({ 

 

//........ 

  projectStartDate: pStartDate, 

projectEndDate: pEndDate, 

eventMarkers: [ 

    { 

      day: today, 

      label: "Today" 

    } 

], 

dataBound: function(args) { 

   if (args.hasOwnProperty("isGanttCreated")) { 

      this.scrollToDate(today); 

  } 

} 

//........ 

 

 

We have prepared a sample with your requirement, please find the sample from below location. 

Sample - https://stackblitz.com/edit/ht9o8t-dwoqgs 

 

Please get back to us if you require further assistance on this. 

Regards, 

Pooja Priya K 

 

[Razvan Nicolae]

Hello, this is great!

It works fine, but can we also make the chart display the current day into the center of the chart, to have the same number of days before and after it at loading, and after that on different zooms to have a button ''Center to date"

[Saranya Dhayalan]

Hi Razvan, 

 

In Gantt while using scrollToDate method, by default scrolling date will be in left position. We can move the scroll bar, by changing its scrollLeft. Using dataOperation.getTaskLeft we can get the left value of any date. 

 

By subtracting half the scrollbar element’s width in today’s left, we can move the event marker to center position. 

 

We have prepared a sample with your requirement, please find the sample from below location.  

 

Sample - https://stackblitz.com/edit/ht9o8t-qomggm?file=index.ts 

 

Could you please check the above sample and get back to us if you need any further assistance on this? 

  

Regards, 

Saranya D