jQWidgets Forums

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

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

Author

Event for Deleting Single Event in Recurring Events Posts

March 21, 2021 at 6:46 pm Event for Deleting Single Event in Recurring Events #114923

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

March 22, 2021 at 1:24 pm Event for Deleting Single Event in Recurring Events #114927

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

April 5, 2021 at 6:20 pm Event for Deleting Single Event in Recurring Events #115022

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

April 6, 2021 at 7:23 am Event for Deleting Single Event in Recurring Events #115028

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

April 6, 2021 at 4:58 pm Event for Deleting Single Event in Recurring Events #115037

olegb

Participant

Hristo,

Got it!!

Makes sense – got it working now.

Thanks again,
Oleg

Author

Posts

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

You must be logged in to reply to this topic.