Show Week Number in Gantt Component

Question

Hello,I kindly wanted to ask 2 things about the gantt component:1) how could you show in header the week number by setting it in the array of ZoomTimelineSettings?2) how could you show in calendar for start/end date in grid and dialog to add and edit tasks?Thank you very muchBest regards,Matteo

Udhayakumar Anand · Accepted Answer

Hi Matteomessmer,Query 1:
I set weekStartDay because monday is our week start day, the issue is that the
1st week of 2024 is counted as 0 We have
carefully reviewed your query and have come up with a different logic that can
help you achieve the desired result.To display
the correct week count, we suggest making a modification to the formatter
method. By implementing the following logic, you will be able to ensure that
the week count starts from 1 in the year 2024:

Code
  Snippet:
  /*index.js*/
  const timelineSettings = {
      weekStartDay: 1,
      topTier: {
        unit: 'Week',
        formatter: (date) => {
          let weekCount = getWeekNumber(date);
          return 'WeekCount' + '' + weekCount;
        },
      },
      bottomTier: {
        unit: 'Day',
      },
    };
  function getWeekNumber(date) {
      const newDate = new Date(date);
      newDate.setDate(newDate.getDate() + 3 - ((newDate.getDay() + 6) % 7));
      const week1 = new Date(newDate.getFullYear(), 0, 4);
      const diff = newDate - week1;
      const weekNumber = Math.floor(diff / (7 * 24 * 60 * 60 * 1000)) + 1;
      return weekNumber;
    }

Sample Link
: https://stackblitz.com/edit/react-nkgeba-3fbs9y?file=index.jsWe believe that by using this updated logic, you will be
able to resolve the issue you encountered. If you have any further questions or
need additional assistance, please don't hesitate to reach out to us.Regards,Udhayakumar

Udhayakumar Anand · Answer

Hi matteomessmerYou can find
the query response below

Query 1:
  how could you
  show in header the week number by setting it in the array of
  ZoomTimelineSettings?

We have thoroughly reviewed your query and are glad to
  assist you in achieving your requirement.
   
  To display the week number in the header, you can make use
  of the formatter
  option inside the timelineSettings. By specifying a custom formatter
  function, you can manipulate the content displayed in the header.

Code Snippet:
     /*index.js*/
    const timelineSettings = {
            topTier: {
                unit: 'Week',
                formatter: (date) => {
                  const currentDate = date;
                  const startOfYear = new Date(currentDate.getFullYear(), 0, 1);
                  const millisecondsSinceStartOfYear = currentDate - startOfYear;
                  const weekCount = Math.ceil(millisecondsSinceStartOfYear / 604800000);
                  return 'WeekCount' + '' + weekCount;
              },
            },
            bottomTier: {
                unit: 'Day',
            },
        };

Sample Link : https://stackblitz.com/edit/react-nkgeba?file=index.js

Query 2:
  how could you show in calendar for start/end date in grid
  and dialog to add and edit tasks?

We have reviewed your query, At default on adding and
  editing the task the calendar will appear, could you please provide us with
  the following information for us to validate further

Exact requirement that
       you’re trying to achieve
   Are you trying to use
       your custom calendar in start date and end date field

Sample Link : https://ej2.syncfusion.com/react/demos/#/bootstrap5/gantt/editing

Regards,Udhayakumar

matteomessmer · Answer

Query 1: thank you, when I set weekStartDay to 1, in 2024 the first weekcount is 0, but it should be 1.

Query 2: I didn't explain it clearly, what I want is to do this (https://ej2.syncfusion.com/react/documentation/calendar/how-to/render-the-calendar-with-week-numbers) for the calendars in the Gantt component (grid and dialogs), is there a way to achieve it?

Thank you

Best regards,

Matteo

Udhayakumar Anand · Answer

MatteomessmerYou can find the query response below

Query 1:
  when I set weekStartDay to 1

After carefully reviewing your message, we would like to
  inform you that the weekStartDay
  property is intended to denote the starting day of the week, rather than the
  week count. Its purpose is to determine which day the week begins on in the
  calendar representation.
   
  To validate further could you please provide us the
  following information for us to validate further

Could you modify the
       given sample and replicate the issue which will be helpful for us to
       validate further
   Video demonstration of
       the issue
  
  Sample Link : https://stackblitz.com/edit/react-nkgeba-vhpz34?file=index.js

Query 2:

After reviewing your query we have recognized this as a
  bug. Thank you for taking
  the time to report this issue and helping us improve our product. At
  Syncfusion, we are committed to fixing all validated defects (subject to
  technological feasibility and Product Development Life Cycle) and will
  include the fix in our upcoming patch release which is expected to be rolled
  out on
  July 5th
   , 2023. You can track its status from the feedback link
  provided below.
   
  FeedBack  : https://www.syncfusion.com/feedback/44536/gantt-chart-cant-use-edit-template-in-start-date-column
   
  Note: To view the above feedback, kindly login
  into your account. 
   
  Disclaimer: Inclusion of this
  solution in the weekly release may change due to other factors including
  but not limited to QA checks and works reprioritization

matteomessmer · Answer

