1. Python技术站首页
  2. jquery

jQWidgets jqxScheduler cellDoubleClick事件

• jquery

jQWidgets是一套基于jQuery的快速开发Web应用程序的UI库，提供了大量的可继承的UI部件和插件，其中之一是jqxScheduler控件。jqxScheduler是一个功能强大的基于可编辑日历的Web日历控件，提供了许多有用的日程管理和日历显示功能，例如：显示工作/空闲状态、日历导航、事件编辑器等。而cellDoubleClick事件则是jqxScheduler控件的一个重要事件之一，此事件会在用户在jqxScheduler控件上双击某个日期单元格时触发，本文将详细讲解如何使用“jQWidgets jqxScheduler cellDoubleClick事件”。

一、事件说明

jqxScheduler控件的cellDoubleClick事件具有以下属性：

  1. event - {Object} - 事件对象。

  2. appointment - {Object} - 对应日期单元格的预约对象。

  3. $target - {jQuery Object} - 事件触发的jQuery对象。

二、事件绑定

使用jqxScheduler控件的cellDoubleClick事件时，必须将事件绑定到现有的jqxScheduler控件上。您可以使用以下代码为jqxScheduler控件绑定cellDoubleClick事件：

$('#scheduler').on('cellDoubleClick', function (event) {
  // Handle the event here.
});

此代码将为ID为“scheduler”的具有jqxScheduler插件的元素添加cellDoubleClick事件回调。在事件回调函数中，您可以访问cellDoubleClick事件的属性。

三、示例说明

在以下示例中，我们将创建一个具有jqxScheduler控件的演示页面，并在该控件上显示某个时间段内的事件。并演示在当时双击日期单元格时会触发cellDoubleClick事件的情况。

示例1

以下示例演示了如何在jqxScheduler控件上显示包括事件和周/工作日视图，并处理cellDoubleClick事件。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>示例1：jqxScheduler控件演示</title>

    <!-- 引入jQWidgets的CSS和JavaScript文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/jqxscheduler.js"></script>

    <style>
        #scheduler {
            margin: 10px;
            width: 95%;
            height: 500px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            // Initialize the jqxScheduler control.
            $('#scheduler').jqxScheduler({
                width: '100%',
                height: '100%',
                theme: 'energyblue',
                source: [],
                appointmentDataFields: {
                    from: 'start',
                    to: 'end',
                    id: 'id',
                    description: 'description',
                    location: 'location',
                    subject: 'subject',
                    resourceId: 'calendar',
                    backgroundColor: 'backgroundColor',
                    borderColor: 'borderColor'
                },
                views: [
                    'dayView',
                    'weekView',
                ],
                view: 'weekView',
                showLegend: true,
                resources: {
                    colorScheme: 'scheme04',
                    dataField: 'calendar',
                    source: new $.jqx.dataAdapter({
                        localData: [
                            { id: '3', calendar: 'Red', borderColor: '#FF0000', backgroundColor: '#FFCCCC' },
                            { id: '4', calendar: 'Blue', borderColor: '#0000FF', backgroundColor: '#CCCCFF' },
                            { id: '5', calendar: 'Green', borderColor: '#008000', backgroundColor: '#CCFFCC' }
                        ],
                        dataType: 'array'
                    })
                }
            });

            // Bind to the cellDoubleClick event.
            $('#scheduler').on('cellDoubleClick', function(event) {
                var args = event.args;
                var $target = $(args.$target);
                var appointment = args.appointment;

                alert("Double-clicked on cell " + $target.attr('id') + " with appointment id " + appointment.id);
            });

            // Load sample data.
            var appointments = [
                {
                    id: '1',
                    subject: "Meeting with team",
                    description: "Meet to discuss project plan.",
                    location: "Meeting Room 1",
                    calendar: '4',
                    backgroundColor: '#CCCCFF',
                    borderColor: '#0000FF',
                    start: new Date(2019, 1, 21, 9, 0, 0),
                    end: new Date(2019, 1, 21, 11, 0, 0)
                },
                {
                    id: '2',
                    subject: "Meeting with customer",
                    description: "Meet to discuss project details.",
                    location: "Meeting Room 2",
                    calendar: '3',
                    backgroundColor: '#FFCCCC',
                    borderColor: '#FF0000',
                    start: new Date(2019, 1, 27, 10, 0, 0),
                    end: new Date(2019, 1, 27, 12, 0, 0)
                },
                {
                    id: '3',
                    subject: "Demo",
                    description: "Present project demo.",
                    location: "Meeting Room 3",
                    calendar: '5',
                    backgroundColor: '#CCFFCC',
                    borderColor: '#008000',
                    start: new Date(2019, 1, 28, 10, 0, 0),
                    end: new Date(2019, 1, 28, 11, 0, 0)
                }
            ];

            $('#scheduler').jqxScheduler({
                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: 'backgroundColor', type: 'string' },
                        { name: 'borderColor', type: 'string' },
                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
                    ],
                    localData: appointments
                })
            });
        });
    </script>
