jQWidgets jqxScheduler showToolbar属性

  • Post category:jquery

关于 jQWidgets jqxScheduler 的 showToolbar 属性的详细讲解,我来为您介绍一下。

属性介绍

showToolbar 是 jQWidgets jqxScheduler 的一个布尔类型属性,表示是否显示日程表的顶部工具栏。默认值为 true,即默认显示工具栏。

使用方法

可以通过在 jQWidgets jqxScheduler 的初始化代码中设置 showToolbar 属性的值来控制是否显示工具栏,例如:

$("#scheduler").jqxScheduler({
    showToolbar: false,
    //其他属性
});

上述代码中,showToolbar 属性被设置成了 false,即不显示工具栏。如果想要显示工具栏,则需要将属性值设置成 true。

示例说明

下面将演示两个关于 showToolbar 属性的示例。

示例1:禁用工具栏

我们先来看一个示例,来演示如何使用 showToolbar 属性来禁用工具栏。以下是完整的代码:

$("#scheduler").jqxScheduler({
    showToolbar: false,
    date: new $.jqx.date(2021, 8, 1),
    width: '100%',
    height: 550,
    resources:
    {
        colorScheme: "scheme05",
        dataField: "calendar",
        source: new $.jqx.dataAdapter(source)
    },
    appointmentDataFields:
    {
        from: "start",
        to: "end",
        id: "id",
        description: "description",
        location: "place",
        subject: "subject",
        resourceId: "calendar",
        backgroundColor: "background",
        borderColor: "background",
        status: "status",
        text: "subject"
    },
    views:
    [
        'dayView',
        { type: "weekView", showWeekends: true },
        'monthView',
        { type: "timelineDayView", showWeekends: false },
        { type: "timelineWeekView", showWeekends: false },
        { type: "timelineMonthView", showWeekends: true }
    ],
    appointmentContextMenuCreate: function (menu, data) {
        //自定义右键菜单
    },
    editDialogCreate: function (dialog, fields) {
        //自定义编辑窗口
    },
    create: function () {
        //自定义初始化操作
    }
});

在代码中,我们设置了 showToolbar 属性的值为 false,来禁用工具栏。

示例2:显示工具栏

下面再来看一个示例,来演示如何使用 showToolbar 属性来显示工具栏。以下是完整的代码:

$("#scheduler").jqxScheduler({
    showToolbar: true,
    date: new $.jqx.date(2021, 8, 1),
    width: '100%',
    height: 550,
    resources:
    {
        colorScheme: "scheme05",
        dataField: "calendar",
        source: new $.jqx.dataAdapter(source)
    },
    appointmentDataFields:
    {
        from: "start",
        to: "end",
        id: "id",
        description: "description",
        location: "place",
        subject: "subject",
        resourceId: "calendar",
        backgroundColor: "background",
        borderColor: "background",
        status: "status",
        text: "subject"
    },
    views:
    [
        'dayView',
        { type: "weekView", showWeekends: true },
        'monthView',
        { type: "timelineDayView", showWeekends: false },
        { type: "timelineWeekView", showWeekends: false },
        { type: "timelineMonthView", showWeekends: true }
    ],
    appointmentContextMenuCreate: function (menu, data) {
        //自定义右键菜单
    },
    editDialogCreate: function (dialog, fields) {
        //自定义编辑窗口
    },
    create: function () {
        //自定义初始化操作
    }
});

在代码中,我们将 showToolbar 属性的值设置为 true,来显示工具栏。

以上就是关于 jQWidgets jqxScheduler 的 showToolbar 属性的详细讲解及两个示例演示。希望能对您有所帮助。