Hi Udhayakumar,Query 1: I set weekStartDay because monday is our week start day, the issue is that the 1st week of 2024 is counted as 0: https://stackblitz.com/edit/react-nkgeba-rzqxjs?file=index.jsQuery 2: okThank you for your support.Best regards,Matteo

Udhayakumar Anand · Answer

MatteoThank you for your patience.We are glad to announce that fix for the issue “Can't
use edit template in start date column” has been rolled out in
our patch release (v22.1.36). So please upgrade to our latest
version to resolve the problem.Release Notes: https://ej2.syncfusion.com/documentation/release-notes/22.1.36/?type=all#gantt-chartSample Link : https://stackblitz.com/edit/react-e2fbkz-yyd7un?file=index.jsPlease contact us if you require any further assistance.RegardsUdhayakumar

matteomessmer · Answer

Hi,Thanks, I don't think it fixes my problem anyway.What I'm trying to do, but I'm not succeeding, is to show the week number next to it in the calendar that appears when I edit a date. This should be feasible from the calendar component documentation (https://ej2.syncfusion.com/react/documentation/calendar/how-to/render-the-calendar-with-week-numbers), but I do not know how to do it with gantt.Do you think it is possible to do?Thank you Best regards,

Udhayakumar Anand · Answer

MatteoWe have carefully reviewed your query and understand that
you are trying to display week numbers in the calendar that appears when
editing a date in the Gantt component.We are pleased to inform you that achieving this requirement
is possible by setting the weekNumber
property to true. This will enable the display of week numbers in the calendar.To assist you further, we have prepared a modified sample
and included a code snippet below, which demonstrates how to enable week
numbers in the Gantt component:

Code Snippet:
  write: (args) => {
        dropdownlistObj = new Calendar({
          weekNumber: true,
        });
        dropdownlistObj.appendTo(elem);
      },

Sample Link : https://stackblitz.com/edit/react-e2fbkz-wcpbs1?file=index.jsRegards,Udhayakumar

matteomessmer · Answer

Hi Udhayakumar,Thank you. Do you think this is the only way to achieve this?It would be far more user friendly if the calendar were in a popup, instead of having it inside the cell.When I click on the date, the row get higher, while the column stays the same size, hence the calendar isn't fully visible. If one could access the properties of the calendar component in the popup it would be far more convenient.Thank you very much again.Best regards,Matteo

Udhayakumar Anand · Answer

MatteomessmerWe are currently exploring alternative ways to achieve the
desired functionality without expanding the row. Our team is actively working
on this and will provide you with further details within two business days, by
July 18th, 2023.Until then we appreciate your patience and understandingRegards,Udhayakumar

Udhayakumar Anand · Answer

MatteomessmerWhile using the calendar component directly in the cell does
occupy row space and expands the row, Gantt provides a built-in feature called datePickerEdit
that displays the calendar in a popup by default. This can offer a more
user-friendly experience.However, we need to understand your exact requirement that
you’re trying to achieve. To assist us in validating and understanding your
needs, could you kindly provide us with the following information:
 Exact requirement that
     you’re trying to achieve
 Why you need to use
     calendar component instead of datePickerEdit
 If you are determined to
     utilize the calendar component, how should it be displayed in the row and
     what are the distinctions compared to the default edit?
Sample link : https://stackblitz.com/edit/react-xkjbuj?file=index.jsUG LINK : https://ej2.syncfusion.com/react/documentation/gantt/managing-tasks/task-bar-editing#cell-edit-type-and-its-paramsRegards,Udhayakumar

matteomessmer · Answer

Hi Udhayakumar,I'm trying to display the week number in the date picker similarly as shown in the screenshots:Without week numbers:With week numbers:Perhaps I have created confusion by saying I use the calendar component, I don't actually need it, I had only seen that this functionality already existed in that component.I am perfectly happy with the datepicker if it can be customised in this way.Do you think it is possible to achieve this?Thank youBest regards,Matteo

Ajithkumar Gopalakrishnan · Answer

Hi Matteomessmer,

We have considered the reported issue “Work week not assignable to date picker
edit in gantt” as a bug. You can track the progress of
the resolution by visiting the feedback link provided below:Feedback link: https://www.syncfusion.com/feedback/45517/gantt-chart-the-edit-params-are-not-working-in-the-gantt-start-and-end-date-columnWe are working on a fix for this issue and plan to include
it in our upcoming patch release, which is currently scheduled for Aug 02,
2023.Disclaimer: Inclusion of this solution in the weekly release may change due to
other factors including but not limited to QA checks and works
reprioritization.

Regards,
Ajithkumar G

Udhayakumar Anand · Answer

MatteomessmerWe are glad to announce that fix for the issue “The edit params are not working in the Gantt start and end date column” has been rolled out in our patch release (v22.2.7). So please upgrade to our latest version to resolve the problem.We have also attached a sample on how to render the weekNumber while editing datePicker column. You can achieve this requirement by using the edit property of the column. Code Snippet: /*index.js*/ const editparams = { params: { weekNumber: true } }; ….////// Sample Link : https://stackblitz.com/edit/react-rfbtgf-znzywt?file=index.js,data.jsPlease contact us if you require any further assistance.RegardsUdhayakumar