</head>

<body>
    <h1>示例1：jqxScheduler控件演示</h1>
    <div id="scheduler"></div>
</body>

</html>

示例2

以下示例演示如何在jqxScheduler控件上显示包括事件和月视图，并处理cellDoubleClick事件。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>示例2：jqxScheduler控件演示</title>

    <!-- 引入jQWidgets的CSS和JavaScript文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/5.6.0/jqwidgets/jqxscheduler.js"></script>

    <style>
        #scheduler {
            margin: 10px;
            width: 95%;
            height: 500px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            // Initialize the jqxScheduler control.
            $('#scheduler').jqxScheduler({
                width: '100%',
                height: '100%',
                theme: 'energyblue',
                source: [],
                appointmentDataFields: {
                    from: 'start',
                    to: 'end',
                    id: 'id',
                    description: 'description',
                    location: 'location',
                    subject: 'subject',
                    resourceId: 'calendar',
                    backgroundColor: 'backgroundColor',
                    borderColor: 'borderColor'
                },
                views: [
                    'dayView',
                    'weekView',
                    'monthView'
                ],
                view: 'monthView',
                showLegend: true,
                resources: {
                    colorScheme: 'scheme04',
                    dataField: 'calendar',
                    source: new $.jqx.dataAdapter({
                        localData: [
                            { id: '3', calendar: 'Red', borderColor: '#FF0000', backgroundColor: '#FFCCCC' },
                            { id: '4', calendar: 'Blue', borderColor: '#0000FF', backgroundColor: '#CCCCFF' },
                            { id: '5', calendar: 'Green', borderColor: '#008000', backgroundColor: '#CCFFCC' }
                        ],
                        dataType: 'array'
                    })
                }
            });

            // Bind to the cellDoubleClick event.
            $('#scheduler').on('cellDoubleClick', function(event) {
                var args = event.args;
                var $target = $(args.$target);
                var appointment = args.appointment;

                alert("Double-clicked on cell " + $target.attr('id') + " with appointment id " + appointment.id);
            });

            // Load sample data.
            var appointments = [
                {
                    id: '1',
                    subject: "Meeting with team",
                    description: "Meet to discuss project plan.",
                    location: "Meeting Room 1",
                    calendar: '4',
                    backgroundColor: '#CCCCFF',
                    borderColor: '#0000FF',
                    start: new Date(2019, 1, 21, 9, 0, 0),
                    end: new Date(2019, 1, 21, 11, 0, 0)
                },
                {
                    id: '2',
                    subject: "Meeting with customer",
                    description: "Meet to discuss project details.",
                    location: "Meeting Room 2",
                    calendar: '3',
                    backgroundColor: '#FFCCCC',
                    borderColor: '#FF0000',
                    start: new Date(2019, 1, 27, 10, 0, 0),
                    end: new Date(2019, 1, 27, 12, 0, 0)
                },
                {
                    id: '3',
                    subject: "Demo",
                    description: "Present project demo.",
                    location: "Meeting Room 3",
                    calendar: '5',
                    backgroundColor: '#CCFFCC',
                    borderColor: '#008000',
                    start: new Date(2019, 1, 28, 10, 0, 0),
                    end: new Date(2019, 1, 28, 11, 0, 0)
                }
            ];

            $('#scheduler').jqxScheduler({
                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: 'backgroundColor', type: 'string' },
                        { name: 'borderColor', type: 'string' },
                        { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
                        { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
                    ],
                    localData: appointments
                })
            });
        });
    </script>
