jQWidgets jqxScheduler视图属性

首先我们来讲一下什么是jQWidgets jqxScheduler。它是一个功能强大、高度可定制的JavaScript日历和任务调度库，可以用于创建各种日历、任务调度和资源管理应用程序。在jQWidgets jqxScheduler中，视图属性是一种特殊的属性，通过它，你可以自定义调度器的视图样式和属性。下面我们详细讲解一下这方面的内容：

jQWidgets jqxScheduler视图属性

在jQWidgets jqxScheduler中，视图属性有以下几种：

view

该属性用于设置调度器的视图，可以是日视图、周视图、月视图或年视图。默认情况下，调度器是基于日视图的，如果需要切换到其他视图，需要在调度器的设置中进行修改。以下是一个修改调度器视图的示例：

$("#scheduler").jqxScheduler({
    view: 'weekView'
});

views

该属性用于设置调度器中包含的视图，可以是日视图、周视图、月视图和年视图。可以根据需要，选择需要包含的视图类型。例如，如果要在调度器中包含周视图和月视图，则可以这样设置：

$("#scheduler").jqxScheduler({ 
    views: ['weekView', 'monthView']
});

viewSettings

该属性用于设置调度器视图的自定义设置，例如，可以设置每个视图的开始和结束时间、每周的开始日期等。以下是设置每个视图开始时间和周开始日期的示例：

$("#scheduler").jqxScheduler({ 
    viewSettings: {
        dayView: {
            startTime: new Date(2018, 0, 1, 8),
            endTime: new Date(2018, 0, 1, 18)
        },
        weekView: {
            startTime: new Date(2018, 0, 1, 8),
            endTime: new Date(2018, 0, 1, 18),
            weekStartDay: 1
        }
    }
});

timeRuler

该属性用于设置时间刻度线的显示方式，可以设置时间刻度线的高度、步长、格式、颜色等。以下是设置时间刻度线的示例：

$("#scheduler").jqxScheduler({
    timeRuler: {
        formatString: 'dd/MM/yyyy HH:mm',
        showTicks: true,
        use24HourFormat: true,
        width: 100,
        height: 30
    }
});

示例说明

下面我们来看两个具体的实际应用的示例：

示例1：设置调度器视图为月视图，并显示事件标题

$("#jqxScheduler").jqxScheduler({
    view: 'monthView',
    resources: [
        {
            name: 'room 1',
            dataField: 'roomId',
            dataSource: [
                { roomId: 1, roomName: 'Room 1' },
                { roomId: 2, roomName: 'Room 2' }
            ]
        }
    ],
    appointments: [
        {
            id: '1',
            description: 'Event 1',
            location: '',
            subject: 'Event 1',
            calendar: '',
            start: new Date(2022, 9, 1),
            end: new Date(2022, 9, 3),
            resourceId: 1
        }
    ],
    appointmentDataFields: {
        from: 'start',
        to: 'end',
        id: 'id',
        description: 'description',
        location: 'location',
        subject: 'subject',
        resourceId: 'roomId'
    },
    appointmentRenderer: function (data) {
        return '<div class="jqx-scheduler-appointment">' + data.subject + '</div>';
    }
});

该示例中，我们首先设置调度器的视图为月视图，然后设置资源为room 1，并设置一个事件，事件开始时间和结束时间为2022年10月1日至10月3日。最后设置appointmentRenderer属性为显示事件标题。

示例2：设置调度器视图为周视图，并设置每天的工作时间和周开始日期

$("#jqxScheduler").jqxScheduler({
    view: 'weekView',
    viewSettings: {
        dayView: {
            startTime: new Date(0, 0, 0, 8, 0, 0),
            endTime: new Date(0, 0, 0, 20, 0, 0)
        },
        weekView: {
            startTime: new Date(0, 0, 0, 8, 0, 0),
            endTime: new Date(0, 0, 0, 20, 0, 0),
            weekStartDay: 1
        }
    },
    resources: [
        {
            name: 'room 1',
            dataField: 'roomId',
            dataSource: [
                { roomId: 1, roomName: 'Room 1' },
                { roomId: 2, roomName: 'Room 2' }
            ]
        }
    ],
    appointments: [
        {
            id: '1',
            description: 'Event 1',
            location: '',
            subject: 'Event 1',
            calendar: '',
            start: new Date(2022, 9, 4, 10, 30),
            end: new Date(2022, 9, 4, 12, 30),
            resourceId: 1
        },
        {
            id: '2',
            description: 'Event 2',
            location: '',
            subject: 'Event 2',
            calendar: '',
            start: new Date(2022, 9, 5, 9, 30),
            end: new Date(2022, 9, 5, 11, 30),
            resourceId: 2
        }
    ],
    appointmentDataFields: {
        from: 'start',
        to: 'end',
        id: 'id',
        description: 'description',
        location: 'location',
        subject: 'subject',
        resourceId: 'roomId'
    },
    appointmentRenderer: function (data) {
        return '<div class="jqx-scheduler-appointment">' + data.subject + '</div>';
    }
});

该示例中，我们设置调度器的视图为周视图，并设置每天的工作时间为8:00-20:00，周开始日期为周一。然后设置两个资源：room 1和room 2，并设置两个事件：Event 1和Event 2。事件的开始时间和结束时间分别为2022年10月4日上午10:30至中午12:30和2022年10月5日上午9:30至11:30。最后设置appointmentRenderer属性为显示事件标题。