namespace-ee/react-calendar-timeline

A modern and responsive react timeline component.

react-calendar-timeline's Issues

Warning: You are manually calling a React.PropTypes

I use react v 0.14.8 and I got these error. but when I use react v^15.0.0 it work fine, but I got peerDependencies errors. Do you have Any ideas to solve it?

using compoment instead string in 'title' of items.

In our project we need to use more complicate code then just string in 'title' of items. For example: several text input fields with 'cancel' and 'ok' buttons. Is it possible use component instead of string in 'title'?

Is there anyway to prevent onCanvasClick event when dragging the timeline?

I'm using onCanvasClick to add and item however the onCanvasClick is always triggered even when dragging the timeline to move the bounds.
Is there anyway to prevent this?

Thank you in advance!

onItemSelect only fires once per page refresh

When you select an item, then select another item, then select the original item. The original item will ignore the click event

Feature Request: Allow any type of object to be rendered as and Item and Group Title

It would be nice to be able to render React Components as the Items and Group Titles.

At the very least it would be helpful to be able to render HTML so that the items can have line breaks in them.

Here is a nice project that uses cell renderers to render any type of content in a table cell: https://github.com/tannerlinsley/react-table

add react-calendar-timeline.d.ts in npm package.

Hi, I created definitions for react-calendar-timeline https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/react-calendar-timeline but there are changes in typescript compiler. Now the compiler automatically resolves definitions by "typings" field in package.json.
it's explained in DefinitelyTyped/tsd#269 and in http://www.typescriptlang.org/docs/handbook/typings-for-npm-packages.html.
Main idea: Typescript user doesn't need to install tsd or typings for use react-calendar-timeline's definitions. He can just type: "npm install react-calendar-timeline" and immediately start to use it in typescript. I would like to do PR for it. There will be just react-calendar-timeline.d.ts file whenever you want and "typings" field in package.json. But before I start I want to ask the question: will my PR be accepted?

Multiple versions of react

Hey, thanks for the awesome module!

I am having an issue with multiple versions of react, although it may likely be an issue on my end. I thought you guys might be able to help.

First of all my package json looks like this:

{
  "name": "monitor",
  "peerDependencies": {
    "react": "^15.1.0"
  },
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "flux": "~2.1.1",
    "gulp": "~3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-browserify": "~0.5.1",
    "gulp-concat": "~2.6.0",
    "gulp-sass": "^2.3.2",
    "lodash": "^4.13.1",
    "moment": "~2.13.0",
    "interact.js": "^1.2.6",
    "react-addons-css-transition-group": "~15.0.2",
    "react-big-calendar": "~0.9.11",
    "react-calendar-timeline": "^0.8.1",
    "react-datetime": "~2.1.0",
    "react-dom": "^15.1.0",
    // more that are unrelated
  },
  "devDependencies": {
    // unrelated
  },
  "main": "app.js",
  "author": "",
  "license": "ISC",
  "description": ""
}

As you can see I have react 15.1.0 as a peerDependency. When I had a problem with another module giving off multiple versions of react, I was told to supply react as a peerDependency instead of a regular dependency and that fixed my issue

What is strange is while requiring using react-calendar-timeline, I am receiving the famous multiple versions of react problem again:

ScheduleMain.js:43829 Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

At the top of my ScheduleMain.js I import react and react-dom. I do this for all my react scripts
Not entirely sure why this is the case since it seems like this lib uses react 15.1.0:

[root@monitor]$ npm ls react-calendar-timeline
/var/www//monitor
├── UNMET PEER DEPENDENCY react@^15.1.0
├─┬ [email protected]
│ ├── UNMET PEER DEPENDENCY phantomjs@>=1.9
│ └── UNMET PEER DEPENDENCY [email protected]
└── UNMET PEER DEPENDENCY [email protected]

I am using NPM 3.
Does anyone know why this is happening?

Hi i have a NaN problem.

Hi i watching this project.

when i was just customize, i have a NaN problem.

i modify

 var minTime = moment().startOf('day').add(-1, 'hour').toDate().valueOf();
 var maxTime = moment().startOf('day').add(1, 'day').add(1,'hour').toDate().valueOf();

and

defaultTimeStart: moment().startOf('day').hour(6).toDate(),
defaultTimeEnd: moment().startOf('day').add(1, 'day').toDate(),

i want see today.
but scroll left and right to maxtime or mintime.
header is disappear.

so i was changed like this

