jQWidgets jqxScheduler editDialogDateTimeFormatString Property
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 editDialogDateTimeFormatString property is used to set or return the formatString of DateTimeInput in the edit Dialog of the displayed jqxScheduler whenever the appointment isn’t set to allDay. It is of type string and its default value is “dd/MM/yyyy hh:mm tt”.
Syntax:
-
Set the editDialogDateTimeFormatString property.
$("#Selector").jqxScheduler({ editDialogDateTimeFormatString: dd/MM/yyyy hh:mm tt }); -
Return the editDialogDateTimeFormatString property.
var editDialogDateTimeFormatString = $('#Selector') .jqxScheduler('editDialogDateTimeFormatString');
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 editDialogDateTimeFormatString property 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 editDialogDateTimeFormatString property</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", begin: new Date(2021, 09, 13, 11), final: new Date(2021, 09, 13, 12) } var day2 = { i: "2", Topic: "C++", begin: new Date(2021, 09, 14, 11), final: new Date(2021, 09, 14, 12) } var day3 = { i: "3", Topic: "Java", begin: new Date(2021, 09, 15, 10), final: new Date(2021, 09, 15, 14) } var day4 = { i: "4", Topic: "Scala library functions", begin: new Date(2021, 09, 16, 11), final: new Date(2021, 09, 16, 13) } var day5 = { i: "5", Topic: "Test", 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", editDialogDateTimeFormatString: 'dd/MM/yyyy hh:mm tt', views: ['weekView'], appointmentDataFields: { id: "i", subject: "Topic", from: "begin", to: "final", }, }); $("#jqxBtn").jqxButton({ width: "140px", height: "30px", }); $('#jqxs').jqxScheduler('ensureAppointmentVisible', '2'); $("#jqxBtn").on("click", function () { var ed = $('#jqxs').jqxScheduler('editDialogDateTimeFormatString'); $('#log').text("Edit dialog's dateTime formatString: " + ed); }); }); </script> </body> </html> |
Output:
Please Login to comment...