namespace-ee / react-calendar-timeline

A modern and responsive react timeline component.
MIT License
1.91k stars 613 forks source link

Item not rendering on the good line #864

Closed clemencestr closed 2 years ago

clemencestr commented 2 years ago

Describe the bug I can't link an item with a group. The item is always displayed bellow the rest. Here a capture and the code :

To Reproduce

import * as React from 'react';
import moment from 'moment';

import Timeline from 'react-calendar-timeline';

const Calendar = () => {
  const keys = {
    groupIdKey: 'id',
    groupTitleKey: 'title',
    groupRightTitleKey: 'rightTitle',
    itemIdKey: 'id',
    itemTitleKey: 'title',
    itemDivTitleKey: 'title',
    itemGroupKey: 'group',
    itemTimeStartKey: 'start_time',
    itemTimeEndKey: 'end_time',
    groupLabelKey: 'title',
  };

  const defaultTimeStart = moment().startOf('day').toDate();
  const defaultTimeEnd = moment().startOf('day').add(5, 'day').toDate();

  const groups = [
    {
      id: 0,
      title: 'test',
      bgColor: '#a188fc',
    },
    {
      id: 1,
      title: 'test2',
      bgColor: '#a188fc',
    },
  ];
  const items = [
    {
      id: 0,
      group: 0,
      title: 'test',
      start_time: moment().startOf('day').add(0, 'day').toDate(),
      end_time: moment().startOf('day').add(3, 'day').toDate(),
    },
  ];

  return (
    <Timeline
      groups={groups}
      items={items}
      keys={keys}
      defaultTimeStart={defaultTimeStart}
      defaultTimeEnd={defaultTimeEnd}
    ></Timeline>
  );
};

export default Calendar;

Expected behavior The item "test" should be on the same line than the group "test".

Screenshots

Capture d’écran 2022-06-07 à 15 41 56

Library Version "interactjs": "1.3.4", "moment": "2.18.1", "react": "17.0.2", "react-calendar-timeline": "0.28.0", "react-dom": "17.0.2",

Desktop (please complete the following information):