Drag & drop item from one timeline calendar to other

[thamanchand]

Hi,
Let's say I have two timeline calendars, is it possible to drag & drop item from one calendar to other? I would appreciate if anyone can provide me a hint/pointers.

Thanks

[thamanchand]

Need suggestions/pointers for my question! Anyone? I am thinking of using this library for drag and drop item between two timeline calendar but before that I want to know if it's possible.

[foufee]

I have managed to extend react-calendar-timeline to support Drag and drop from a tree view (treebeard), so I expect that drag and drop from another calendar would be quite possible, unfortunately my fork of the timeline is from quite a while ago, however, I expect that in the coming month I will be updating my fork to use 0.15. I ended up adding several extension points for handling drop events on the timeline, and the groups.

[thamanchand]

Hi @foufee i am still stuck with the drag and drop between two time calendars. Do you have time to update fork? Let me know the status!

Thanks

[ashishkvr]

Yes, i too struck with drag & drop of items between two calenders

[msand]

I've implemented a proof of concept for drag & drop unto the timeline from outside of it here: msand@e2c72b0
@mcMickJuice What do you think of this? Any suggestions how to improve it? Is it alright to depend on these internals? Or should the logic be moved inside the Timeline component?

[richardgirges]

@msand that is almost exactly what I was looking for! But there is one issue: when you scroll through the timeline, or zoom in/out of the timeline, the drop starts to become inaccurate. I'm noticing that the event is placed at a later time than intended. It doesn't happen if I load the demo and drag+drop without zooming or scrolling through the timeline first

[msand]

@richardgirges How about this? 39d5a8a
master...msand:drag-n-drop-unto-timeline

[richardgirges]

@msand it works perfectly!!! I'm able to zoom and scroll freely and the drop is always accurate! Awesome work, thanks so much!

Would be great to get this into the demo codebase or at least document it somewhere, as this seems to be a recurring request. (see #200, #60, #477)

[msand]

Refactored into a reusable component: msand@4d26362
https://github.com/msand/react-calendar-timeline/tree/drag-n-drop-unto-timeline

[msand]

Draggable component:

react-calendar-timeline/demo/app/demo-main/index.js

Lines 2 to 103 in db539d0

	import React, { Component, Fragment, createRef } from 'react'
	import moment from 'moment'
	import Timeline, {
	TimelineMarkers,
	TodayMarker,
	CustomMarker,
	CursorMarker
	} from 'react-calendar-timeline'
	import generateFakeData from '../generate-fake-data'
	import interact from 'interactjs'
	import { coordinateToTimeRatio } from 'react-calendar-timeline/lib/utility/calendar'
	import {
	getSumOffset,
	getSumScroll,
	} from 'react-calendar-timeline/lib/utility/dom-helpers'
	import PropTypes from 'prop-types'
	class Draggable extends Component {
	static propTypes = {
	handleItemDrop: PropTypes.func,
	timelineRef: PropTypes.object,
	scrollRef: PropTypes.shape({
	current: PropTypes.object,
	}),
	children: PropTypes.node,
	data: PropTypes.object,
	}
	handleItemDrop = e => {
	const {
	props: { timelineRef, scrollRef: { current: scrollRef }, data },
	} = this
	const {
	canvasTimeStart,
	visibleTimeStart,
	visibleTimeEnd,
	groupTops,
	width,
	} = timelineRef.current.state
	const canvasWidth = width * 3
	const zoom = visibleTimeEnd - visibleTimeStart
	const canvasTimeEnd = zoom * 3 + canvasTimeStart
	const ratio = coordinateToTimeRatio(
	canvasTimeStart,
	canvasTimeEnd,
	canvasWidth,
	)
	const { offsetLeft, offsetTop } = getSumOffset(scrollRef)
	const { scrollLeft, scrollTop } = getSumScroll(scrollRef)
	const { pageX, pageY } = e
	const x = pageX - offsetLeft + scrollLeft
	const y = pageY - offsetTop + scrollTop
	const start = x * ratio + canvasTimeStart
	let groupKey = ''
	for (const key of Object.keys(groupTops)) {
	const groupTop = groupTops[key]
	if (y > groupTop) {
	groupKey = key
	} else {
	break
	}
	}
	if (groupKey === '' || pageX < offsetLeft || pageX > offsetLeft + width) {
	return
	}
	this.props.handleItemDrop({ data, start, groupKey })
	}
	componentDidMount = () => {
	let x, y
	this.interactable = interact(this.item.current)
	.draggable({ enabled: true })
	.on('dragstart', e => {
	({ pageX: x, pageY: y } = e)
	})
	.on('dragmove', e => {
	const { pageX, pageY } = e
	e.target.style.transform = `translate(${pageX - x}px, ${pageY - y}px)`
	})
	.on('dragend', e => {
	e.target.style.transform = ''
	this.handleItemDrop(e)
	})
	}
	componentWillUnmount() {
	this.interactable.unset()
	}
	item = createRef()
	render() {
	return <div ref={this.item}>{this.props.children}</div>
	}
	}

Usage:

react-calendar-timeline/demo/app/demo-main/index.js

Lines 235 to 293 in db539d0

	handleItemDrop = ({ data: { title }, start, groupKey }) => {
	const end = start + 1000 * 60 * 60 * 24
	const startDay = moment(start).day()
	const endDay = moment(end).day()
	const items = this.state.items
	this.setState({
	items: [
	...items,
	{
	id: items.length,
	start,
	end,
	group: parseInt(groupKey, 10) + 1,
	title,
	className:
	startDay === 6 || startDay === 0 || endDay === 6 || endDay === 0
	? 'item-weekend'
	: '',
	itemProps: {
	'data-tip': 'Drag & drop is working',
	},
	},
	],
	})
	}
	scrollRef = {
	current: null,
	}
	onScrollRef = ref => {
	this.scrollRef.current = ref
	}
	timelineRef = createRef()
	render() {
	const { groups, items, defaultTimeStart, defaultTimeEnd } = this.state
	return (
	<Fragment>
	<Draggable
	handleItemDrop={this.handleItemDrop}
	timelineRef={this.timelineRef}
	scrollRef={this.scrollRef}
	data={{ title: 'Drag & drop works' }}
	>
	<div
	style={{
	padding: 10,
	width: '100px',
	height: '100px',
	background: 'lightgray',
	}}
	>
	Drag & drop me onto the timeline
	</div>
	</Draggable>
	<Timeline
	ref={this.timelineRef}
	scrollRef={this.onScrollRef}

[Ilaiwi]

@msand this looks really exciting. I will take a look at this ASAP and maybe document it somehow

[mcMickJuice]

I strongly recommend that we add this example to the examples/README.md and not to the project readme.

This should be treated as a recipe and not something that our library supports. Otherwise we're going to get a ton of issues related to this specific feature (this happened with the tree-view example).

Just my 2 cents. I know I haven't been involved in this project for months now but for your sake @Ilaiwi , this is my recommendation.