[REACT] Show startTime of an event instead of endTime position

[sbprot]

0.png (24.26 KiB) Viewed 185 times

Hello,

When I drag an event, the endTime of this one appears in the bottom right corner (as shown in the picture).
Is there any way to show the startTime instead at that position ?
I know you can show the startTime in the top left corner but I want it to be at the end.

If it's not possible, how can I hide the endTime ? I have hide the startTime with Calendar.widget.DayView#config-showTime<.span> but it works only on the startTime.

Thanks for the help !

[tasnim]

Hi,

You could achieve it with the eventRenderer https://bryntum.com/products/calendar/docs/api/Calendar/widget/DayView#config-eventRenderer

    modes : {
        day : {
            showTime : false,
            eventRenderer(props) {
                return {
                    tag      : 'div',
                    children : [
                        {
                            tag   : 'div',
                            class : 'b-cal-event-header',
                            text  : props.eventRecord.name
                        },
                        {
                            tag   : 'div',
                            class : 'b-cal-event-footer',
                            style : 'display: inline',
                            text  : DateHelper.format(props.eventRecord.startDate, 'HH:mm')
                        }
                    ]
                };
            }
        }
    },

Best regards,
Tasnim

[sbprot]

Hi tasnim,

Thanks for your help but what I want is to show the startTime only when I drag the event and not all the time (same behavior as endTime by default)

[tasnim]

Hi,

Here is how you could achieve it

First set https://bryntum.com/products/calendar/docs/api/Calendar/feature/CalendarDrag#config-footer to null remove the default endDate label that shows while you drag the event

Now you could use the eventRenderer with a condition

modes : {
    day : {
        showTime : false,
        eventRenderer(props) {
            const calendar = props.view.up('calendar');
            if (props.eventRecord === calendar.features.drag.eventRecord) {
                console.log('props');
            }
            return {
                tag      : 'div',
                children : [
                    {
                        tag   : 'div',
                        class : 'b-cal-event-header',
                        text  : props.eventRecord.name
                    },
                    {
                        tag   : 'div',
                        class : 'b-cal-event-footer',
                        style : props.eventRecord === calendar.features.drag.eventRecord ? 'display: inline' : 'display: none',
                        text  : DateHelper.format(props.eventRecord.startDate, 'hh:mm A')
                    }
                ]
            };
        }
    }
},

And now you should be good to go

Here is a video showcase of it

msedge_rN5icqdstT.mp4

(412.02 KiB) Downloaded 17 times

Good Luck ,
Tasnim

[sbprot]

Hey there, and thanks for your help, it worked!

I wanted to mention another issue I'm facing, hoping maybe you can assist with it too.

When I set the time for one of my events to a time "between slots in my calendar" (for example, my slots are every 15 minutes and I set my event time at 14:07), and then I drag an event to move it, I would like it to automatically snap back to the 15-minute slots.

I'm trying to adjust the event time during the drag, but it's not behaving as smoothly as I'd hoped. I'm not sure if I've made my explanation clear, so I've attached a video to illustrate what I mean. Feel free to ask for more details!

Thanks a lot!

2024-03-22.mp4

(2.63 MiB) Downloaded 15 times

[saki]

@sbprot, create please a new thread for the above issue so that we can keep it separate.