namespace-ee / react-calendar-timeline

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

Css doesnot loads properly. I am using next js #847

Open Invictus-Munish opened 2 years ago

Invictus-Munish commented 2 years ago

Describe the bug Css doesnot loads properly. I am using next js

To Reproduce

Please provide one or both of the following:

`import React, { Component } from "react"; import moment from "moment"; import Timeline from "react-calendar-timeline/lib"; import generateFakeData from "./generate-fake-data"; import { Box } from '@chakra-ui/react' import "react-calendar-timeline/lib/Timeline.css"

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, 'day') }, { id: 2, group: 2, title: 'item 2', start_time: moment().add(-5, 'day'), end_time: moment().add(5, 'day') }, { id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'day'), end_time: moment().add(3, 'day') } ]

export default class App extends Component { constructor(props) { super(props);

const { groups, items } = generateFakeData(10);
const defaultTimeStart = moment()
  .startOf("day")
  .toDate();
const defaultTimeEnd = moment()
  .startOf("day")
  .add(90, "day")
  .toDate();

this.state = {
  groups,
  items,
  defaultTimeStart,
  defaultTimeEnd,
  width:0
};

}

componentDidMount(){ this.setState({width:window.innerWidth}) }

render() { const { defaultTimeStart, defaultTimeEnd } = this.state;

return (
  <Box width={this.state.width - 80}>
    <Timeline
      groups={groups}
      items={items}
      sidebarContent={<div>Above The Left</div>}
      itemsSorted
      itemTouchSendsClick={false}
      stackItems
      itemHeightRatio={0.75}
      showCursorLine
      canMove={false}
      canResize={false}
      defaultTimeStart={defaultTimeStart}
      defaultTimeEnd={defaultTimeEnd}
      minZoom={86400000}
      itemContext={(width) => console.log(width)}
      onItemSelect={(itemId, e, time) => console.log(itemId, e, time)}
    /> 
  </Box>
);

} }`

Screenshots image

Library Version Please provide version of library in which this bug is occurring.

Desktop (please complete the following information):

Additionl context Add any other context about the problem here.