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 1 month, 3 weeks ago.

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

  • 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


    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


    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

    }


    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


    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.

    • This reply was modified 1 month, 3 weeks ago by  kvr.
    • This reply was modified 1 month, 3 weeks ago by  kvr.

    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

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

You must be logged in to reply to this topic.