calling a function and storing the particular event in an array upon saving using calendar ui

i want to call a function upon saving an event in calendar ui and further storing the event in an array..

how its possible

15 Replies

BS Balasubramanian Sattanathan Syncfusion Team May 12, 2020 11:01 AM UTC

Hi Shubham sharma, 
 
Greetings from Syncfusion Support. 
 
We have validated your requirement “i want to call a function upon saving an event in calendar ui and further storing the event in an array.” at our side and we suspect that your need is to know the event when the appointment is saving in the DOM. It can be achieved by making use of below highlighted code snippet. 
 
onEventRendered(args: EventRenderedArgs): void { 
  console.log("It will triggered before each of the event getting rendered on the scheduler user interface."); 
} 
onActionBegin(args: ActionEventArgs): void { 
  if (args.requestType === "eventCreate") { 
    console.log("It will triggered when new event is rendered on the scheduler user interface."); 
  } 
} 
 
 
Kindly try the above sample and let us know if you need further assistance. 
 
Regards, 
Balasubramanian S 



SS shubham sharma May 12, 2020 11:41 AM UTC

Balasubramanian Sattanathan thank you  so much ..that was so kind of you..
Can you tell me a bit more operations like 
1.when i delete an event
2.when i update an event
Actually i am really unfamiliar with the event handlers and args.requestTypes 
and i also want the exact event which is  being altered and print in console.

Secondly in my project i want that even if i have a recurring event like 10am-9pm everyday.
i want to get store the events in separate date forms.if you get what i am trying to say.

like a function which returns me next 7 days schedule(in 7 separate objects in form of an array) if any
please help me with it.. i am really stuck



SS shubham sharma May 13, 2020 08:28 AM UTC

Hey can you help me?


BS Balasubramanian Sattanathan Syncfusion Team May 13, 2020 11:20 AM UTC

Hi Shubham Sharma, 

Thanks for the update. 

We have validated your queries at our side and please find the response for it. 

Query 1: 
The below code will be triggered after deleting the appointment from the Scheduler user interface. 
 
if (args.requestType === "eventRemove") { 
  console.log("This will triggered after delete the appointments"); 
} 
 
Query 2: 
The below code will be triggered after editing the appointment from the Scheduler user interface. 
 
if (args.requestType === "eventChange") { 
  console.log("This will triggered after edit the appointments."); 
} 
 
Query 3: 
We suspect that your requirement is need to find the next/prev dates when we click the navigation buttons. It can be done by making use of the actionComplete event of dataNavigate requestType like the below code snippet. 
 
onActionComplete(args: ActionEventArgs): void { 
  if (args.requestType === "dateNavigate") { 
    console.log("This will triggered after click the next/prev button"); 
    console.log(this.scheduleObj.getCurrentViewDates()) 
  } 
} 


Kindly try the above solution and let us know if you need further assistance. 

Regards, 
Balasubramanian S


SS shubham sharma May 13, 2020 11:31 AM UTC

thanks for solving query 1,2 
in query 3 i meant that
suppose i created an event from 1 pm to 3pm from ui and which is repeating daily or weekly(or any other repeatition option available)
i want a function which takes date as a parameter and returns me that day's appointment.


SS shubham sharma May 13, 2020 06:21 PM UTC

 i found a problem in the code while creating an event .. suppose there are no appointments  in the calendar. whenever i add the first appointment using calendar ..it is added to the array created at index 0.. 
so the problem is when i try to access this element i can't get it ..until the total events are greater than 1.

so to access the element inserted at position 0 the total elements must be greater than 1


SS shubham sharma May 14, 2020 10:48 AM UTC

hey can you share your email address so that we can contact each other better and faster.


BS Balasubramanian Sattanathan Syncfusion Team May 14, 2020 04:30 PM UTC

Hi Shubham sharma, 

Thanks for the update. 

We have validated your “query 3” at our side and prepared a sample based on that using the getEvents public method like the below code snippet. 

