jQWidgets jqxScheduler событие editDialogOpen
jQWidgets — это среда JavaScript для создания веб-приложений для ПК и мобильных устройств. Это очень мощная, оптимизированная, независимая от платформы и широко поддерживаемая платформа. Виджет jqxScheduler используется для отображения набора встреч на день, неделю, месяц, день на временной шкале, неделю на временной шкале, а также представления на временной шкале по месяцам.
Событие editDialogOpen активируется всякий раз, когда открывается диалоговое окно редактирования отображаемого jqxScheduler.
Синтаксис:
$("#Selector").on("editDialogOpen", function (event) { });
Связанные файлы: Загрузите jQWidgets по данной ссылке. В файле HTML найдите файлы сценариев в загруженной папке.
<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>
Пример: В приведенном ниже примере показано событие jqxScheduler editDialogOpen в 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 editDialogOpen 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("editDialogOpen", function (event) { $("#log").text("Edit dialog is opened!"); }); }); </ script > </ body > </ html > |
Выход:
Ссылка: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxscheduler/jquery-scheduler-api.htm