CODEWITHSUNDEEP
javascriptangulartypescriptkendo-ui-angular2kendo-scheduler
blackRose
blackRose

Reputation: 180

Kendo Scheduler for Angular - on button click show create event form

I'm implementing kendo scheduler for Angular in our app. My problem is that, I want to have on the toolbar button which allows user to add new event, normally by default user needs to click twice on calendar cell and then the form shows. How to achieve it? I was trying to add new event by dispatching keydown event when clicking on "add" button, but it doesn't work (normally when I have focus in kendo-scheduler and press "c" on keyboard form appears. My second idea was to call on component "addEvent" which is event emitter in kendo library, but it only catches not actual form values, but values assigned during creation of event. Any ideas?

My code to add new event:

addNewEvent(component: SchedulerComponent) {
    const scheduler = document.getElementsByTagName('kendo-scheduler')[0];

    scheduler.dispatchEvent(
        new KeyboardEvent(
            'keydown', {key: 'c'} //first solution
        )
    );

    component.addEvent({//second solution
        start: new Date(), //when saving only start and end fields are filled, but only with those values, not with those selected on form
        end: new Date(),
    });
}

Upvotes: 0

Views: 787

Answers (1)

blackRose
blackRose

Reputation: 180

the answer was the upgraded second solution, it's necessary to create and assign new formGroup:

this.form = this.formBuilder.group({
    taskId: 0,
    title: '',
    description: '',
    start: new Date(),
    end: new Date(),
    startTimezone: null,
    endTimezone: null,
    isAllDay: false,
    recurrenceRule: null,
    recurrenceException: null
});

component.addEvent(this.form);

Upvotes: 0

Related Questions