jQWidgets jqxScheduler enableHover 属性

The enableHover property of jQWidgets jqxScheduler is a boolean property, which indicates whether the appointments in the scheduler should highlight when hovered.

Syntax

$('#scheduler').jqxScheduler({
    enableHover: true|false
});

Description

When the enableHover property is set to true, the user can hover over the appointments in the scheduler and they will be highlighted. This feature can give users a better visual indication of the appointments on the scheduler.

Example

$('#scheduler').jqxScheduler({
    width: '100%',
    height: 600,
    date: new Date(),
    view: 'weekView',
    appointmentHeight: 30,
    resources:
    {
        colorScheme: 'scheme05',
        dataField: 'calendar',
        source:
        [
            { label: 'Sales', value: 'sales', color: '#FEB24C' },
            { label: 'Marketing', value: 'marketing', color: '#FF7F50' },
            { label: 'Development', value: 'development', color: '#FF5C5C' },
            { label: 'Support', value: 'support', color: '#A3A3A3' }
        ]
    },
    enableHover: true, // enable hover for appointments
    appointments: [
        {
            id: 'id1',
            description: 'Appointment 1',
            location: 'Location 1',
            subject: 'Subject 1',
            calendar: 'sales',
            from: new Date(2022, 1, 1, 9, 0, 0),
            to: new Date(2022, 1, 1, 11, 0, 0)
        },
        {
            id: 'id2',
            description: 'Appointment 2',
            location: 'Location 2',
            subject: 'Subject 2',
            calendar: 'marketing',
            from: new Date(2022, 1, 3, 13, 0, 0),
            to: new Date(2022, 1, 3, 15, 0, 0)
        },
        {
            id: 'id3',
            description: 'Appointment 3',
            location: 'Location 3',
            subject: 'Subject 3',
            calendar: 'development',
            from: new Date(2022, 1, 4, 15, 0, 0),
            to: new Date(2022, 1, 4, 18, 0, 0)
        }
    ]
});

In the example above, the enableHover property is set to true, which enables highlighting when appointments are hovered over in the scheduler.

Conclusion

The enableHover property of jQWidgets jqxScheduler is a useful feature that enhances the usability of your scheduler. By setting this property to true, users can easily highlight and interact with appointments on the scheduler.