jQWidgets Forums
jQuery UI Widgets › Forums › Angular › Issue regarding deleting a single occurence appointment in JQX scheduler
This topic contains 5 replies, has 2 voices, and was last updated by Hristo 4 years, 12 months ago.
-
Author
-
June 11, 2020 at 7:06 am Issue regarding deleting a single occurence appointment in JQX scheduler #112177
I am using JQX scheduler in my angular 7 projects. When a user cancels a single occurrence in a recurrence appointment I need to save those appointment details in a local database. if user deletes an entire series we are able to raise appointmentdelete event, from where we are saving it to DB. but if a user deletes a single occurrence irrespective of series no event is raised. Can you help me with this
June 11, 2020 at 11:32 am Issue regarding deleting a single occurence appointment in JQX scheduler #112183Hello kvr,
I would like to mention that we have a similar discussion in our forum.
For this case, you could research for a similar approach in the jqxScheduler section (not so specific as for “Angular” especially).
Please, take a look at this topic, for example:
https://www.jqwidgets.com/community/topic/editdelete-occurrence-of-a-recurring-appointment/
I hope this will help.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comJune 11, 2020 at 1:21 pm Issue regarding deleting a single occurence appointment in JQX scheduler #112184Hristo, Thank you for the quick response. I tried to catch the deletion of the appointment using the onAppointmentDelete event. It is working fine in the case of deleting the entire series, not for the single occurrence.
HTML:
<jqxScheduler *ngIf=”isVisisble” #scheduler
[width]=”getWidth()” [height]=”350″
[date]=”date”
[source]=”dataAdapter”
[showLegend]=”true”
[view]=”view”
[views]=”views”
[editDialogCreate]=”editDialogCreate”
[appointmentDataFields]=”appointmentDataFields”
(onAppointmentAdd)=”appointmentAdd($event)”
(onAppointmentChange)=”appointmentChange($event)”
(onAppointmentDelete)=”appointmentDelete($event)”
(onViewChange)=”ViewChange($event)”
(onEditDialogOpen)=”EditDialogOpen($event)”
(onEditDialogClose)=”EditDialogClose($event)”>
</jqxScheduler>Component:
public appointmentDelete = (event) => {
//code for saving deleted appointments
//this method is hitting when I delete the entire series not for the single occurence}
June 12, 2020 at 9:37 am Issue regarding deleting a single occurence appointment in JQX scheduler #112207Hello kvr,
Thank you for these clarifications.
You need to use theappointmentChange
event.
In that way, you will recognize when there is a change in the occurrences.
Also, you could try to bind to theclick
event of the “Delete” button.
To achieve this you could do in the as you use theeditDialogOpen
callback.
With theappointmentClick
event you will recognize before that on which appointment you click.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comJune 12, 2020 at 3:43 pm Issue regarding deleting a single occurence appointment in JQX scheduler #112213Histro
Thank you for the quick response. I have tried the ways u mentioned in our previous conversation.1. Using appointmentChange event
When I tried to delete a single occurrence from a series the appointmentChange is not fired.2. Binding the click event of the “Delete” button. To achieve this I used the editDialogOpen callback.
With the appointmentClick event I used to recognize before that on which appointment you click.In this scenario when I click on the single occurrence, if I try to debug the event parameter, The appointment in event argument belongs to the entire series, not to the single occurrence.
Let consider a scenario. If we have a weekly schedule running from Monday to Saturday. and deleted a schedule(single recurrence) on Thursday.
On database side, I am saving the entire schedules info(series and not recurring schedules) into one table and deleted or updated schedules into another table. So I need to save the Thursdays info into the exception table.June 15, 2020 at 12:28 pm Issue regarding deleting a single occurence appointment in JQX scheduler #112233Hello kvr,
Thank you for these clarifications.
I would like to suggest you an approach with thegetAppointments
orgetDataAppointments
methods.
You could suitable method for you.
Please, take a look at this example:<!DOCTYPE html> <html lang="en"> <head> <title id="Description">jqxScheduler Recurring appointments example </title> <meta name="description" content="Javascript Scheduler Recurring Appointments example" /> <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdate.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxscheduler.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxscheduler.api.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.de-DE.js"></script> <script type="text/javascript" src="../../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var appointments = new Array(); var appointment1 = { id: "id4", description: "", style: "#AA4643", location: "", subject: "New Projects Planning", calendar: "Room 2", from: new Date(2017, 10, 22, 8, 0, 0), to: new Date(2017, 10, 22, 13, 0, 0) } var appointment2 = { id: "id5", description: "", style: "#89A54E", location: "", subject: "Interview with James", calendar: "Room 1", from: new Date(2017, 10, 25, 13, 0, 0), to: new Date(2017, 10, 25, 15, 0, 0) } var appointment3 = { id: "id6", description: "", style: "#71588F", location: "", subject: "Interview with Nancy", calendar: "Room 2", from: new Date(2017, 10, 26, 14, 0, 0), to: new Date(2017, 10, 26, 16, 0, 0) } var appointment4 = { id: "id7", description: "", style: "#307DD7", location: "", subject: "Daily Meeting", calendar: "Room 1", recurrenceRule: "FREQ=DAILY;", recurrenceException: "2017-11-24 09:00:00,2017-11-26 12:00:00", from: new Date(2017, 10, 23, 10, 0, 0), to: new Date(2017, 10, 23, 11, 0, 0) }; // appointments.push(appointment1); // appointments.push(appointment2); // appointments.push(appointment3); appointments.push(appointment4); var appointment5 = { id: "id8", description: "", style: "#C0CDD7", location: "", subject: "Weekly Meeting", calendar: "Room 2", recurrenceRule: "FREQ=WEEKLY;BYDAY=MO,WE", // recurrenceException: "2017-11-24 09:00:00,2017-11-26 12:00:00", from: new Date(2017, 10, 20, 11, 0, 0), to: new Date(2017, 10, 20, 12, 0, 0) }; appointments.push(appointment5); // prepare the data var source = { dataType: "array", dataFields: [ { name: "id", type: "string" }, { name: "description", type: "string" }, { name: "location", type: "string" }, { name: "subject", type: "string" }, { name: "calendar", type: "string" }, { name: "recurrenceRule", type: "string" }, { name: "recurrenceException", type: "string" }, { name: "style", type: "string" }, { name: "from", type: "date" }, { name: "to", type: "date" } ], id: "id", localData: appointments }; var adapter = new $.jqx.dataAdapter(source); var isFirstCreation = true; $("#scheduler").jqxScheduler({ date: new $.jqx.date(2017, 11, 23), width: 750, height: 600, source: adapter, ready: function() { $("#scheduler").jqxScheduler("ensureAppointmentVisible", "id7"); }, appointmentDataFields: { from: "from", to: "to", id: "id", description: "description", location: "place", style: "style", subject: "subject", resourceId: "calendar", recurrencePattern: "recurrenceRule", recurrenceException: "recurrenceException" }, editDialogCreate: function (dialog, fields, editAppointment) { // hide repeat option fields.repeatContainer.hide(); // hide status option fields.statusContainer.hide(); // hide timeZone option fields.timeZoneContainer.hide(); // hide color option fields.colorContainer.hide(); fields.subjectLabel.html("Title"); fields.locationLabel.html("Where"); fields.fromLabel.html("Start"); fields.toLabel.html("End"); fields.resourceLabel.html("Calendar"); if (isFirstCreation) { isFirstCreation = false; fields.buttons.children; fields.buttons[0].children[1].addEventListener("click", function () { var appointments = $("#scheduler").jqxScheduler("getAppointments"); var appointmentsData = $("#scheduler").jqxScheduler("getDataAppointments"); appointments.forEach((element, index) => { if (element.recurrenceException) { console.log("index:", index, "exception:", element.recurrenceException, "exception as in DataAdapter:", appointmentsData[index].recurrenceException); } }); }); } }, editDialogOpen: function (dialog, fields, editAppointment) { }, editDialogClose: function (dialog, fields, editAppointment) { }, view: "weekView", views: [ "dayView", "weekView", "monthView" ] }); }); </script> </head> <body> <div id="scheduler"></div> </body> </html>
Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.