Our powerful JS Calendar component


Post by smalchow »

Hi!
We are currently working on customizing the event editor to fit our needs.
One use case we need to provide is to reset the event's duration to its initial duration (already saved in our event model) within the event editor. To do so, we want to provide an additional Button underneath the Datetime Inputs. When clicking the button, we want to reset the values of the endDate and -Time in order to fit the initial duration. The problem right now is that we can't access the eventRecord within the eventEdit to get the initial_duration. (When customizing the context menu of an event this was possible, so that we already implemented the reset functionality there). Can you please help us out? Is there a way of accessing the eventRecord within the evenEdit? Here is our current draft code:

startTimeField: {
                            weight: 40,
                            editable: true,
                            step: '5m',
                            picker: {
                                seconds: true
                            }

                    },
                    endTimeField: {
                        weight: 50,
                        editable: true,
                        type: 'time',
                        step: '5m',
                        picker: {
                            seconds: true
                        }
                    },
                    resetDurationButton: {
                        type: 'button',
                        icon: 'b-fa-arrow-left',
                        weight: 60,
                        scope: this,
                        text: 'Fit content duration',
                        onClick: 'up.resetDurationInEditor'
                    }
                    .
                    .
                    .
                    resetDurationInEditor({eventRecord}) {
            // calculate endDate and endTime by current startDate and startTime considering eventRecord.initial_duration 
            document.getElementById('b-timefield-2-input').value = endTime;
            document.getElementById('b-datefield-2-input').value = endDate;
        }

In the context menu we did it like:

resetDuration({ eventRecord }) {
                eventRecord.endDate = new Date((eventRecord.startDate.getTime()) + eventRecord.initial_duration * 1000);
         
}

Furthermore, we want to add a warning in case the user edits the dates, so that users are aware of looping content when the durations differ from each other. Is there a standard way to add validations to your input fields?

Hopefully, you can help me out!


Post by marcio »

Hey smalchow,

You can get the register in the context that you're using with the following snippet:

resetDurationInEditor({ source }) {
        const { endTime, endDate } = source.parent.record;
        // calculate endDate and endTime by current startDate and startTime considering eventRecord.initial_duration 
        document.getElementById('b-timefield-2-input').value = endTime;
        document.getElementById('b-datefield-2-input').value = endDate;
    }

Also, right now we're very customizable regarding the validation of the field, the standard way for custom validation is to listen to input event, then do the validation and use the setError or clearErrors method, like the snippet:

listeners : {
// This a an event
 // It will fire every time a user type into this name field
	input(event) {
		const { value, source : textField } = event;
		if (name !== currentName) {
			 // clearing the error if it doesn't match any task name in the store
			textField.clearError()
		}
		if (name === currentName && currentName !== loadedTaskName) {
			// setting error if it matches any task name
			textField.setError('This task name already exists');
		}
	}
}

https://bryntum.com/products/gantt/docs/api/Core/widget/Field#function-setError
https://bryntum.com/products/gantt/docs/api/Core/widget/Field#function-clearError

Best regards,
Márcio


Post by Animal »

Using Ids is not reliable because they are generated and may differ as the app changes and uses different numbers of widgets in different order.

    resetDurationInEditor({ source }) {
        const { endTime, endDate } = source.parent.record;
        this.widgetMap.endTimeField.value = endTime;
        this.widgetMap.endDateField.value = endDate;
    }

https://bryntum.com/products/gantt/docs/api/Core/widget/Container#property-widgetMap

The property names in an items configuration are the ref of the child widget, and these are accessible by that name in a parent's widgetMap


Post by smalchow »

Thank you very much! This helped a lot! I managed to implement the reset functionality with some adoptions to your code snippets. The validation also worked that way, but then I noticed, that errors prevent users from saving. Instead, I would need something like a warning, which appears to inform users about these critical changes but does not prevent them from saving. I'll implement that using the displayField widget.

Thank's a lot!


Post by marcio »

Go for it smalchow! If you need assistance from us, feel free to send us a message in the forums! :)

Best regards,
Márcio


Post Reply