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

Landing page on today

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

5 Replies

JS Jonesherine Stephen Syncfusion Team October 29, 2019 12:52 PM UTC

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).  
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. 
Jone sherine P S 

RN Razvan Nicolae October 30, 2019 10:31 AM UTC

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 
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,

PP Pooja Priya Krishna Moorthy Syncfusion Team October 31, 2019 03:58 PM UTC

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, 
//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")) { 
We have prepared a sample with your requirement, please find the sample from below location. 
Please get back to us if you require further assistance on this. 
Pooja Priya K 

RN Razvan Nicolae November 1, 2019 09:05 AM UTC

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"

SD Saranya Dhayalan Syncfusion Team November 4, 2019 11:13 AM UTC

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.  
Could you please check the above sample and get back to us if you need any further assistance on this? 
Saranya D 

Live Chat Icon For mobile
Up arrow icon