DnD events doesn't work

[MadjidSahki]

Version

"@toast-ui/react-calendar": "^1.0.4",

Test Environment

Chrome 77 , Win10

Current Behavior

I can select an event, and move it perfectly, but i can't drop it.
Dragging work perfectly, but drop doesn't work.

import React, { Component } from "react";
import logo from './logo.svg';
import Calendar from '@toast-ui/react-calendar';

// If you use the default popups, use this.
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-time-picker/dist/tui-time-picker.css';
import './App.css';
import 'tui-calendar/dist/tui-calendar.css';

let DateGenerator = require('random-date-generator')

class App extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {events:[]};
  }



  generateEvents(nbEvents) {
    let startDate = new Date(2019, 9, 6)
    let endDate = new Date(2019, 9, 12)

    let events = [];
    for (let i = 0; i < nbEvents; i++) {
      let start = DateGenerator.getRandomDateInRange(startDate, endDate)
      let end =  start.setHours(start.getHours()+2)
      let event = {
        id: i,
        title: "event " + i,
        calendarId: '0',
        category: 'time',
        start: start,
        end: new Date( end )
      }
      events.push(event)
    }
    this.setState({events:events})
  }

  componentWillMount() {

    this.generateEvents(2000);
  }
  render() {
    return (
      <div>
        <Calendar
          height="900px"
          setDate={new Date(2019, 0, 5)}
          calendars={[
            {
              id: '1',
              name: 'Company',
              bgColor: '#00a9ff',
              borderColor: '#00a9ff'
            }
          ]}
          disableDblClick={true}
          disableClick={true}
          view="week"
          isReadOnly={false}
          month={{
            startDayOfWeek: 0
          }}
          schedules={this.state.events}
          scheduleView="time"
          taskView={false}
          useDetailPopup={true}
          useCreationPopup={true}
          week={{
            showTimezoneCollapseButton: true,
            timezonesCollapsed: true
          }}
        />
      </div>

    );
  }

}



export default App;

Expected Behavior

Drag an event, and drop it where desired

---

I have another question, is it possible to set a default start date for the calendar ?

Thx

[jungeun-cho]

@MadjidSahki
To move a schedule by dragging and dropping it is to update the schedule.
So we provide an event hook that is fired before updating.

https://github.com/nhn/toast-ui.react-calendar#event
https://nhn.github.io/tui.calendar/latest/Calendar#event-beforeUpdateSchedule

  ...
  componentDidMount() {
    this.calendarInst = this.ref.current.getInstance();
  }

  onBeforeUpdateSchedule(event: IEventObject) {
    var schedule  = event.schedule;
    var changes = event.changes;

    console.log('beforeUpdateSchedule', event);

    this.calendarInst.updateSchedule(schedule.id, schedule.calendarId, changes);
  }

...
  render() {
    return (
      <div>
        <Calendar
          height="900px"
          onBeforeUpdateSchedule={this.onBeforeUpdateSchedule.bind(this)}