React-big-calendar: Missing lib/addons/dragAndDrop/styles.less

[gsavvid]

Hello,

Thanks for the great work.

I've noticed that the file react-big-calendar/lib/addons/dragAndDrop/styles.less is missing after installing the library (v0.12.3). I found the file on the remote repo, here on GitHub, and I manually added it but it still doesn't seem to be working properly. In particular, when dragging an event, the hover effect doesn't work. In other words, the slot I'm dragging the event over, doesn't change its background color to grey like in the Drag And Drop example found here: http://intljusticemission.github.io/react-big-calendar/examples/index.html.

This is what my component looks like:

import React, { Component } from 'react'
import BigCalendar from 'react-big-calendar'
import Moment from 'moment'
import Style from './CalendarStyle'
import Strings from '../../../common/themes/Strings'
import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContext } from 'react-dnd'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'

import 'react-big-calendar/lib/css/react-big-calendar.css'
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less'

const DragAndDropCalendar = withDragAndDrop(BigCalendar);

// Setup the localizer by providing the Moment object to the corresponding localizer.
BigCalendar.momentLocalizer(Moment)

class Calendar extends Component {
    render() {
        return (
            <div style={Style.calendar}>
                <DragAndDropCalendar
                    defaultView='week'
                    events={this.props.events}
                    messages={Strings.en.calendar}
                    popup={true}
                    selectable={true}
                    onEventDrop={(dropEvent) => console.log('On Event Drop. Start ' + dropEvent.start.toLocaleString() + ' end: ' + dropEvent.end.toLocaleString())}
                    />
            </div>
        )
    }
}

export default DragDropContext(HTML5Backend)(Calendar)

Any help would be greatly appreciated!

[gsavvid]

Does anyone have a suggestion for this? I deleted and re-installed the library again but the file was still missing. After manually adding it again, the style still doesn't seem to apply.

[jquense]

the file is definitely missing from the release, we need to fix that. I'm not sure why it doesn't work when you manually add it tho.

[tuanngominh]

With my try, adding dragAndDrop.less to react-big-calendar.css works in version 0.12.3.

My steps:

Prepare less build tool

npm install less less-plugin-autoprefix --save-dev

Add npm build script in package.json

"scripts": {
     "build-big-calendar-css": "lessc --autoprefix=\"ie >= 10, last 2 versions\" src/components/BigCalendar/styles.less ./node_modules/react-big-calendar/lib/css/react-big-calendar.css"
}

Copy drag drop style

Copy styles.less from https://github.com/intljusticemission/react-big-calendar/blob/master/src/addons/dragAndDrop/styles.less to
src/components/BigCalendar/addons/dragAndDrop folder.

Remove the first line @import '../../less/variables.less';

Create src/components/BigCalendar/styles.less which inclue

@import '../../../node_modules/react-big-calendar/lib/less/styles.less';
@import './addons/dragAndDrop/styles.less'; 

Rebuild react-big-calendar.css

npm run build-big-calendar-css

Even if we add missing dragAndDrop.less to npm release, I still need to go this way as my project using SASS not Less. Maybe adding a dragAndDrop.css to release build is helpful.