0.26.1

0.26.1

• fix issue where mouse down gets stuck when scrolling the timeline #526 @KhalidArdah

you can as well solve the issue without upgrading by adding the following style

.react-calendar-timeline .rct-horizontal-lines {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}

as here

0.26.0

0.26.0

Added

• Add onItemDrag prop to <Timeline /> #517 @bettymakes
• Upgrade to Babel 7.5.0, Jest 24.8.0, Enzyme 3.10.0 @trevdor

Breaking

• Removed <InfoLabel /> in favour of allowing for custom component to be rendered on move or resize. Check out the demo in demo/app/demo-custom-info-label for an example on how to display your own custom info label or this example.

0.25.2

Fixed the auto-scroll right bug in a scaled browser. #528 @cw196

Custom headers

Custom Headers

This new feature gives more control to dev to create customizable headers to provide better UI. Now user have more control through a set of new components to render headers. This new feature came with a breaking change though.

import Timeline, {
  TimelineHeaders,
  SidebarHeader,
  DateHeader
} from 'react-calendar-timeline'

<Timeline>
  <TimelineHeaders>
    <SidebarHeader>
      {({ getRootProps }) => {
        return <div {...getRootProps()}>Left</div>
      }}
    </SidebarHeader>
    <DateHeader unit="primaryHeader" />
    <DateHeader />
    <CustomHeader height={50} headerData={{someData: 'data'}} unit="year">
      {({
        headerContext: { intervals },
        getRootProps,
        getIntervalProps,
        showPeriod,
        data,
      }) => {
        return (
          <div {...getRootProps()}>
            {intervals.map(interval => {
              const intervalStyle = {
                lineHeight: '30px',
                textAlign: 'center',
                borderLeft: '1px solid black',
                cursor: 'pointer',
                backgroundColor: 'Turquoise',
                color: 'white'
              }
              return (
                <div
                  onClick={() => {
                    showPeriod(interval.startTime, interval.endTime)
                  }}
                  {...getIntervalProps({
                    interval,
                    style: intervalStyle
                  })}
                >
                  <div className="sticky">
                    {interval.startTime.format('YYYY')}
                  </div>
                </div>
              )
            })}
          </div>
        )
      }}
    </CustomHeader>
  </TimelineHeaders>
</Timeline>

Check out the new docs before please here

removed props

• stickyOffset and stickyHeader now you can make your header sticky by following this examples
• headerRef to get the headerRef you need to pass ref callback to TimelineHeader component
• headerLabelGroupHeight and headerLabelHeight now you can pass a height prop to both CustomHeader and DateHeader
• headerLabelFormats and subHeaderLabelFormats not you can pass formatLabel function to DateHeader with label width and start and end time of intervals

0.23.1

0.23.1

• fix height calculation of stacked items is off if no item is visible in a line @Felix-N
• fix Unsubscribing markers correctly when unmounted @gaston-niglia

0.23.0

• improve unit tests coverage #426 - @Ilaiwi
• stack items by group #384 - @acemac
• fix bug where canMove prop gets ignored #484 - @acemac + @Ilaiwi
• fix sidebar re-render when groupHeights do not change #478 - @SDupZ

Stack per group

now you can stack choose to stack items in individual groups by providing the property stackItems in group object. The property in group overrides the timeline prop stackItems.

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

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')
  }
]

ReactDOM.render(
  <div>
    Rendered by react!
    <Timeline
      groups={groups}
      items={items}
      defaultTimeStart={moment().add(-12, 'hour')}
      defaultTimeEnd={moment().add(12, 'hour')}
    />
  </div>,
  document.getElementById('root')
)

0.22.0

Fixed

• Provided a new key groupLabelKey to allow splitting of the key used to render the Sidebar and the InfoLabel visible during drag operations. groupTitleKey continues to be used to render the Sidebar. #442 @thiagosatoshi
• fix scroll left/right causes item move/edit to be at incorrect time #401 @acemac
• now getResizeProps take leftClassName and rightClassName and returns className for left and right props @acemac
• fix functionality of itemTitle and itemDivTitle issue @acemac

0.21.0

fixes

• fix item dimensions not being rendered on zoom in/out @Ilaiwi + @acemac
• correct right_sidebar to rightTitle in readme @maxlibin

breaking changes

• add rct to .top-header and .bottom-header to become .rct-top-header and .rct-bottom-header @Simek
• upgrade dev dependance [email protected] @acemac

0.20.0

0.20.0

v0.16.1

This release is focused on performance improvements. As such, there were api changes, some breaking.

One of the main changes was removing the import of Timeline.css in the component and putting the onus on the user to manage the inclusion of Timeline.css. See the README for information on how to do this.

Added

• added stickyHeader to disable/enable timeline header sticking on scroll.
• removed fullUpdate prop and functionality. Labels rely on position: sticky to show for items that start before visibleTimeStart. This should greatly improve scroll performance.
• removed extraneous css such as text-align: center on .rct-item, .rct-item-overflow to simplify the dom structure of Item.js
• added headerRef callback to receive a reference to the header element. Due to the change in how the header positioning is implemented (i.e. using position: sticky), there is a need to use a polyfill in certain browsers that don't support position: sticky. With a reference to the header dom element, you can use a polyfill to apply sticky behavior.
• minimumWidthForItemContentVisibility prop to control at what width inner item content is rendered.

Breaking

• removed fixedHeader prop in favor of using position: sticky by default
• removed import of stylesheets in library code, put onus on user to handle this stylesheet