</head>

<body>
    <h1>示例2：jqxScheduler控件演示</h1>
    <div id="scheduler"></div>
</body>

</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxScheduler cellDoubleClick事件 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月11日
下一篇 2023年5月11日

相关文章

  • 2013年优秀jQuery插件整理小结

    2013年优秀jQuery插件整理小结 介绍 本篇文章整理和介绍了2013年一些优秀的jQuery插件，这些插件可以帮助你更加方便地开发Web应用程序，减轻开发的负担，提高开发效率。 使用方法 要使用这些插件，你需要在你的网页中引入jQuery库，然后在引入插件代码。 可以在文本头部添加以下代码（在你的jQuery库之后）来引入指定的插件： <scri…

    jquery 2023年5月27日
    00

  • jQuery维度

    jQuery 维度攻略 什么是 jQuery 维度？ jQuery 维度是指使用 jQuery 操作 HTML 元素时，将操作对象划分为以下三个维度： 标签名选择器 ID 选择器 类选择器 这种维度的划分可以帮助我们更加方便地选择和操作 HTML 元素，提高开发效率。 如何使用 jQuery 维度？ 标签名选择器 标签名选择器使用 HTML 元素标签名作为选…

    jquery 2023年5月12日
    00

  • jQWidgets jqxFileUpload cancelFile()方法

    jQWidgets jqxFileUpload cancelFile() 方法 jQWidgets是一个基于jQuery的UI组件库，提供了丰富UI组件和工具包表格等。jqxFileUpload是jQWidgets的一个组件，用于实现上传功能。cancelFile()是jqxFileUpload的一个方法，用于取消上传文件。本文将详细介绍cancelFile…

    jquery 2023年5月9日
    00

  • jQuery中prev()方法用法实例

    jQuery中prev()方法用法实例 简介 prev()是jQuery中的一个方法，主要用于获取匹配元素集合中每个元素前面的兄弟元素。该方法的返回值为匹配元素集合中前一个兄弟元素。 语法 $(selector).prev(filter); 其中，selector是用来定位元素的选择器，filter是用来筛选匹配元素集合中前面的兄弟元素的选择器，可以为空。 …

    jquery 2023年5月27日
    00

  • javascript,jquery闭包概念分析

    JavaScript和jQuery都有闭包（closure）的概念，因此我们需要一个详细的攻略来解释这个概念以及如何在编写代码的过程中利用它。 什么是闭包？ 闭包是指在函数内部定义的函数，它可以访问外部函数中定义的任何变量，并保持对它们的引用。在函数调用之后，闭包仍然可以访问这些变量，而不会受到外部环境的影响。 闭包通常用于隐藏一些私有变量，从而防止它们被其…

    jquery 2023年5月28日
    00

  • jQWidgets jqxTree keyboardNavigation属性

    jQWidgets jqxTree keyboardNavigation 属性 jqxTree 是 jQWidgets 提供的一个树形组件，它可以展示层级结构的数据支持多种交互操作。jqxTree 提供了 keyboardNavigation，用于设置树形组件的键盘导航功能。 keyboardNavigation 属性 keyboardNavigation …

    jquery 2023年5月11日
    00

  • jQWidgets jqxDataTable bindingComplete事件

    以下是关于“jQWidgets jqxDataTable bindingComplete事件”的完整攻略，包含两个示例说明： 简介 bindingComplete 事件是 jqxDataTable 控件的一个事件，当数据绑定完成后触发。 攻略 以下是 jqxDataTable 控件的 bindingComplete 事件的完整攻略： 监听 bindingCo…

    jquery 2023年5月11日
    00

  • Underscore.js _.invokes Function函数

    Underscore.js是一个基于JavaScript的函数式编程工具库，它提供了一系列常用的函数，简化了JavaScript的开发过程。Underscore.js提供了_.invoke函数，可以利用函数调用的方式，对集合中每个元素调用相应的函数。 _.invoke _.invoke(list, methodName, *args)函数的作用是通过调用指定…

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