jQWidgets jqxScheduler appointmentDelete Event

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxScheduler widget is used to show a set of appointments in a day, week, month, timeline day, timeline week as well as timeline month views.

The appointmentDelete event is activated whenever an appointment of the displayed jqxScheduler is deleted.

Syntax:

$('#Selector').on('appointmentDelete', function (event) { });

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscheduler.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscheduler.api.js"></script>

Example: The below example illustrates the jqxScheduler appointmentDelete event in jQWidgets.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href=
        "jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" 
        src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" 
        src="jqwidgets/jqxscheduler.api.js"></script>
</head>

<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>

        <h3>jQWidgets jqxScheduler appointmentDelete event</h3>

        <div id="jqxs"></div>
        <br>

        <div id="log"></div>
    </center>

    <script type="text/javascript">
        $(document).ready(function () {
            var onlineClasses = new Array();
            var day1 = {
                i: "1",
                Topic: "C functions",
                schedule: 'room_no. 1',
                begin: new Date(2021, 09, 13, 11),
                final: new Date(2021, 09, 13, 12)
            }
            var day2 = {
                i: "2",
                Topic: "C++",
                schedule: 'room_no. 2',
                begin: new Date(2021, 09, 14, 11),
                final: new Date(2021, 09, 14, 12)
            }
            var day3 = {
                i: "3",
                Topic: "Java",
                schedule: 'room_no. 3',
                begin: new Date(2021, 09, 15, 10),
                final: new Date(2021, 09, 15, 14)
            }
            var day4 = {
                i: "4",
                Topic: "Scala library functions",
                schedule: 'room_no. 1',
                begin: new Date(2021, 09, 16, 11),
                final: new Date(2021, 09, 16, 13)
            }
            var day5 = {
                i: "5",
                Topic: "Test",
                schedule: 'room_no. 3',
                begin: new Date(2021, 09, 17, 10),
                final: new Date(2021, 09, 17, 12)
            }

            onlineClasses.push(day1, day2, day3, day4, day5);
            var src = {
                dataType: "array",
                localData: onlineClasses,
                id: 'i'
            };

            $("#jqxs").jqxScheduler({
                source: new $.jqx.dataAdapter(src),
                width: "400px",
                height: "350px",
                date: new $.jqx.date(2021, 10, 13),
                views: ['weekView', 'dayView'],
                resources: {
                    colorScheme: "scheme10",
                    dataField: "schedule",
                    source: new $.jqx.dataAdapter(src)
                },

                appointmentDataFields: {
                    id: "i",
                    subject: "Topic",
                    from: "begin",
                    to: "final",
                    resourceId: 'schedule',
                },
            });

            $('#jqxs').jqxScheduler('ensureAppointmentVisible', '1');
            $("#jqxs").on("appointmentDelete", function (event) {
                $('#log').text("Appointment is deleted!");
            });
        });
    </script>
</body>

</html>

Output:

jQWidgets jqxScheduler appointmentDelete Event

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxscheduler/jquery-scheduler-api.htm

jQWidgets jqxScheduler appointmentDelete Event

Explore