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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Landing page on today

Thread ID:

Created:

Updated:

Platform:

Replies:

148625 Oct 28,2019 12:57 PM UTC Nov 4,2019 11:13 AM UTC JavaScript - EJ 2 5
loading
Tags: Gantt Chart
Razvan Nicolae
Asked On October 28, 2019 12:57 PM UTC

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 [Syncfusion]
Replied On 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. 
 
Regards, 
Jone sherine P S 


Razvan Nicolae
Replied On 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 
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 [Syncfusion]
Replied On 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, 
 
[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. 
 
Please get back to us if you require further assistance on this. 
Regards, 
Pooja Priya K 
 


Razvan Nicolae
Replied On 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"

Saranya Dhayalan [Syncfusion]
Replied On 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? 
  
Regards, 
Saranya D 


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