Our pure JavaScript Scheduler component


Post by tatev »

Hi Bryntum team, i use schedulerConfig for and have add event button which opens event edit modal, but i want to create edit for events , and should change the fields and functions, how can i differentiate adding from editing ? please send me zip examples or demo examples, or code , for me to clearly understand how to make that ?


Post by ghulam.ghous »

Hi Tatev,

Can you please elaborate your use case here? If you do not want to open the edit model on adding an event, you can simply use https://bryntum.com/products/scheduler/docs/api/Scheduler/data/EventStore#function-add. This will add the event and does not open a model. Here's a code snippet on how you can do it:


tbar : [
    {
        type     : 'button',
        icon     : 'b-icon-add',
        text     : 'Add new event',
        onAction : () => {
            const resource  = scheduler.resourceStore.first;

            const event = new Task({
                resourceId   : resource.id,
                startDate    : scheduler.startDate,
                duration     : 1,
                durationUnit : 'h',
                name         : 'New task'
            });
            scheduler.eventStore.add(event);
        }
    },
    ]
    

You can try adding this code in this example online https://bryntum.com/products/scheduler/examples/eventeditor-combos/ and test it.

About customizing the event edit model, please see this guide here: https://bryntum.com/products/scheduler/docs/guide/Scheduler/customization/eventedit/
https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/EventEdit/

We have an online example here:
https://bryntum.com/products/scheduler/examples/eventeditor/

To download examples etc please see this guide here:
https://bryntum.com/products/scheduler/docs/guide/Scheduler/download

how can i differentiate adding from editing?

What do you mean by this? We show a event edit modal after adding an event, to allow user to make any adjustments. But as I have shown above you can avoid showing this model by simply adding an event programatically.

Regards,
Ghous


Post by tatev »

  beforeEventEditShow({ eventRecord, editor }) {
            editor.title = eventRecord.eventStore ? `Edit ${eventRecord.eventType || ''}` : 'Add new event';
        }

ths is not working for me,
i add a new event by callig this

                schedulerRef.current.schedulerInstance.editEvent(eventRecord);

for both cases it shows edit


Post by tatev »

.....................

Last edited by tatev on Mon Feb 26, 2024 4:19 pm, edited 1 time in total.

Post by tatev »

hhhhhhhhhhhhhhhhh

Last edited by tatev on Mon Feb 26, 2024 4:19 pm, edited 1 time in total.

Post by tasnim »

Hi,

I'm a bit confused about your use case.

To clarify,
Do you want to show the event editor only for existing events?
And you don't want to show event editor while creating an event?

Am I right?

I apologize If I don't understand your description, please rephrase your use case.

Best of luck :),
Tasnim


Post by tatev »

i want when to click add modal opened with it corresponding header, when edit , then in header should be edit not add


Post by ghulam.ghous »

Please use this event beforeEventEdit to change title. https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/EventEdit#event-beforeEventEdit. But you will have to add some state that you should set to true while opening the model for add event and false for when opening it for edit. And based on that state you can set the title:

a simple code snippet for the event is:

        beforeEventEdit(data) {
            data.eventEdit.editorConfig.title = 'Add event';
        }

Regards,
Ghous


Post Reply