博客

jQWidgets jqxScheduler contextMenu属性

  • Post category:jquery

以下是关于 jQWidgets jqxScheduler 组件中 contextMenu 属性的详细攻略。

jQWidgets jqxScheduler contextMenu 属性

jQWidgets jqxScheduler 组件的 contextMenu 属性用于设置日程表的上下文菜单。

语法

// 设置上下文菜单
$('#scheduler').jqxScheduler({
    contextMenu: $('#schedulerMenu')
});

示例

以下两个示例演示如何使用 contextMenu 属性。

示例 1

// 设置上下文菜单
$('#scheduler').jqxScheduler({
    contextMenu: $('#schedulerMenu')
});

在示例 1 中，我们使用 contextMenu 属性设置了日程表的上下文菜单。

示例 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="-">
    <title>jQ jqxScheduler Context Menu Property</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/jqx.scheduler.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxmenu.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/scripts/jqxscheduler.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 创建上下文菜单
            var contextMenu = $('<div><ul><li id="newAppointment">New Appointment</li><li id="editAppointment">Edit Appointment</li><li id="deleteAppointment">Delete Appointment</li></ul></div>');
            contextMenu.jqxMenu({ width: '120px', autoOpenPopup: false, mode: 'popup' });
            // 设置上下文菜单
            $('#scheduler').jqxScheduler({
                date: new $.jqx.date(2023, 5, 11),
                width: 800,
                height: 600,
                contextMenu: contextMenu,
                source: new $.jqx.scheduler.source({
                    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' },
                        { name: 'resourceId', type: 'string' }
                    ],
                    id: 'id',
                    url: 'data.php'
                }),
                resources:
                {
                    colorScheme: 'scheme05',
                    dataField: 'resourceId',
                    source: new $.jqx.dataAdapter({
                        dataType: 'json',
                        url: 'resources.php',
                        dataFields: [
                            { name: 'id', type: 'string' },
                            { name: 'name', type: 'string' },
                            { name: 'image', type: 'string' }
                        ]
                    }),
                    label: 'name'
                },
                appointmentDataFields:
                {
                    from: 'start',
                    to: 'end',
                    id: 'id',
                    description: 'text',
                    resourceId: 'resourceId',
                    status: 'status'
                },
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
            // 绑定上下文菜单事件
            $('#newAppointment').on('click', function () {
                $('#scheduler').jqxScheduler('openAddAppointmentDialog');
            });
            $('#editAppointment').on('click', function () {
                $('#scheduler').jqxScheduler('openEditAppointmentDialog', $('#scheduler').jqxScheduler('getSelection').range.from);
            });
            $('#deleteAppointment').on('click', function () {
                $('#scheduler').jqxScheduler('deleteAppointment', $('#scheduler').jqxScheduler('getSelection').range.from);
            });
        });
    </script>
</head>
<body>
    <div id="scheduler"></div>
</body>
</html>

在示例 2 中，我们创建了一个日程表，并创建了一个上下文菜单。我们使用 contextMenu 属性将上下文菜单设置为日程表的上下文菜单。我们还绑定了上下文菜单的单击事件，以便在单菜单项时执行相应的操作。

注意事项

  • contextMenu 属性用于设置日程表的上下文菜单。
  • contextMenu 属性可以是一个 jQuery 对象或一个选择器字符串。
  • contextMenu 属性可以与 jqxScheduler 方法一起使用。

总之，contextMenu 属性用于设置日程表的上下文菜单。以上两个示例演示了如何使用 contextMenu 属性。

Tags: