onSelectSlot doesn't work in Mobile react Big calendar

Question

OnSelectSlot doesn't work in Mobile browsers. In Android devices, I debugged it with chrome browser but it did not work. In IOS devices I debugged with Safari browser that also did not work. In computer browsers it works smoothly when clicking on it but on mobile phones, it's not. Does anyone know a way to fix this?

Below is the code-------------------

           <BigCalendar
                selectable
                events={[
                    {
                        id: 0,
                        title: <div>{this.state.morningShiftAppointments + this.state.eveningShiftAppointments}<br/>
                            <div>{this.state.morningShiftAppointments}/{this.state.eveningShiftAppointments}</div>
                        </div>,
                        allDay: true,
                        start: new Date(this.state.year, this.state.month, this.state.date),
                        end: new Date(this.state.year, this.state.month, this.state.date),
                    }
                ]}
                views={['month']}
                onSelectSlot={this.onSelectSlot.bind(this)}
                dayPropGetter={customDayPropGetter}
                longPressThreshold={1}
                defaultDate={new Date()}
                eventPropGetter={
                    (event, start, end, isSelected) => {
                        let newStyle = {
                            backgroundColor: "lightgrey",
                            color: 'black',
                            borderRadius: "0px",
                            border: "none",
                            minWidth: "100%"
                        };
                        return {
                            className: "",
                            style: newStyle
                        };
                    }
                }
            />

"doesn't work" isn't an error message or problem statement. And "mobile" is not a single browser or platform. What debugging have you done? Are you able to trap any errors? Exactly what browsers/platforms/scenarios are affected? Also we can't see any of your code so, along with the almost complete lack of useful information it's pretty much impossible to suggest what the problem might be. Have a read of https://stackoverflow.com/help/how-to-ask and then try to update your question so people are able to help you. We'd like to help, but we can't. Thanks. — ADyson, Feb 07 '19 at 13:59
@ADyson Thank you for your support. I have edited the question. Hope you can get a better idea now. — Kusal Kithmal, Feb 08 '19 at 04:49
Again it would be useful to get some error info. When you debugged with Chrome did you get any console errors? Or did you try to step through the source code to see if it was taking the wrong path or something? — ADyson, Feb 08 '19 at 07:55
No any errors found there. Just the touch is not working as the mouse click. To select a cell we have to drag then it selects that current cell. That's not the expected way to select a cell, hope you have understood the problem? @ADyson — Kusal Kithmal, Feb 08 '19 at 09:16
I see. I don't know if big-calendar is actually based on the fullCalendar code, or merely inspired by it. I only know fullCalendar - I found your question via the fullCalendar tag. But in fullCalendar to select a slot on a touch device you have to hold down your finger a bit longer (then it can tell between a click and a select). See https://fullcalendar.io/docs/touch for details. Perhaps big-calendar has similar settings you can check out. — ADyson, Feb 08 '19 at 09:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188107/discussion-between-kusal-kithmal-and-adyson). — Kusal Kithmal, Feb 08 '19 at 10:54

score 6 · Answer 1 · answered Feb 27 '19 at 13:11

From the React-Big-Calendar documentation:

longPressThreshold Specifies the number of milliseconds the user must press and hold on the screen for a touch to be considered a "long press." Long presses are used for time slot selection on touch devices.

type: number default: 250

score 1 · Answer 2 · answered Jan 08 '20 at 14:17

Try to update react-big-calendar to the latest version by reinstalling it. I make these steps:

Uninstall with: npm uninstall --save react-big-calendar
Install with: npm install --save react-big-calendar
Then import it: import { Calendar, momentLocalizer } from 'react-big-calendar';
add Localizer if you need it const localizer = momentLocalizer(moment);
Then add localizer prop yo your component: <BigCalendar localizer={localizer} .../>
At the last step add longPressThreshold prop to your component (this allow onSelectSlot work on mobile devices): <BigCalendar longPressThreshold={10} .../>

onSelectSlot doesn't work in Mobile react Big calendar

2 Answers2