jQWidgets jqxScheduler ensureAppointmentVisible()方法

以下是关于 jQWidgets jqxScheduler ensureAppointmentVisible() 方法的详细攻略。

jQWidgets jqxScheduler ensureAppointmentVisible() 方法

jQWidgets jqxScheduler 的 ensureAppointmentVisible() 方法用于确保指定的预约可见。

语法

$('#scheduler').jqxScheduler('ensureAppointmentVisible', appointmentId);

参数

  • appointmentId:一个字符串,表示要确保可见的预约的 ID。

示例

以下两个示例演示了如何使用 ensureAppointmentVisible() 方法。

示例 1

$('#scheduler').jqxScheduler('ensureAppointmentVisible', 'id1');

在示例 1 中,我们使用 ensureAppointmentVisible() 方法确保预约为 id1 的预约可见。

示例 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQxScheduler Ensure Appointment Visible Method</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/jqx.scheduler.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxscrollbar.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxmenu.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxcalendar.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxtooltip.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxscheduler.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var appointments = [
                {
                    id: 'id1',
                    description: 'Meeting with John',
                    location: 'Room 101',
                    subject: 'Meeting',
                    calendar: 'Room 101',
                    start: new Date(2023, 4, 15, 9, 0, 0),
                    end: new Date(2023, 4, 15, 10, 0, 0)
                },
                {
                    id: 'id2',
                    description: 'Lunch with Mary',
                    location: 'Cafeteria',
                    subject: 'Lunch',
                    calendar: 'Cafeteria',
                    start: new Date(2023, 4, 15, 12, 0, 0),
                    end: new Date(2023, 4, 15, 13, 0, 0)
                }
            ];

            $('#scheduler').jqxScheduler({
                date: new Date(2023, 4, 15),
                width: 800,
                height: 600,
                source: new $.jqx.dataAdapter({
                    datafields: [
                        { name: 'id', type: 'string' },
                        { name: 'description', type: 'string' },
                        { name: 'location', type: 'string' },
                        { name: 'subject', type: 'string' },
                        { name: 'calendar', type: 'string' },
                        { name: 'start', type: 'date' },
                        { name: 'end', type: 'date' }
                    ],
                    localdata: appointments
                }),
                view: 'weekView',
                appointmentDataFields: {
                    from: 'start',
                    to: 'end',
                    id: 'id',
                    description: 'description',
                    location: 'location',
                    subject: 'subject',
                    resourceId: 'calendar'
                },
                resources:
                {
                    colorScheme: 'scheme05',
                    dataField: 'calendar',
                    source: new $.jqx.dataAdapter({
                        datafields: [
                            { name: 'calendar', type: 'string' },
                            { name: 'calendarColor', type: 'string' }
                        ],
                        localdata: [
                            { calendar: 'Room 101', calendarColor: '#F6B26B' },
                            { calendar: 'Cafeteria', calendarColor: '#93C47D' }
                        ]
                    }),
                    view: 'weekView',
                    showDefaultItem: false
                }
            });

            $('#ensureVisibleButton').click(function () {
                var appointmentId = 'id1';
                $('#scheduler').jqxScheduler('ensureAppointmentVisible', appointmentId);
            });
        });
    </script>
</head>
<body>
    <div id="scheduler"></div>
    <button id="ensureVisibleButton">Ensure Appointment Visible</button>
</body>
</html>

在示例 2 中,我们创建了一个 jqxScheduler 组件,并在页面上添加了一个按钮。当用户单击按钮时,我们使用 ensureAppointmentVisible() 方法确保预约为 id1 的预约可见。

事项

  • ensureAppointmentVisible() 方法用于确保指定的预约可见。
  • ensureAppointmentVisible() 方法可以与 jqxScheduler 方法一起使用。

总之,ensureAppointmentVisible() 方法用于确保指定的预约可见。以上两个示例演示了如何使用 ensureAppointmentVisible() 方法。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQWidgets jqxScheduler ensureAppointmentVisible()方法 - Python技术站

