Issue with styling or css when hovering or clicking on the calendar

[hbellala]

Everything with the library works, except when I hover over the events (which I got around by turning that off but hope have that hover capability soon) or when I choose a date using the calendar. When I do hover or click on the dates they pop up on the left side my screen and then my whole program just freezes, and I have to refresh.

`import React, { Component } from 'react'; import Scheduler, { SchedulerData, ViewTypes } from 'react-big-scheduler'; import './PropertyCalender.less'; import moment from 'moment'; import withDragDropContext from './withDndContext';

let globalEventsHolder = []; class PropertyCalender extends Component { constructor(props) { super(props); const schedulerData = new SchedulerData(moment().format('YYYY-MM-DD'), ViewTypes.Week, false, false, { startResizable: false, endResizable: false, checkConflict: true, movable: false, creatable: false, eventItemPopoverEnabled: false, views: [], schedulerWidth: '80%', }); schedulerData.localeMoment.locale('en'); schedulerData.setResources([]); schedulerData.setEvents([]); this.state = { viewModel: schedulerData }; this.generateICal = this.generateICal.bind(this); }

prevClick = schedulerData => { schedulerData.prev(); schedulerData.setEvents(globalEventsHolder); this.setState({ viewModel: schedulerData }); }

nextClick = schedulerData => { console.log(globalEventsHolder); schedulerData.next(); schedulerData.setEvents(globalEventsHolder); this.setState({ viewModel: schedulerData }); }

onViewChange = (schedulerData, view) => { schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective); schedulerData.setEvents(schedulerData.events); this.setState({ viewModel: schedulerData }); }

onSelectDate = (schedulerData, date) => { schedulerData.setDate(date); schedulerData.setEvents(schedulerData.events); this.setState({ viewModel: schedulerData }, () => { console.log(this.state); }); }

eventClicked = (schedulerData, event) => { alert(You just clicked an event: {id: ${event.id}, title: ${event.title}}); };

ops1 = (schedulerData, event) => { alert(You just executed ops1 to event: {id: ${event.id}, title: ${event.title}}); };

ops2 = (schedulerData, event) => { alert(You just executed ops2 to event: {id: ${event.id}, title: ${event.title}}); };

toggleExpandFunc = (schedulerData, slotId) => { console.log('here'); schedulerData.toggleExpandStatus(slotId); this.setState({ viewModel: schedulerData }); }

render() { const { viewModel } = this.state; // console.log(viewModel); return (

<Scheduler schedulerData={viewModel} prevClick={this.prevClick} nextClick={this.nextClick} onSelectDate={this.onSelectDate} onViewChange={this.onViewChange} eventItemClick={this.eventClicked} viewEventClick={this.ops1} viewEventText="Ops 1" viewEvent2Text="Ops 2" viewEvent2Click={this.ops2} toggleExpandFunc={this.toggleExpandFunc} />

); } } export default withDragDropContext(PropertyCalender); `

in pacakge.json "antd": "^3.8.4", "react-dnd": "^7.7.0", "react-dnd-html5-backend": "^7.7.0", "react": "^16.8.6",

[karlfus]

Try adding import 'react-big-scheduler/lib/css/style.css';

[BagchiMB]

@hbellala hey, how did you move the resource panel to the left

[hadisa]

Hi- I have the same issue and i adding import 'react-big-scheduler/lib/css/style.css'; but not work how did you solve that?