jQWidgets jqxScheduler ensureVisible()方法

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

jQWidgets jqxScheduler ensureVisible() 方法

jQWidgets jqxScheduler 的 ensureVisible() 方法用保指定的日期或预约可见。

语法

$('#scheduler').jqxScheduler('ensureVisible', date);
$('#scheduler').jqxScheduler('ensureVisible', appointmentId);

参数

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

示例

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

示例 1

var date = new Date(2023, 4, 15);
$('#schedulerjqx('ensureVisible', date);

在示例 1 中,我们使用 ensureVisible() 方法确保日期 2023 年 5 月 15 日可见。

示例 2

<!DOCTYPE html>
<html>
>
    <meta charset="UTF-8">
    <title>jQxScheduler Ensure 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)
                },
                {
                   : '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('ensureVisible', appointmentId);
            });
        });
    </script>
</head>
<body>
    <div id="scheduler"></div>
    <button id="ensureVisibleButton">Ensure Visible</button>
</body>
</html>

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

事项

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

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

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

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

相关文章

  • jQuery attribute!=value 选择器

    以下是关于jQuery attribute!=value选择器的完整攻略: 什么是jQuery attribute!=value选择器? jQuery attribute!=value选择器是一种用于选择不具有特定属性值的HTML元素的语法。使用这个选择器可以轻松地选择不具有特定属性值的HTML元素,并对其进行操作。 如何使用jQuery attribute…

    jquery 2023年5月12日
    00
  • jQuery.fx.interval属性示例

    jQuery.fx.interval属性是jQuery动画模块中的一个属性,用于指定动画循环的时间间隔。默认情况下,动画循环间隔为13毫秒。在某些情况下,这个时间间隔可以影响到动画效果的流畅度,因此可以根据需要通过修改jQuery.fx.interval属性来调整动画的效果。 示例1:将jQuery动画循环间隔调整为50毫秒 代码如下: $(document…

    jquery 2023年5月12日
    00
  • jQWidgets jqxGrid selectedrowindexes属性

    以下是关于“jQWidgets jqxGrid selectedrowindexes属性”的完整攻略,包含两个示例说明: 属性简介 selectedrowindexes 属性是 jQWidgets jqxGrid 控件的一个属性,用于获取当前选行的索引数组。该属性的语法如下: var selectedIndexes = $("#jqxGrid&qu…

    jquery 2023年5月10日
    00
  • java实现模拟RPG格斗

    实现模拟RPG格斗涉及的技术点比较多,我会一步步详细讲解,让你可以轻松掌握。 1. 模拟RPG格斗概述 在模拟RPG格斗中,通常需要实现选择角色、角色属性、攻击技能、对战结果等功能。为了实现这些功能,我们首先需要设计面向对象的角色属性类和技能类。 2. 设计角色属性类 角色属性包括角色名、等级、血量、攻击力和防御力等信息。我们可以在设计类时,定义这些信息,并…

    jquery 2023年5月27日
    00
  • jQWidgets jqxBulletChart改变事件

    jQWidgets jqxBulletChart改变事件详解 jQWidgets是一个基于jQuery的UI组件库,提供了丰富UI组件工具包。jqxBulletChart是其中之一。本文将详细介绍jqxBulletChart的改变事件,包括定义、语法和示例。 改变事件的定义 jqxBulletChart的改变事件是在用户更改jqxBulletChart的值时…

    jquery 2023年5月10日
    00
  • Ajax学习笔记—3种Ajax的实现方法【推荐】

    接下来我会详细讲解“Ajax学习笔记—3种Ajax的实现方法【推荐】”的完整攻略,如下: Ajax学习笔记—3种Ajax的实现方法 1. 什么是Ajax Ajax全称为Asynchronous JavaScript and XML,即异步的JavaScript和XML。其主要作用是通过在后台与服务器进行少量数据交换,实现页面无需刷新更新数据和内容。使…

    jquery 2023年5月27日
    00
  • jquery实现手机号码选号的方法

    下面是关于jquery实现手机号码选号的方法的完整攻略: 准备工作 首先,在html文件的标签中引入jquery库,例如: <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 实现方法 1. 支持手…

    jquery 2023年5月28日
    00
  • jQWidgets jqxTreeGrid focus()方法

    下面是详细讲解”jQWidgets jqxTreeGrid focus()方法”的攻略说明。 1. 简介 jQWidgets是一款专业的Web UI库,其中包含了各种实用的UI组件,如Grid、TreeGrid、Chart等等。jqxTreeGrid是其中的一种组件,它是基于DataTable的表格控件,具备类似TreeView的树形结构,支持对表头、行、单…

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