get(): void { 
  let currentViewDates: Date[] = this.scheduleObj.getCurrentViewDates() as Date[]; 
  let startDate: Date = currentViewDates[4]; 
  let endDate: Date = currentViewDates[7]; 
  let filteredEvents: Object[] = this.scheduleObj.getEvents(startDate, endDate, true); 
  console.log(filteredEvents); 
  this.getButtonObj.element.setAttribute('disabled', 'true'); 
} 


Please let us know if you need further assistance. 

Note:  
We will address your queries as soon as possible and update the response in incident itself. 

Regards, 
Balasubramanian S 



SS shubham sharma May 15, 2020 10:59 AM UTC

I am not able to access recurrence Exception string when i update an event which is already in recurrence 

Can you help me with it?


SS shubham sharma May 16, 2020 08:56 PM UTC

in my program what i am doing is whenever there is a OnActionBegin type of action like create ,update,delete as you helped me above to do so

    onActionBegin(argsActionEventArgs): void {
        var schedule;
        //when an event is created
        if (args.requestType === 'eventCreate') {
            schedule = args.addedRecords;
            this.addEvents(this.copyAppointment(schedule[0]));
            console.log('event created !');
            console.log('available schedules ->');
            console.log(this.availableSchedules);
        } else if (args.requestType === 'eventChange') {
            // when an event is changed
            schedule = args.changedRecords;
            if (schedule[0].Guid != null) {
                // if an recurrence exception is created
                console.log('it is a recurrence exception with guid->' + schedule[0].Guid);
                //this.addEvents(this.copyAppointment(schedule[0]));
                this.updateEvents(this.copyAppointment(schedule[0]));
                console.log('event updated !');
                console.log('available schedules ->');
                console.log(this.availableSchedules);
            } else {
                //normal updation
                this.updateEvents(this.copyAppointment(schedule[0]));
                console.log('event updated !');
                console.log('available schedules ->');
                console.log(this.availableSchedules);
            }
        } else if (args.requestType === 'eventRemove') {
            // when an event is removed
            schedule = args.deletedRecords;
            this.deleteEvents(this.copyAppointment(schedule[0]));
            console.log('event deleted !');
            console.log('available schedules ->');
            console.log(this.availableSchedules);
        }
    }
}

i have created a custom type that is called ScheduleData.ts

export class scheduleData {
    public Idnumber;
    public Subjectstring;
    public commentsstring;
    public StartTimestring;
    public EndTimestring;
    public IsAllDayboolean;
    public RecurrenceRulestring;
    public RecurrenceExceptionstring;
    public IsRecurrenceboolean;
    public Guidstring;
}

so whenever there is change i create an object of ScheduleData and copy all the changed or added or records  into it as you can see

    //for copying the record
copyAppointment(schedule) {
        var appointment = new scheduleData();
        appointment.Id = schedule.Id;
        appointment.Subject = schedule.Subject;
        appointment.StartTime = schedule.StartTime.toString();
        appointment.EndTime = schedule.EndTime.toString();
        appointment.IsAllDay = schedule.IsAllDay;
        appointment.RecurrenceRule = schedule.RecurrenceRule;
        appointment.RecurrenceException = schedule.RecurrenceException;
        appointment.Guid = schedule.Guid;

        if (schedule.RecurrenceRule != null && schedule.Guid == null) {
            console.log('it is a recurrent event');
            appointment.IsRecurrence = true;
        } else if (schedule.RecurrenceRule != null && schedule.Guid != null) {
            console.log('it is not a recurrent event');
            appointment.IsRecurrence = false;
        } else if (schedule.RecurrenceRule == null) {
            console.log('it is not a recurrent event');
            appointment.IsRecurrence = false;
        }
        return appointment;
    }

after that i have some functions that performs the corresponding action to push it in another array which is of type ScheduleData

