guiqui / react-timeline-gantt Goto Github PK

Can I show tow time header for day view ?
One is for one time zone in hour format and other one is for other time zone in hour format ?

Hello,
I would like to have a way to fully customize some of the components. For example inserting a row with 3 inputs inside the taskList section.
something like this:

const config = {
  taskList: {
    title: {
      label: "Task Todo",
      style: {
        background: "linear-gradient( grey, black)"
      }
    },
    task: (props) => <CustomTaskComponent {...props} />,
  },
};

If this is not supported, I don't mind implementing this myself and open a pull request for it.
Wondering if this project is still active.

Thanks

Hi, I'd like to be able to move a slider/cursor back and forth horizontally, which would be indicated with a vertical line. As I move it, I'd get events indicating which records the cursor intersects. Is this supported by this timeline?
Thanks.

How to show task Label as ToolTip or on hover? Like the way Google timeline chart display.

Is there a way to show more information on the left column?, Basically, add more columns apart from task name. I mean for example my data source include a task owner, status, completed percent, etc.

If currently not supported, would you consider a PR with this feature?

Thanks,
Jonathan

FYI After fresh install:

Module not found: Can't resolve 'moment' in 'C:\SQLI\Projects\airline-sciences-indus_new\airline-sciences-react2\node_modules\react-gantt-timeline\dist'

Hi,
Noticed a couple of things on the URL below.
https://guiqui.github.io/react-timeline-gantt/index.html

1. Initially the week and day view doesn't appear, however as soon scrolling happens(right or left) the dates appear.
2. The day view appears to be confusing. Somehow the dates are NOT displaying in day view.

Is this an issue or do I have a old version of libraries?

Thanks,

Hey,

Thanks for the react-timeline-gantt. Was wondering if there is any sample with a rest api call to fetch data?

There is no way to sort columns.

How can I remove week row from month mode

I want to remove the day and month headers and replace them with custom text .

how to change width of Days div. currently it's having 24px.

