jQWidgets jqxScheduler contextMenuCreate属性

jQWidgets jqxScheduler 是一个强大的日程安排和日历组件，具有许多自定义选项和事件。其中，contextMenuCreate 属性可以让我们自定义右键菜单，并添加要执行的操作。

使用contextMenuCreate属性自定义右键菜单

1. 首先要在页面中引入 jQWidgets 的资源文件和样式文件。

   html
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css">
<script src="jqwidgets/jqxcore.js"></script>
<script src="jqwidgets/jqxmenu.js"></script>
<script src="jqwidgets/jqxscrollbar.js"></script>
<script src="jqwidgets/jqxdata.js"></script>
<script src="jqwidgets/jqxinput.js"></script>
<script src="jqwidgets/jqxbuttons.js"></script>
<script src="jqwidgets/jqxscheduler.js"></script>

2. 在页面中定义一个 jqxScheduler 的 div 容器，并在 JavaScript 代码中初始化。

   html
<div id="scheduler"></div>

   javascript
$(document).ready(function () {
$("#scheduler").jqxScheduler({
...
});
});

3. 在 jqxScheduler 的初始化选项中添加 contextMenuCreate 属性，并定义菜单项和执行的操作。

   ```javascript
   $(document).ready(function () {
   $("#scheduler").jqxScheduler({
   contextMenuCreate: function (menu, event) {
   var view = $("#scheduler").jqxScheduler('getView');
   var date = view.getDate();

           var selectedAppointment = $("#scheduler").jqxScheduler('getAppointment', event.args.appointmentId);
   
           menu.append('<li><a href="#">Edit</a></li>');
           menu.append('<li><a href="#">Delete</a></li>');
           menu.append('<li><a href="#">Mark as done</a></li>');
   
           menu.on('itemclick', function (event) {
               if (event.args.innerHTML == "Edit") {
                   // 编辑操作
               } else if (event.args.innerHTML == "Delete") {
                   // 删除操作
               } else if (event.args.innerHTML == "Mark as done") {
                   // 标记为完成操作
               }
           });
       }
   });
   

   });
   ```

4. 在菜单项的 click 事件中添加要执行的操作，比如编辑、删除或标记为完成。根据需要可以调用 jqxScheduler 的 API 方法来实现这些操作。

示例1：在 jqxScheduler 中添加编辑操作

在 contextMenuCreate 中添加编辑菜单项，点击后弹出一个对话框，可以编辑当前选中的日程。

$(document).ready(function () {
    $("#scheduler").jqxScheduler({
        contextMenuCreate: function (menu, event) {
            var view = $("#scheduler").jqxScheduler('getView');
            var date = view.getDate();

            var selectedAppointment = $("#scheduler").jqxScheduler('getAppointment', event.args.appointmentId);

            menu.append('<li><a href="#">Edit</a></li>');
            menu.append('<li><a href="#">Delete</a></li>');
            menu.append('<li><a href="#">Mark as done</a></li>');

            menu.on('itemclick', function (event) {
                if (event.args.innerHTML == "Edit") {
                    var appointment = selectedAppointment;
                    if (!appointment) {
                        return;
                    }

                    $("#editDialog").jqxWindow('open');
                    $("#editDialogAppointment").html(appointment.subject);
                    $("#editDialogTitle").val(appointment.subject);
                    $("#editDialogFrom").jqxDateTimeInput('setDate', appointment.from);
                    $("#editDialogTo").jqxDateTimeInput('setDate', appointment.to);
                } else if (event.args.innerHTML == "Delete") {
                    // 删除操作
                } else if (event.args.innerHTML == "Mark as done") {
                    // 标记为完成操作
                }
            });
        }
    });

    $("#editDialog").jqxWindow({
        height: 400, width: 400,
        resizable: false, isModal: true, autoOpen: false,
    });
});

示例代码中，我们在编辑菜单项的 click 事件中打开一个对话框，并在对话框中显示当前选中的日程的详细信息。日程的详细信息可以通过 jqxScheduler 提供的 API 方法获取。

示例2：在 jqxScheduler 中添加删除操作

在 contextMenuCreate 中添加删除菜单项，点击后删除当前选中的日程。

$(document).ready(function () {
    $("#scheduler").jqxScheduler({
        contextMenuCreate: function (menu, event) {
            var view = $("#scheduler").jqxScheduler('getView');
            var date = view.getDate();

            var selectedAppointment = $("#scheduler").jqxScheduler('getAppointment', event.args.appointmentId);

            menu.append('<li><a href="#">Edit</a></li>');
            menu.append('<li><a href="#">Delete</a></li>');
            menu.append('<li><a href="#">Mark as done</a></li>');

            menu.on('itemclick', function (event) {
                if (event.args.innerHTML == "Edit") {
                    // 编辑操作
                } else if (event.args.innerHTML == "Delete") {
                    var appointment = selectedAppointment;
                    if (!appointment) {
                        return;
                    }

                    $("#scheduler").jqxScheduler('deleteAppointment', appointment.id);
                } else if (event.args.innerHTML == "Mark as done") {
                    // 标记为完成操作
                }
            });
        }
    });
});

示例代码中，我们在删除菜单项的 click 事件中调用 jqxScheduler 提供的 deleteAppointment 方法，删除当前选中的日程。