// for adding events into calendar schedules
    addEvents(appointmentscheduleData) {
        this.availableSchedules.push(appointment);
        this.tutorAvailabilitySchedule.allAvailabilitySchedule = this.availableSchedules;
        this.httpService.saveScheduleData(this.tutorAvailabilitySchedule).subscribe((res=> {});
    }
    // for updating events into calendar schedules
    updateEvents(newAppointmentscheduleData) {
        console.log(newAppointment);
        let updateIndex = this.availableSchedules.findIndex((obj=> obj.Id == newAppointment.Id);
        if (updateIndex == -1) {
            console.log('item not present');
            // this.addEvents(newAppointment);
            this.availableSchedules.push(newAppointment);
        } else {
            this.availableSchedules[updateIndex] = newAppointment;
        }
        this.tutorAvailabilitySchedule.allAvailabilitySchedule = this.availableSchedules;
        this.httpService.saveScheduleData(this.tutorAvailabilitySchedule).subscribe((res=> {
            console.log(res);
        });
    }
    //for deleting events into calendar schedules
    deleteEvents(appointmentscheduleData) {
        let deleteIndex = this.availableSchedules.findIndex((obj=> obj.Id == appointment.Id);
        this.availableSchedules.splice(deleteIndex1);
        this.tutorAvailabilitySchedule.allAvailabilitySchedule = this.availableSchedules;
        this.httpService.saveScheduleData(this.tutorAvailabilitySchedule).subscribe((res=> {
            console.log(res);
        });
    }
Now in these functions i send this array to backend which is in spring boot(java) and save it to database .
whenever i login again i retrieve this schedules Array which is of type scheduleData

the problem is : 
whenever i create a recurrent event which is set to daily and interval=1
i save it in the database like the same process above.
it works fine when i login again and view it.
but the problem arises when i edit an event of a particular date which is part of recurrence and extends its duration it displays fine
before login:

after login:

 after login it displays the edits the whole chain and displays parent event along with edited event


BS Balasubramanian Sattanathan Syncfusion Team May 18, 2020 11:27 AM UTC

Hi Shubham Sharma, 

Thanks for the update. 
 
We have tried to replicate your reported problem “but the problem arises when i edit an event of a particular date which is part of recurrence and extends its duration it displays fine” at our side. But we are unable to replicate it.  
 
 
Kindly share us the below details to serve you better. 
  • Replicate your problem in the above sample or
  • Share a sample illustrating the problem which would help us to proceed further or
  • Share your convenient timing, so as to look onto your reported all problem on your machine directly. We will make every effort to have this scheduled on a date and time of your convenience to resolve it quickly
 
Regards, 
Balasubramanian S 



SS shubham sharma May 20, 2020 01:18 PM UTC

can you tell me a way such that whenever i create an event in calendar its subject is automatically set to "My Availability"


VM Vengatesh Maniraj Syncfusion Team May 21, 2020 07:48 AM UTC

Hi Shubham, 
 
Based on your requirement, we have prepared the sample to change the Subject value as “My Availability” while creating and updating the events. 
 
onActionBegin(args: ActionEventArgs): void { 
        if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') { 
            let data: { [key: string]: Object }; 
            if (args.requestType === 'eventCreate') { 
                data = <{ [key: string]: Object }>args.data[0]; 
            } else if (args.requestType === 'eventChange') { 
                data = <{ [key: string]: Object }>args.data; 
            } 
            if(data.Subject === "Add title"){ 
              data.Subject = "My Availability"; 
            } 
        } 
    } 
  

Regards, 
Vengatesh 



SS shubham sharma May 21, 2020 10:16 AM UTC

Thanks venkatesh .. but actulally i wanted that in title field it gets autofilled by "My availability" thats exactly what i want


VM Vengatesh Maniraj Syncfusion Team May 22, 2020 06:22 AM UTC

Hi Shubham, 

Thanks for the update. 

We have validated your query and we suspect that your requirement is to change the placeholder for Subject instead of Add Title. We can achieve this by changing the static text of the scheduler like below. 

L10n.load({ 
    'en-US': { 
        'schedule': { 
            'addTitle': 'My Availability', 
        } 
    } 
}); 


For more reference, please visit our UG documentation for changing the static text. 


Regards, 
Vengatesh 


Loader.
Up arrow icon