jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by Hristo 4 years, 12 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Issue regarding deleting a single occurence appointment in JQX scheduler Posts

June 11, 2020 at 7:06 am Issue regarding deleting a single occurence appointment in JQX scheduler #112177

kvr

Participant

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 #112183

Hristo

Participant

Hello 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 Hristov

jQWidgets team
https://www.jqwidgets.com

June 11, 2020 at 1:21 pm Issue regarding deleting a single occurence appointment in JQX scheduler #112184

kvr

Participant

Hristo, 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 #112207

Hristo

Participant

Hello kvr,

Thank you for these clarifications.
You need to use the appointmentChange event.
In that way, you will recognize when there is a change in the occurrences.
Also, you could try to bind to the click event of the “Delete” button.
To achieve this you could do in the as you use the editDialogOpen callback.
With the appointmentClick event you will recognize before that on which appointment you click.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

June 12, 2020 at 3:43 pm Issue regarding deleting a single occurence appointment in JQX scheduler #112213

kvr

Participant

Histro
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 #112233

Hristo

Participant

Hello kvr,

Thank you for these clarifications.
I would like to suggest you an approach with the getAppointments or getDataAppointments 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 Hristov

jQWidgets team
https://www.jqwidgets.com

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.