jQuery UI Widgets Forums Scheduler Event for Deleting Single Event in Recurring Events

This topic contains 4 replies, has 2 voices, and was last updated by  olegb 1 week ago.

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

  • olegb
    Participant

    I am using the following events to trigger logic to delete the records in the database.

    $("#scheduler").on('appointmentAdd', function(event) {
                   // do something to add
                });
                $("#scheduler").on('appointmentDelete', function(event) {
                    // do something to delete
                });
                $("#scheduler").on('appointmentChange', function(event) {
                    // do something to change

    …everything seems to work correctly and is firing as expected…BUT… when I delete a single occurrence in the recurring series, nothing fires. If I delete the entire recurring series, delete event fires properly. What am I missing? Is there some event-specific for it?

    Thanks in advance,

    Oleg


    Hristo
    Participant

    Hello Oleg,

    We have similar discussions in our forum that could be useful:
    https://www.jqwidgets.com/community/topic/issue-regarding-deleting-a-single-occurence-appointment-in-jqx-scheduler/
    I would like to suggest you bind to the click event of the Delete button and there you could add your logic to recognize which occurrence is deleted.
    Please, take a look at this demo.
    With the comparison of the records.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    olegb
    Participant

    Hi Hristo,

    Thanks for the reply (sorry for the delay on my part), but I’m still confused as to what you are suggesting with the demo link that you provided above. Are you suggesting that changing FROM and TO dates is the same as recurring events as it is shown in the demo example? There (in the demo example) each one of the multi-day appointments is a single event, which makes everything work. Again, is that the same-as “recurring”, and if so, maybe we should remove the recurring option? (not sure how?). I looked at all other examples and just can’t figure out how to detect that a single occurrence is being deleted and get AppointmentChange triggered (since that would be the change in the reccurencePattern, right?) to reflect the change.

    Thanks again for your help, sorry if I’m being a bit too thick with this,

    Oleg


    Hristo
    Participant

    Hello Oleg,

    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);
    
                // 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);
                $("#scheduler").jqxScheduler({
                    date: new $.jqx.date(2017, 11, 23),
                    width: getWidth("Scheduler"),
                    height: 600,
                    source: adapter,
                    ready: function() {
                        $("#scheduler").jqxScheduler("ensureAppointmentVisible", "id7");
                    },
                    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");
    
                        var deleteButton = fields.deleteButton;
                        deleteButton.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);
                                }
                            });
    
                        });
                    },
                    appointmentDataFields: {
                        from: "from",
                        to: "to",
                        id: "id",
                        description: "description",
                        location: "place",
                        style: "style",
                        subject: "subject",
                        resourceId: "calendar",
                        recurrencePattern: "recurrenceRule",
                        recurrenceException: "recurrenceException"
                    },
                    view: "monthView",
                    views: [
                        "dayView",
                        "weekView",
                        "monthView"
                    ]
                });
            });
        </script>
    </head>
    
    <body class="default">
        <div id="scheduler"></div>
    </body>
    
    </html>

    You could try to delete one occurrence and after that, you could find in the console one message with all deleted/missed occurrences.
    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    olegb
    Participant

    Hristo,

    Got it!!

    Makes sense – got it working now.

    Thanks again,
    Oleg

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

You must be logged in to reply to this topic.