jQWidgets jqxScheduler 完整参考(1)

📌 相关文章

📜 jQWidgets jqxScheduler 完整参考(1)

📅 最后修改于: 2023-12-03 15:16:56.559000 🧑 作者: Mango

jQWidgets jqxScheduler 完整参考

jQWidgets jqxScheduler 是一个强大的事件日历组件，支持多种视图、自定义事件和回调函数等功能。它可以轻松地嵌入到任何Web应用程序中，使用户能够快速浏览和编辑他们的日历。

安装

您可以通过以下几种方式安装 jQWidgets jqxScheduler：

从 jQWidgets 官网下载最新版本的 jqxScheduler
通过 npm 安装：

npm install jqwidgets-framework

通过 bower 安装：

bower install jqwidgets

快速上手

以下是一个基本的 jQWidgets jqxScheduler 示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jqxScheduler Demo</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxscheduler.api.js"></script>
</head>
<body>
    <div id="scheduler"></div>

    <script type="text/javascript">
        // 初始化日历数据
        var appointments = [
            {
                id: 'id1',
                description: 'Meeting',
                location: 'Room 101',
                subject: 'Planing',
                calendar: 'Room1',
                start: new Date(2018, 5, 30, 9, 0, 0),
                end: new Date(2018, 5, 30, 10, 0, 0),
                color: '#F29161'
            },
            {
                id: 'id2',
                description: 'Conference Call',
                location: 'Office',
                subject: 'UI Design Review',
                calendar: 'Room2',
                start: new Date(2018, 5, 30, 13, 0, 0),
                end: new Date(2018, 5, 30, 14, 30, 0),
                color: '#0099FF'
            },
            {
                id: 'id3',
                description: 'Lunch',
                location: 'Cafe',
                subject: 'Team Building',
                calendar: 'Room1',
                start: new Date(2018, 5, 30, 12, 0, 0),
                end: new Date(2018, 5, 30, 13, 0, 0),
                color: '#2ECC71'
            }
        ];

        // 初始化日历组件
        var scheduler = $('#scheduler').jqxScheduler({
            width: '100%',
            height: 600,
            date: new Date(), // 当前日期
            appointmentDataSource: 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' },
                    { name: 'color', type: 'string' }
                ],
                localdata: appointments
            }),
            view: 'weekView', // 默认显示的视图
            views: ['dayView', 'weekView', 'monthView'], // 支持的视图类型
            appointmentCreate: function (event) {
                // 禁用创建事件
                return false;
            },
            appointmentClick: function (event) {
                // 事件单击处理逻辑
                alert('you clicked: ' + event.args.appointment.subject);
            }
        });

        // 显示日历
        scheduler.jqxScheduler('render');
    </script>
</body>
</html>

API 参考

以下是 jQWidgets jqxScheduler 的主要 API 参考：

属性

| 名称 | 描述 | | ---- | ---- | | width | 设置组件的宽度。 | | height | 设置组件的高度。 | | date | 设置组件显示的日期。 | | view | 设置组件默认显示的视图。 | | views | 设置组件支持的视图类型。 | | appointmentDataSource | 设置组件的日历数据源。 | | resources | 设置组件的资源列表。 | | appointmentRender | 自定义日历事件的外观。 | | editDialogOpen | 打开编辑日历事件的对话框。 |

方法

| 名称 | 描述 | | ---- | ---- | | clear | 从组件中删除所有事件。 | | destroy | 销毁组件并删除它的对应 HTML 元素。 | | ensureVisible | 确保指定的事件在可见范围内。 | | focus | 将焦点设置到指定的事件。 | | getAppointmentProperty | 获取指定日历事件的属性值。 | | getAppointments | 获取指定日期范围内所有事件的详细信息。 | | getResourceItems | 获取资源列表。 | | getViewRange | 获取当前显示的日期范围。 | | goToDate | 跳转到指定日期。 | | resize | 重新调整组件的大小。 | | scrollLeft | 向左滚动。 | | scrollTop | 向上滚动。 | | setAppointmentProperty | 设置指定日历事件的属性值。 | | selectAppointment | 选中指定的日历事件。 | | unselectAppointment | 取消选中指定的日历事件。 | | view | 更改当前显示的视图。 |

事件

| 名称 | 描述 | | ---- | ---- | | appointmentClick | 当用户单击某个日历事件时触发。 | | appointmentDoubleClick | 当用户双击某个日历事件时触发。 | | appointmentDelete | 当用户删除某个日历事件时触发。 | | appointmentCreate | 当用户创建新的日历事件时触发。 | | appointmentChange | 当用户更改日历事件时触发。 | | viewChange | 当用户更改当前显示的视图时触发。 |

示例

本节将介绍一些 jQWidgets jqxScheduler 常见用例的示例。

1. 自定义日历事件的外观

// 设置日历事件的渲染函数
var renderer = function (element, appointment) {
    var calendar = $('#scheduler').jqxScheduler('getCalendar');
    var resources = $('#scheduler').jqxScheduler('getResources');
    var resource = resources[appointment.resourceId];

    // 设置日历事件的背景色
    $(element).css('background-color', resource.color);

    // 设置日历事件的文字颜色
    $(element).css('color', '#fff');
};

// 设置日历事件的外观
scheduler.jqxScheduler({
    ...
    appointmentRender: renderer
    ...
});

2. 加载远程数据

// 从服务器加载日历数据
var url = 'http://yourserver.com/api/appointments';
var source = new $.jqx.dataAdapter({
    datatype: 'json',
    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' },
        { name: 'color', type: 'string' }
    ],
    url: url
});

// 初始化日历组件
$('#scheduler').jqxScheduler({
    width: '100%',
    height: 600,
    view: 'weekView',
    appointmentDataSource: source
});

3. 自定义编辑日历事件的对话框

var editDialog = $('#editDialog').jqxWindow({
    ...
});

// 打开编辑日历事件的对话框
var onEditDialogOpen = function (event) {
    var appointment = event.args.appointment;

    // 设置对话框标题
    editDialog.jqxWindow('setTitle', 'Edit Appointment: ' + appointment.subject);

    // 将日历事件数据填充到对话框表单中
    // ...
};

$('#scheduler').jqxScheduler({
    ...
    editDialogOpen: onEditDialogOpen
    ...
});

4. 显示所有资源

// 设置日历的资源列表
var resources = [
    { id: 'r1', name: 'Resource 1', color: '#F29161' },
    { id: 'r2', name: 'Resource 2', color: '#0099FF' },
    { id: 'r3', name: 'Resource 3', color: '#2ECC71' }
];

var scheduler = $('#scheduler').jqxScheduler({
    ...
    resources: resources,
    ...
});

5. 禁用创建事件

scheduler.jqxScheduler({
    ...
    appointmentCreate: function (event) {
        // 禁用创建事件
        return false;
    }
    ...
});

总结

jQWidgets jqxScheduler 是一个功能强大的事件日历组件，支持多种视图、自定义事件和回调函数等功能。在您开发 Web 应用程序时，使用 jQWidgets jqxScheduler 可以轻松实现现代化的事件日历功能。