onTimeChange: function (visibleTimeStart, visibleTimeEnd) {

                if(!isNaN(visibleTimeStart) && !isNaN(visibleTimeEnd)) {
                    //console.log(visibleTimeStart);
                    if (visibleTimeStart <= minTime && visibleTimeEnd >= maxTime) {
                        this.updateScrollCanvas(minTime, maxTime)
                    } else if (visibleTimeStart <= minTime) {
                        this.updateScrollCanvas(minTime, minTime + (visibleTimeEnd - visibleTimeStart))
                    } else if (visibleTimeEnd >= maxTime) {
                        this.updateScrollCanvas(maxTime - (visibleTimeEnd - visibleTimeStart), maxTime)
                    } else {
                        this.updateScrollCanvas(visibleTimeStart, visibleTimeEnd)
                    }
                } else {
                    visibleTimeStart = minTime;
                    visibleTimeEnd = maxTime;
                }
            }
}

it was no problem.

i was begginer for reactjs

thank you share your code..

wrong shift of items if there is external control

I created simple control for change visibleTimeStart and visibleTimeEnd via "previous" and "next" buttons with step of 7 days. updateScrollCanvas fuction works as expected, but there is strange shift of items in timeline.
first state before click "next", items in 1-9 may

second state after click "next", items in 8-16 may

Can you help me figure out why does it happen?
here is reproduction of defect, I tried to remove all not related code: https://github.com/radziksh/react-calenar-timeline-items-bug
if you need run it just do: 1) npm install 2) npm start

daylight savings time

If I wanna snap to the grid every 4h (14400000sec → 4 * 60 * 60 * 1000) I do something like that:

<Timeline
    groups={groups}
    items={items}
    ...
    dragSnap={14400000} 
/>

The Problem is now that if I'm in daylight savings times and move an item out of it I get: 01:00, 05:00 instead of 00:00, 4:00. (or vice versa)

See the change at the 30th of october where it switches (in Switzerland at least...):

Is that a bug or a feature? For me it's a bug since I would like to have only certain steps for planing (0:00, 4:00, 8:00, ...).

Changing the viewport with buttons

Here is a simple example:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import Timeline from 'react-calendar-timeline'
import moment from 'moment'

const groups = [
  {id: 1, title: 'group 1'},
  {id: 2, title: 'group 2'}
]