t.value
C:/Users/Stephanie/Workspace/***-frontend-react-git/node_modules/react-gantt-timeline/dist/index.js:1

Happens every time you render the timeline inside another component.

Can i override config?
CodeSandbox demo says yeas https://codesandbox.io/s/1y2on87jj but code says no: https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/viewport/DataTask.js#L161
Config got from file https://github.com/guiqui/react-timeline-gantt/blob/master/src/lib/components/viewport/DataTask.js#L5

how can we change row height. currently it is having 20px.

Here you are changing the item but after de-structuring data array you are not updating the manipulated item. Can you please explain because according to my knowledge de-structuring prevents mutability and gives an exact copy

case Actions.AC_UPDATE_TASK:
debugger
item = action.payload.item;
props = action.payload.props;
console.log('update item', item);
console.log('update prop', props);
item.start = props.start ? props.start : item.start;
item.end = props.end ? props.end : item.end;
item.name = props.name ? props.name : item.name;
return {
data: [...state.data],
links: [...state.links],
selectedItem: state.selectedItem
};

Hi,

I was trying to use this component but in my use case, I cannot allow the user to edit the task name by clicking it. I looked at the code and saw that this is not currently possible.

@guiqui is this repository still maintained? I would gladly open a PR to make this configuration possible, but I haven't seen much activity lately here.

Hey there! First of all - thank you for providing this great package!
For my use case, it would be great if the labeling of the task displayed in the timeline could be given another value other than the already given task-name.
Is there a possible workaround or is this only applyable by creating this as a new feature? If so, I'd be very happy to contribute this additional feature.

when going to a view and back

I am trying to style the chart by taking help from the following demo:

https://codesandbox.io/s/2w93lvmqv0?file=/src/index.js:182-1455

But getting error. I am using config property. I am on version 0.4.3 but the demo above provided is on version 0.3.9. I am not sure whether the version update caused something. The error is as follows:

Uncaught TypeError: Cannot assign to read only property 'backgroundColor' of object '#<Object>'

Any kind of help would be much appreciated

When using a touchpad horizontal scroll don't seems to work.

I think LINK_POS_LEFT is missing from the Const.js file, not sure what it should be

I'm trying to use gantt chart with Jalali calendar with moment-jalali.
I've changed getFormat and so far it's ok, except Jalali year month starts in March so I had to change getStartDate function.

getStartDate = (date, mode) => {
    let year = null;
    switch (mode) {
        case 'year':
            return date.startOf('jYear');
        case 'month':
            return date.startOf('jMonth');
        case 'week':
            return date.subtract(date.day(), 'days');
        default:
            return date
    }
}

but now I'm getting bugs in the calender...
on scrolling chart month and year not showing and disappears...
is there any other function I should change?

I am using the nextjs , the chart cannot show .

error msg:

Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
external%20%22react-gantt-timeline%22 (1:0) @ Object.react-gantt-timeline

1 | module.exports = require("react-gantt-timeline");
Call Stack
webpack_require
webpack\bootstrap (21:0)
Show collapsed frames

Hi,
First of all, thank you for the 0.3.9 update 👍
I have several questions :
1- How can I use the mode property in config obj ?
2- Is it still possible to use the dateFormat ?
3- Is it possible to delete a part of the header, like the middle or the bottom part ?

Again thank you so much :)

Hey thanks for the timeline. I looks like a great start to a project. One issue I found was when dragging the timeline to the right, the header days/hours disappear in the Day and Week mode. This makes these modes hard to use.

Hi!
Is it possible for one task to have multiple time bars on the same row? for example one going from the 1st may to the 3rd of may. and then another one going from 5th of may to the 10th ?.
Moreover is it possible to disable the link creation and animation (such that when clicking on the right side of a bar we don't have the link arrow spawning and moving?)
Thanks for you time and answer.

@guiqui @jakitpatel

I am trying to move the task in the position of top to bottom instead of moving left to right, but we cannot achieve, can you please explain how to move the task, top to the bottom position? its helps us to get the better way to further proceed

Please refer to the screenshot: -

Something like above is coming but i wanted something like below: -

This is what i have done:-
https://codesandbox.io/s/3x8nl16p65

Is there currently a way to adjust the height of the tasks? Would like a little more height for each, right now they feel a little cramped.

Hi,
Not sure if this is an issue; but is there a way I can change the current default time horizon (it starts from today's date and I wanted it to start from today's date minus X days ...

Hello, is there a way to style a single day of the timeline individually?
In my use case, I am required to mark holidays / non-working days in the timeline by coloring the background differently. Is there a way to do this?
So far as I understand, I can only change the background color for all days but not for a single day.
Also, as it is shown in the demo (https://codesandbox.io/s/brave-rgb-c72g7) the today-date is colored red. This is not the case for the "basic" demo (https://codesandbox.io/s/1y2on87jj) but I cannot figure out how you did that. Can you help?
Thanks!

Hi,
as I wrote to you by email I want to fix your code to see datetime in local format. For example in my case italian format.
I want to add in Config class this portion of code:
,
moment : {
locale : 'it'
}
So I can set moment.locale in the language that i wants in the page where I use your package.
After I want to set moment.locale(Config.moment.locale); into headers.js to apply the correct datetime format.
I try to rebuild your package but no fix seems applyed

Thanks Alex

I have noticed that in the demo: https://guiqui.github.io/react-timeline-gantt/index.html there is a section on top of the Gantt chart to change the zoom levels as Day, Week, Month, and Year. How we can add that option?

When using react-timeline-gantt in webpack-dev-server, a hot reload triggers the following during rendering:

index.js:1 Uncaught TypeError: Cannot assign to read only property 'backgroundColor' of object '#'
at e.value (index.js:1)
at e.value (index.js:1)
at e.value (index.js:1)
at e.value (index.js:1)
at e.load (index.js:1)
at new t (index.js:1)
at constructClassInstance (react-dom.development.js:11361)
at updateClassComponent (react-dom.development.js:14687)
at beginWork (react-dom.development.js:15644)
at performUnitOfWork (react-dom.development.js:19312)

Is it possible to using render Props So I Can for example render custom task Card

I want to replace the background color of the task with an image of any format or an svg or any other graphical substitute .
I also don't know if it is possible to pass such props through the config variable

Hello,

Thank you for this! It's easy to setup and really helpful.

Is there a way to tell the Timeline to scroll horizontally to the start date of the earliest/first task when the component is created? Currently it focuses on the current date. Unless I'm doing something wrong?

It would be nice to have an option to bring any task into view on the right when clicking on it's name on the left hand side.

Hello, I would like to know if it's possible using the config object maybe or something else, to show in the header the years and 12 months under them instead of the months and 30 days under them ?

thanks !

when i try to open demo at
https://guiqui.github.io/react-timeline-gantt/index.html

via ie11 i get error
Object doesn't support property or method 'trunc'

I wish to extend the TimeLine component's render function. If I extend the class and have render as follows:
render() { return TimeLine.prototype.render.call(this);
Then the calendar displays normally.

However, if I copy the contents of the render function from TimeLine.js into my child class's render() function, the calendar repeats itself across the screen multiple times:

How can I avoid this happening? I have already imported all the correct modules.

Can you please look at this demo URL? I think its displaying the wrong month.

https://guiqui.github.io/react-timeline-gantt/index.html

Hi,

I am trying to figure out what would be the value for start and end in Month view on the timeline?

When the component renders twice, I see 2 different date values for start and end like below.

Calculating in Horizon
Start Sun May 05 2019 08:00:00 GMT-0700 (Pacific Daylight Time)
End Sat Jul 27 2019 16:00:00 GMT-0700 (Pacific Daylight Time)

Start Sun May 05 2019 08:00:00 GMT-0700 (Pacific Daylight Time)
End Fri Sep 13 2019 16:19:41 GMT-0700 (Pacific Daylight Time)

when i drag main task then all the dependent(linked) tasks should move, how can i do this using this plugin.

It would be very useful to do something like this:

I'm checking the code and have noticed that each has a single probably it would be quite easy to add item property like "groupId" which allows to add multiple DataTask per row. I'll look into it and provide a PR when i have more time

To be able to create task with subtask and so on.

RT

Are you considering adding support for typescript?