jQWidgets jqxScheduler appointmentClick 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 appointmentClick event is activated whenever an appointment of the displayed jqxScheduler is clicked.
Syntax:
$('#Selector').on('appointmentClick', 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 appointmentClick 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 appointmentClick 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("appointmentClick", function (event) { $('#log').text("Appointment is clicked!"); }); }); </script> </body> </html> |
Output:
jQWidgets jqxScheduler appointmentClick Event
Please Login to comment...