jQWidgets jqxScheduler ensureVisible() 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 ensureVisible() method is used to scroll to a specified date in the displayed jqxScheduler. It does not return anything.
Syntax:
$('#Selector').jqxScheduler('ensureVisible', jqxDate, resourceId);Parameters:
- item: It is the stated date. It is of type object.
- resourceId: It is the stated resource id. It is of type string.
Linked Files: Download https://www.jqwidgets.com/download/ 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 ensureVisible() 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 ensureVisible() 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 = { 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, 12, 24), views: ['weekView'], resources: { colorScheme: "scheme10", dataField: "schedule", source: new $.jqx.dataAdapter(src) }, appointmentDataFields: { id: "i", subject: "Topic", from: "begin", to: "final", resourceId: 'schedule', }, }); $("#jqxBtn").jqxButton({ width: "140px", height: "30px", }); $("#jqxBtn").on("click", function () { $('#jqxs').jqxScheduler( 'ensureVisible', new $.jqx.date(2021, 12, 23) ); $('#log').text("Scrolled to the stated date!"); }); }); </script></body> </html> |
Output:
Please Login to comment...