jQWidgets jqxScheduler toolBarRangeFormatAbbr 属性

首先，让我们来了解一下 jQWidgets jqxScheduler 工具栏（toolBar）的概念。 jqxScheduler 是一个强大的日历/计划表组件，能够为 Web 应用程序提供先进的组织和管理功能。而 jQWidgets jqxScheduler 工具栏是 jqxScheduler 组件中的一部分，用于为用户提供方便的操作按钮。其中，toolBarRangeFormatAbbr 属性允许您自定义时间范围按钮所显示的文本缩写。

以下是 toolBarRangeFormatAbbr 属性的详细说明：

属性说明

该属性用于指定时间范围按钮的文本缩写。它是一个 JavaScript 函数，该函数返回一个字符串，该字符串将用作时间范围按钮的文本。默认值是 "M/d/yyyy"。

语法

toolBarRangeFormatAbbr: function (date, type, calendar) {
    ...
}

参数

• date：Date 类型，时间范围的开始日期。
• type：String 类型，时间范围的类型（"month"、"week" 等）。
• calendar：Object 类型，当前日历的信息。

返回值

一个字符串，该字符串将用作时间范围按钮的文本。

接下来是两个示例，帮助您理解 jQWidgets jqxScheduler toolBarRangeFormatAbbr 属性的用法：

示例一

在此示例中，我们将自定义重新加载 buttonText 为“重新连接”。

var options = {
    width: "100%",
    height: 850,
    view: 'weekView',
    toolBarRangeFormatAbbr: function (date, type, calendar) {
        switch (type) {
            case "week":
                var endDate = new Date(date);
                endDate.setDate(endDate.getDate() + 6);
                return date.getUTCFullYear() + "/" + (date.getUTCMonth() + 1) + "/" + date.getUTCDate() + " - " + endDate.getUTCFullYear() + "/" + (endDate.getUTCMonth() + 1) + "/" + endDate.getUTCDate();
            default:
                return null;
        }
    },
    views: ['dayView', 'weekView', 'monthView'],
    appointmentContextMenuOpen: function (menu, appointment, e) {
        var newMenuItem = {
            'separator': true
        };
        var newMenuItem1 = {
            'id': 'reload',
            'text': '重新连接'
        };
        menu.append(newMenuItem);
        menu.append(newMenuItem1);
        return true;
    },
    appointmentDoubleClick: function (event) {
        alert("You double-clicked an appointment.");
    },
    resources:
        [
            {
                name: 'colorScheme',
                dataField: 'colorScheme',
                source: ['scheme1', 'scheme2']
            }
        ],
    appointments: appointmentData,
    appointmentRender: function (data) {
        data.element.css({
            'background-color': data.dataItem.colorScheme
        });
    }
};

在此示例中，我们覆盖了 toolBarRangeFormatAbbr 函数，并更改了“week”类型的时间范围按钮的文本。文本将以开始日期和结束日期的形式显示（例如“2022/7/3 - 2022/7/9”）。

示例二

在此示例中，我们将使用 TypeScript 和 React 构建 jQWidgets jqxScheduler 组件，并将 toolBarRangeFormatAbbr 属性设置为“月/日”。

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import JqxScheduler, { IJqxSchedulerProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';

class App extends React.PureComponent {
    constructor(props: any) {
        super(props);
        this.scheduler = React.createRef();
    }

    private scheduler: React.RefObject<JqxScheduler>;

    private toolBarRangeFormatAbbr = (date: Date, type: string, calendar: any): string => {
        return `${date.getMonth() + 1}/${date.getDate()}`;
    }

    render() {
        const schedulerConfig: IJqxSchedulerProps = {
            width: '100%',
            height: 400,
            date: new Date(2022, 7, 1),
            views: ['dayView', 'weekView', 'monthView'],
            toolBarRangeFormatAbbr: this.toolBarRangeFormatAbbr,
            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',
                        format: 'M/d/yyyy h:mm tt',
                    },
                    {
                        name: 'end',
                        type: 'date',
                        format: 'M/d/yyyy h:mm tt',
                    },
                ],
                dataType: 'array',
                localData: [
                    {
                        id: '1',
                        description: 'Description 1',
                        location: 'Location 1',
                        subject: 'Subject 1',
                        calendar: 'Calendar 1',
                        start: new Date(2022, 6, 31, 9, 0, 0),
                        end: new Date(2022, 6, 31, 9, 30, 0),
                    },
                    {
                        id: '2',
                        description: 'Description 2',
                        location: 'Location 2',
                        subject: 'Subject 2',
                        calendar: 'Calendar 2',
                        start: new Date(2022, 7, 1, 8, 0, 0),
                        end: new Date(2022, 7, 1, 8, 30, 0),
                    },
                ],
                id: 'id',
                localData: 'localData',
                root: 'root',
            }),
        };

        return (
            <JqxScheduler
                ref={this.scheduler} {...schedulerConfig}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

在此示例中，我们将 toolBarRangeFormatAbbr 属性设置为“月/日”，以显示月份和日期的月/日格式。