jQWidgets jqxScheduler focus() Method
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 focus() method is used to focus the displayed jqxScheduler. It has no parameters and does not return anything.
Syntax:
$('#Selector').jqxScheduler('focus');
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 focus() method 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 focus() method </h3> <div id="jqxs"></div> <div> <input type="button" id="jqxBtn" style="margin-top: 25px" value="Click here" /> </div> <br> <div id="log"></div> </center> <script type="text/javascript"> $(document).ready(function () { var onlineClasses = new Array(); var day1 = { id: "1", Topic: "C functions", begin: new Date(2021, 11, 21, 9), end: new Date(2021, 11, 21, 16) } var day2 = { id: "2", Topic: "C++", begin: new Date(2021, 11, 22, 10), end: new Date(2021, 11, 22, 15) } var day3 = { id: "3", Topic: "Java", begin: new Date(2021, 11, 23, 11), end: new Date(2021, 11, 23, 13) } var day4 = { id: "4", Topic: "Scala library functions", begin: new Date(2021, 11, 25, 16), end: new Date(2021, 11, 25, 18) } var day5 = { id: "5", Topic: "Test", begin: new Date(2021, 11, 19, 10), end: new Date(2021, 11, 19, 11) } onlineClasses.push(day1, day2, day3, day4, day5); var source = { dataType: "array", localData: onlineClasses, id: 'id' }; var adapter = new $.jqx.dataAdapter(source); $("#jqxs").jqxScheduler({ date: new $.jqx.date(2021, 12, 19), source: adapter, width: "400px", height: "350px", view: 'weekView', views: ['weekView'], appointmentDataFields: { id: "id", subject: "Topic", from: "begin", to: "end", }, }); $("#jqxBtn").jqxButton({ width: "140px", height: "30px", }); $('#jqxs').jqxScheduler('ensureAppointmentVisible', '1'); $("#jqxBtn").on("click", function () { $('#jqxs').jqxScheduler('focus'); $('#log').text("Scheduler focussed!"); }); }); </script> </body> </html> |
Output:
Please Login to comment...