如何使用 dx-scheduler/angularjs 自定义事件添加

Question

我正在使用 dx-scheduler，我想调整添加事件表单。在This Example 我添加了 2 个下拉菜单，优先级和类型，我想知道如何将它们的位置更改为在描述之前，如图所示。

这是我添加资源的方式：

*我想知道他们是否可以定义订单

  resources: [{
            fieldExpr: "priorityId",
            allowMultiple: false,
            dataSource: priorityData,
            label: "Priority",
             //order:3,
        }, {
            fieldExpr: "typeId",
            allowMultiple: false,
            dataSource: typeData,
            label: "Type",
            //order:4,
        }]

这是标记

 <div dx-scheduler="options", dx-item-alias="data">
            <div data-options="dxTemplate:{name:'dateCellTemplate'}">

            </div>            
        </div>

Answer 1

唯一的方法是为您的表单 (example from documentation) 做一个自定义模板，通过覆盖实现 onAppointmentFormOpening 函数的表单选项项目，下面是一个示例，我尝试重新排序项目以满足您的需求。

工作link

$scope.options = {
    timeZone: "America/Los_Angeles",
    height: 600,
    dataSource: [],
    showAllDayPanel: false,
    views: ["month"],
    currentView: "month",
    currentDate: new Date(2021, 4, 25),
    startDayHour: 7,
    endDayHour: 23,
    resources: [{
        fieldExpr: "priorityId",
        allowMultiple: false,
        dataSource: priorityData,
        label: "Priority"
    }, {
        fieldExpr: "typeId",
        allowMultiple: false,
        dataSource: typeData,
        label: "Type"
    }],
    onAppointmentFormOpening: function(data) {
        var form = data.form;
      
      var items = form.option("items");
      var updatedItems = [];
      var descriptionItem = {};
      for (var i in items) {
        var itemGroup = items[i];
        if(itemGroup.name === "mainGroup") {

          for (var j in itemGroup.items) {
          var innerItem = itemGroup.items[j];
          
              if(innerItem.dataField !="description") {
                updatedItems.push(innerItem);
              }
              else {
                descriptionItem = innerItem;
              }
          }
          updatedItems.push(descriptionItem);
          itemGroup.items = updatedItems;
        }
      }
      
       form.option("items",items);
       console.log(form.option("items"));
         
    }
};