博客

jQWidgets jqxScheduler toolBarRangeFormat属性

  • Post category:jquery

下面来详细讲解一下jQWidgets jqxScheduler控件中的toolBarRangeFormat属性。

什么是toolBarRangeFormat属性

toolBarRangeFormat属性是jQWidgets jqxScheduler控件的一个属性，可以控制工具栏中时间段选择按钮的显示格式。当设置为一个字符串时，会用该字符串的内容替换时间段按钮中的文本内容。

如何使用toolBarRangeFormat属性

使用toolBarRangeFormat属性非常简单，只需要在jqxScheduler控件的初始化代码中指定该属性即可。例如下面的代码：

$('#scheduler').jqxScheduler({
    width: '100%',
    height: '700px',
    date: new Date(),
    toolBarRangeFormat: 'yy-MM-dd'
});

在这个示例中，我们将toolBarRangeFormat属性设置为yy-MM-dd，这样时间段选择按钮中的文本内容就会被替换为日期格式，例如2022-07-07。

除了日期格式，还可以使用其他格式化字符串。例如，下面的代码将toolBarRangeFormat属性设置为HH:mm，这样时间段选择按钮中的文本内容就会被替换为时间格式，例如09:00。

$('#scheduler').jqxScheduler({
    width: '100%',
    height: '700px',
    date: new Date(),
    toolBarRangeFormat: 'HH:mm'
});

示例

下面给出一个完整的示例代码，演示如何使用toolBarRangeFormat属性：

$('#scheduler').jqxScheduler({
    width: '100%',
    height: '700px',
    date: new Date(),
    toolBarRangeFormat: 'yy-MM-dd',
    source: new $.jqx.dataAdapter({
        dataType: 'json',
        dataFields: [
            { name: 'id', type: 'string' },
            { name: 'status', type: 'string' },
            { name: 'text', type: 'string' },
            { name: 'start', type: 'date', format: 'yyyy-MM-dd HH:mm' },
            { name: 'end', type: 'date', format: 'yyyy-MM-dd HH:mm' }
        ],
        localData: [
            {
                id: 'id1', status: 'busy', text: 'Meeting', start: '2022-07-07 09:00', end: '2022-07-07 10:00'
            },
            {
                id: 'id2', status: 'busy', text: 'Conference', start: '2022-07-08 11:00', end: '2022-07-08 12:00'
            }
        ]
    })
});

在这个示例中，我们将toolBarRangeFormat属性设置为yy-MM-dd，这样时间段选择按钮中的文本内容就会被替换为日期格式，例如2022-07-07。同时，我们创建了一个本地数据源，并使用dataFields属性指定数据字段的类型。最后，我们将数据源绑定到jqxScheduler控件上，以显示日程安排。

Tags: