Our powerful JS Calendar component


Post by deal magik »

When I open my app on mobile browser, the calendar does not let me create an event. The Event popup widget does not come up.


Post by mats »

Try long pressing a time slot?


Post by Animal »

Can you provide more info?

What device type and browser and OS version?

What Calendar version?

What UI gesture are you making to request the event add?

Is there s JS error thrown when you do that?

What does the source code of your app look like?


Post by deal magik »

I am running my web app on Safari on iPhone XR.
Calendar version is 5.3.0.
I tries long press and double tap on the cell. Nothing happens.
Also, for an existing event, when I long press or double tap, nothing happens there too.
I do not see any JS errors.

This is how my Calendar component looks like

<BryntumCalendar
                        ref={this.calendar}
                        project={this.project}
                        events={events}
                        resources={resources}
                        features={features}
                        {...calendarConfig}
                        tbar={tbar}
                        modes={modes}
                        onAfterEventSave={this.onAfterEventSave}
                        onDragMoveEnd={this.onDragMoveEnd}
                        onDragResizeEnd={this.onDragResizeEnd}
                        onBeforeDragMoveEnd={this.onBeforeDragMoveEnd}
                        onBeforeDragResizeEnd={this.onBeforeDragResizeEnd}
                        onRefresh={this.onRefresh}
                        onBeforeEventEditShow={this.onBeforeEventEditShow}
                        // onBeforeEventSave={this.onBeforeEventSave}
                        crudManager={
                            {
                                eventStore: {
                                    listeners: {
                                        beforeRemove: (data) => {

                                        let { records } = data
                                        let { projectData } = this.state;
                                        let eventsData = records && Array.isArray(records) && records.length > 0 && records[0].data

                                        let condition = false;

                                        let recordToDelete = projectData.events.filter(event => { return ((eventsData.id == event.id || eventsData.id == event.origId) && eventsData.resourceId == event.resourceId) })[0]
                                        console.log("recordToDelete", recordToDelete)

                                        if (recordToDelete && recordToDelete.resourceId && recordToDelete.name && recordToDelete.startDate && recordToDelete.endDate) {
                                            this.setState({ showRemoveEventModal: true, shouldDelete: false, recordToDelete })
                                        } else {
                                            this.setState({ showRemoveEventModal: false, shouldDelete: false })
                                            condition = true;
                                        }

                                        if (!condition) {
                                            return false
                                        }
                                    }
                                }
                            }
                        }
                    }
                />

Post by Animal »

What about when you run the online examples on your phone?

Because this works on my Phone.

Except that the floating event editor does not work well. You should probably configure it to be maximized on touch devices

features : {
    eventEdit : 
        editorConfig : {
            maximized : <true if mobile - you detect the platform>
        }
    }
}
````

Post by deal magik »

Hi,
If I run the examples on my iPhone XR on safari or chrome browser, the calendar features are not working.
The examples of Calendar on Bryntum website also does not work.
See attached video taken from my phone.

Attachments
video1928948365.mp4
(727.18 KiB) Downloaded 30 times

Post by Animal »

When you say "the calendar features are not working". What does this mean? I can't really get any information out of the video.

When I run that example from the Bryntum website on my iPhone 12 on iOS 16.4.1 it works.

I can navigate in time, select modes, show the event tooltip, show the event context menu and start the event editor.


Post by deal magik »

I guess the issue is with the device.
I am using iPhone XR. When I tried on other devices like iPhone 13 Pro and iPhone SE, it worked.


Post by deal magik »

I see another issue on the iPhone.
The AM and PM cannot be changed for an event.
The bryntum calendar example is also not working on the mobile device on Chrome and Safari.
I have used iPhone 13 Pro and iOs 16.4


Post by alex.l »

I've reproduce this problem, thanks for the report. Here is a link to track the status https://github.com/bryntum/support/issues/6866
You can subscribe on ticket updates to be notified when it fixed.

All the best,
Alex


Post Reply