(0)
上一篇 2023年5月12日
下一篇 2023年5月12日

相关文章

  • 如何使用JavaScript获得当前运行的函数名称

    要获取当前正在运行的函数名称,可以使用JavaScript内置对象arguments和函数属性name进行实现。 1. 使用arguments.callee.name获取当前函数名称 通过函数对象的arguments.callee属性可以获取当前正在运行的函数对象,再通过name属性可以获取该函数的名称,示例代码如下: function foo() { co…

    jquery 2023年5月12日
    00
  • jQWidgets jqxDocking showCollapseButton() 方法

    以下是关于“jQWidgets jqxDocking showCollapseButton() 方法”的完整攻略,包含两个示例说明: 方法简介 showCollapseButton() 是 jQWidgets jqxDocking 控件的方法,用于显示指定窗口的折叠按钮。该方法的语法下: $("#jqxDocking").jqxDocki…

    jquery 2023年5月10日
    00
  • jQuery简单实现图片预加载

    针对“jQuery简单实现图片预加载”这个话题,下面是我为您准备的完整攻略: 什么是图片预加载 在网页开发中,图片预加载是一种常见技术,它的意义在于提前把需要用到的图片提前加载到浏览器中,以避免在图片使用时出现加载延迟的情况,从而增强了用户体验。 jQuery实现图片预加载的代码 下面我们可以使用 jQuery 来进行图片预加载。具体方式如下: 准备需要预加…

    jquery 2023年5月28日
    00
  • jQWidgets jqxListMenu disabled属性

    jQWidgets jqxListMenu disabled属性详解 jQWidgets是一个基于jQuery的UI组件库,提供了丰富UI组件工具包。jqListMenu是组件之一。本文将详细介绍jqxListMenu的disabled属性,包括用法、语法和示例。 disabled属性基本语法 disabled属性的基本语法如下: $(‘#jqxListMe…

    jquery 2023年5月10日
    00
  • jQWidgets jqxQRcode renderAs属性

    以下是关于 jQWidgets jqxQRcode 组件中 renderAs 属性的详细攻略。 jQWidgets jqxQRcode renderAs 属性 jQWidgets jqxQRcode 组件的 renderAs 属性用于二维码的渲染方式。 语法 // 设置二维码的渲染方式 $(‘#qrcode’).jqxQRCode({ renderAs: ‘…

    jquery 2023年5月12日
    00
  • jQWidgets jqxButton val() 方法

    jQWidgets jqxButton val() 方法详解 jQWidgets是一个基于jQuery的UI组件库,提供了丰富UI组件工具包。jqxButton是其中之一。本文将详细介绍jqxButton的val()方法,包括定义、语法和示例。 val() 方法的定义 jqxButton的val()方法用于获取或设置按钮的值。当按钮被单击时,val()方法将…

    jquery 2023年5月10日
    00
  • 如何使用jQuery将选定的值重置为默认值

    当使用表单或者其他界面元素时,有时候需要重置选定的值为默认值。在这种情况下,jQuery提供了一个方便的方法来实现这一要求。下面是一个基本步骤以及两个示例来讲解如何使用jQuery将选定的值重置为默认值: 步骤一:确定选定元素 首先需要确定需要重置的元素。在jQuery中,可以使用$()方法或者其它选择器方法来选定需要重置的元素,例如: // 选定id为my…

    jquery 2023年5月12日
    00
  • 如何在jQuery中发送一个PUT/DELETE请求

    下面是如何在jQuery中发送PUT/DELETE请求的攻略: 使用jQuery发送PUT请求 使用jQuery发送PUT请求需要使用$.ajax()函数,并设置请求方法(method)为PUT。同时还需要设置url、data参数来传递数据,并设置contentType为”application/json”。 以下是一个示例: $.ajax({ url: ‘…

    jquery 2023年5月12日
    00
合作推广
合作推广
分享本页
返回顶部