const items = [
  {id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour')},
  {id: 2, group: 2, title: 'item 2', start_time: moment().add(-0.5, 'hour'), end_time: moment().add(0.5, 'hour')},
  {id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour')}
]

var start = moment().add(-12, 'hour')
var end = moment().add(12, 'hour')

function handleClick(){
    console.log('you clicked')
    start = moment(start).add(12, 'hour')
    end = moment(end).add(12,'hour')
    handleTimeChange(start, end)
}

function handleTimeChange(visibleTimeStart, visibleTimeEnd){
    console.log(visibleTimeStart, visibleTimeEnd)
    start = visibleTimeStart
    end = visibleTimeEnd
    this.updateScrollCanvas(start, end)

}

ReactDOM.render(<div>
  <a href="#" onClick={handleClick}>Move Forward</a>
  <div>
    Rendered by react!
    <Timeline groups={groups}
              items={items}
              defaultTimeStart={start}
              defaultTimeEnd={end}
              visibleTimeStart={start.unix()}
              visibleTimeEnd={end.unix()}
              onTimeChange={handleTimeChange}


              />
  </div></div>,
  document.getElementById('root')
);

When clicking on <a href="#" onClick={handleClick}>Move Forward</a>, I receive the error: Uncaught TypeError: Cannot read property 'updateScrollCanvas' of undefined. That makes sense. Since there is no this in the example case. But how can I control/update the viewport with functions outside of Timeline?

tl;dr: I want my button Move Forward to be able to move the viewport start and end 12 hours forward, what is the best way to do this?

Container width in %

Hi,

I am dividing my screen in to 2 parts. First contains timeline, second - other content.
Second part has width param, first uses rest of space.

If second part has fixed size in pixels, timeline works great even when changing size of the browser.
But if second has width set in %, part of timeline disappear accidentally (everything besides groups names).

Any Idea, how to solve it?
Thanks!

Overlapping on change of start time

Hi there, I am having an issue when I change the start time of an item. If I change the start time to a later start time overlap occurs, this overlap does not occur when I change the start time to an earlier one.

I am calling a new items array each time a change is made and stackItems is set to true.

Any insight to why this might be happening would be greatly appreciated.

Before: Start time: 9:30am

After: Start time: 10:30am

group and item donot match.

const groups = [{
id: "0_0",
title: "A10-MY15",
isSub: false
},{
id: "1_0",
title: "C140-MY13",
isSub: false
},{
id: "3",
title: "pdtmeeting2",
isSub: true
}];
const items = [{
id: "task_0",
group: "0_0",
title: "task of A10-MY15",
start_time: 1462250677000,
end_time: 1462250716000
},{
id: "task_4",
group: "1_0",
title: "task of C140-MY13",
start_time: 1462250677000,
end_time: 1462250716000
},{
id: "task_1",
group: "3",
title: "task of pdtmeeting2",
start_time: 1462250677000,
end_time: 1462250716000
}];
ReactDOM.render(

Rendered by react!

, document.getElementById('domContainer') );

stackItems conflict with onCanvasClick

If i set stackItems={true} and have two Appointments stacked. The onCanvasClick Area is now(should now) double as big, but if i click in the bottom i get in the onCanvasClick event the groupId from the next User.

It seems that the onCanvasClick of one group is every time only one normal row height, so if there is a stacked row, alls rows after this has a wrong onCanvasClick groupId.

Can You load builded css instead of scss file (Timeline.scss)?

ERROR in ./~/react-calendar-timeline/modules/lib/Timeline.scss Module parse failed: /home/jarek/workspace/itv-cms-renderer/node_modules/react-calendar-timeline/modules/lib/Timeline.scss Line 1: Unexpected token : You may need an appropriate loader to handle this file type. | $item-color: white; | $item-background: #2196F3; | $item-border: 1px solid #1A6FB3; @ ./~/react-calendar-timeline/modules/lib/Timeline.js 19:0-26

This case was discussed once, but I want to bring it up once more.
In my project there are no scss files, I'm using stylus. I don't want unnecessary sass loaders. Please tell me why not to load builded css file?

Vertical calendar timeline?

Great work! I need to display events on the vertical timeline. Is something similar on the roadmap?

Any plan to use react-dnd for drag and drop?

How is maxZoom supposed to work?

I'm trying to set the maximum zoom but it seems to have no effect. I might be doing something wrong.

      <Timeline groups={groups}
          items={items}
          defaultTimeStart={moment().add(-12, 'hour')}
          defaultTimeEnd={moment().add(12, 'hour')}
          minZoom={1000 * 60 * 60}
          maxZoom={1000 * 60 * 60 * 24 * 7}
      />

Here's my project: https://github.com/SBUtltmedia/react-calendar-timeline-test

Thank you.

Add React 15.0 support

While render your timeline with React 15.0 several warnings appears, and header of timeline completely broken.
Thanks in advance

How to disable sidebar ?

I wan't to disable sidebar because of specific requirements, and i pass sidebarWidth={0}. Timeline rendered on large screen, but on smaller (1500px width) it just disappeared.

If i remove sidebarWidth={0} all works fine. Maybe there is a better way to disable sidebar ?

Allow Item div title attribute to be configurable

https://github.com/namespace-ee/react-calendar-timeline/blob/master/src/lib/items/Item.jsx#L353

return (
      <div key={this.itemId}
           ref='item'
           className={classNames}
           title={this.itemTitle} // <--- Configurable 

Use case:
For my Item title I'm passing a React node and not a string, which means that the title reads [object, Object]. e.g.

const items = [
  { id:1, group:1, title:<span><Avatar /> Bruce Wayne</span> }
]

Everything renders correctly (which is cool), but the tooltip title is incorrect.

When push new groups & items, errors appears

Error appear, when i push new props to the timeline.
Items.js:113 Uncaught TypeError: Cannot read property 'dimensions' of undefined

Transpiled line: dimensions: sortedDimensionItems[(0, _utils._get)(item, itemIdKey)].dimensions, in render
My setup:

• React 15.0.2
• Timeline 0.7.9

Fails when used with ES6.I have gulp as task runner.It fails while i run gulp with "Unexpected token error";

Ability to customize the header

It could be nice if we can customize how the header show and format the dates.

For example my use case :
I want to have the headerLabel showing current week ( like week 31 ) or current month and subHeaderLabel only display the day

"Ussage: At the very minimum" don't work

Without canResize prop in items I'm getting Uncaught TypeError: Cannot read property 'props' of undefined with minimum config.

Please check:
87caad0#diff-32da143c564460e65f57c62427a0084bR7

47478d7#diff-b7c68dccde932251699a245e95cd0fd0R28

Handling onClick

Hi,

Sorry for nooby question, but I cant understand how to handle onClick event on item.

Thanks for sharing this great component!

Fails when used with ES6.I have gulp as task runner.It fails while i run gulp with "Unexpected token error";

items collapse upon themselves in timeline

I am dynamically adding data to the timeline component using a multi-select picker and api call. When I add new data to the timeline component, it causes the old data on the timeline to collapse upon itself. Any idea what is happening?

Cannot resolve module

Hi, I installed and try to run the exemple in my React app and got this error

Module not found: Error: Cannot resolve module 'react-calendar-timeline'

Switch timeline to a new time frame

Hi!

Have date-picker near timeline and want to be able to switch timeline visible frame to a new time when new date is picked by user.

How can I make this feature?

Thanks for the great timeline again!)
Alex

When prefetch new data, error in console appears, but timeline works fine

I use timeline component in next way:

<Timeline groups={this.getResidents()}
                          items={this.getActivityTimeline()}
                          itemHeightRatio={1}
                          defaultTimeStart={this.props.startTime}
                          defaultTimeEnd={this.props.endTime}
                          canMove={false}
                          dragSnap={60 * 60 * 1000}
                          lineHeight={40}
                          canChangeGroup={false}
                          onBoundsChange={this.onCanvasBoundsChange}
                          visibleTimeStart={this.props.startTime.valueOf()}
                          visibleTimeStop={this.props.endTime.valueOf()} />

Inside this.onCanvasBoundsChange i use ajax call to server, and new items from this.getActivityTimeline() pushed to your beautiful component.

However in Chrome debugger i expect es6.promise.js:119 Unhandled promise rejection TypeError: Cannot read property 'dimensions' of undefined(…)

And it refs to transpiled line dimensions: sortedDimensionItems[(0, _utils._get)(item, itemIdKey)].dimensions, which is in visibleItems.map(function (item) { inside render.

Can you explain this error, or maybe i using your tool in some wrong way?

Thanks in advance

Is it possible to change color of item according to its content?

I have two type of items: standard item and analysis item. I would like to distinguish them with different color? Is there any way how to do that? If yes, can you please give me a help?

unix timestamp and offset

Hi!

Still working with your timeline calendar, thank you for that)

Following recommendation in the doc I am passing unix time stamp in milliseconds in to items. Just found that all items on timeline have different times. The difference is +3hrs which is my timezone.

Is there any way to draw items without any time transformation, but just as it is?

Thanx,
Alex

Day duration option

Is there a way to configure the day duration?

For example , I want to disable the night because my items are always done between 9AM and 9PM

How to call updateScrollCanvas

Hi again,

I have this function in my component:

handleTimeChange = (visibleTimeStart, visibleTimeEnd) => {console.log('time changed: ' + visibleTimeStart + " " + visibleTimeEnd)};

and this code in component' render :

return <Timeline groups={groups} items={items} onItemClick={this.handleClick} onTimeChange={this.handleTimeChange} defaultTimeStart={moment().add(-2, 'day')} defaultTimeEnd={moment().add(7, 'day')} />

I can see that visibleTimeStart and visibleTimeEnd are changing when I move timeline.
Where and how should I call "updateScrollCanvas"?

item vertical align issue.

please refer to the image.
when set stackItems=true,and times collide, item vertical issue appears. some are middle align while others are bottom align.

handle swipe browser back interactions

I found that I was constantly causing the browser to navigate forward/back as I swiped my trackpad.

Looking at some JS solutions but it seems like it is solved by just adding some styles to .rct-scroll

-ms-touch-action : none;
touch-action     : none;

DOM elements inside .rct-header overlapping when not in fullscreen

All .rtc-header DOM elements disappear when dragging .rtc-header .rct-label really fast

When you drag .rtc-header .rct-label really fast, it bugs and removes all elements in .rtc-header.

I suggest to disable dragging when clicking on .rtc-header .rct-label. Not only does it triggers a drag in timeline, but it also clicks you to the subcategory.

Before fast drag over day numbers:

After the fast drag:

typescript definitions for react-calendar-timeline

I'm creating typescript definition for react-calendar-timeline. Can you, please, say which properties is required in Timeline conponent? defaultTimeStart and defaultTimeEnd? Or there is no required properties?

Feature Request: Extension points to enable timeline as drag target for creating new events

For a project I'm currently working on, I would like to be able to drag something on to the timeline, and then have a callback with the dropped event, and the time at which the drop happened.
Additionally I will need to be able to drag something onto the items as well, and have a callback fired.
It is going to be used for a scheduling application that creates a schedule that associates several resources together, akin to scheduling a meeting room, and then dragging contacts onto the event.

I'm happy to attempt to make the changes myself, but was wondering if this feature is something you would be interested in once complete, and if you were available to provide guidance if required?

Item gets timezone offset on dragging and resizing if timeline has dragSnap property.

Reproducible link: http://codepen.io/xmityaz/pen/wGZRoq
To reproduce the issue try to slightly move one of the items (Item 2 and Item 3 are more obvious). It will start dragging process but at first will move/resize the item on timezone offset value (3 hours for Kiev) and just after on dragSnap value (1 day).

The issue occurs when the dragSnap property is set to Timeline and it isn't multiplier of timeZone offset value.
I guess the problem in dragTimeSnap function in Item.jsx (line 63).
I've tried to fix it in the way bellow (changed dragTimeSnap function):

dragTimeSnap (dragTime) {
    if (this.props.dragSnap) {
      const offset = moment().utcOffset() * 60 * 1000;
      return Math.round(dragTime / this.props.dragSnap) * this.props.dragSnap - offset % this.props.dragSnap;
    } else {
      return dragTime
    }
  }

But it solves the issue just for moving an item. And introduces new issue for resizing:
For this expamle if you will try to resize Item 1 it will reset item time to 12 AM (instead of 6 AM in this case).

Could you please help to solve this issue if you'll have some time?
Any way, if I'll find a solution earlier I'll be back with PR :)

Cant get onTimeChange to work

I'm wanting to prevent the date range that is visible to the user. I've set the two attributes for visible start and end dates. However when trying to set the onTimeChange function using the example with updateScrollCanvas method i don't have access to it. Since i'm importing Timeline, how would i go about calling that function from within my component?

Too long items for accuracy down to one second

I am having a timeline where I want accuracy down to one second. Somehow the timeline creates weird overlappings. I marked how it actually should be.

And this is the log when I click on these items and just output the start and end time.

1.Span [231] starting from 4/5/2016, 6:04:34 AM until 4/5/2016, 6:05:35 AM
2. Span [232] starting from 4/5/2016, 6:05:35 AM until 4/5/2016, 6:24:32 AM
3. Span [234] starting from 4/5/2016, 6:26:04 AM until 4/5/2016, 6:29:39 AM
4. Span [235] starting from 4/5/2016, 6:29:39 AM until 4/5/2016, 6:45:01 AM

Not working in IE11

Support for React-Native - Enhancement

Can this component developed for React-Native Environment?

sidebarWidth={0} causes errors in React 0.14.4

Issue related to #14 .

When i used sidebarWidth={0} with latest 0.7.9 version and react 0.14.4, it cause:

logger.js:185Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).(…)invokeConsoleMethod @ logger.js:185
es6.promise.js:119Unhandled promise rejection TypeError: Cannot read property 'removeEventListener' of undefined(…)(anonymous function) @ es6.promise.js:119
4Header.js:61Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined
Timeline.js:592Uncaught TypeError: Cannot read property 'scrollLeft' of undefinedReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:71
Header.js:61Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined

Cannot find module "./Timeline.scss"

Hi guys,

any idea on what is going on here? Seems like the requires/imports are correctly used but I'm getting this webpack problem.

I'm using versions:

"babel": "^6.5.2",
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"interact.js": "^1.2.6",
"moment": "^2.13.0",
"node-sass": "^3.7.0",
"react": "^15.0.2",
"react-calendar-timeline": "^0.7.9",
"react-dom": "^15.0.2",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",

"webpack-dev-server": "^1.14.1"

Semanal and Monthly View?

Uncaught TypeError: Cannot read property 'pageX' of undefined

I have been using react-calendar-timeline for awhile now with no problems. It has been set as a devDependency like so:

"devDependencies": {
     ... 
    "react-calendar-timeline": "git+https://github.com/namespace-ee/react-calendar-timeline.git"
}

Recently I opened up a console on a page that was using it an noticed an error:
Uncaught TypeError: Cannot read property 'pageX' of undefined

After further investigation, I noticed it was coming from this function in react-calendar-timeline:

// Get specified X/Y coords for mouse or event.touches[0]
function getXY (type, pointer, xy) {
     xy = xy || {};
     type = type || 'page';

     xy.x = pointer[type + 'X'];       // <---- error on  this line
     xy.y = pointer[type + 'Y'];

    return xy;
}

Why is this happening now? Is there anything that I can do do make it go away?