fullcalendar V3 如何添加 JET Context Menu

如何解决fullcalendar V3 如何添加 JET Context Menu

我正在尝试合并来自 https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=menu&demo=contextMenu 的上下文菜单使用完整日历 io 事件，但我无法理解如何在完整日历 io 事件下插入 oj 组件。

我知道可以使用 jquery ui 上下文菜单完成上下文菜单，但我想知道如何使用 fullcalendar io 事件中的 jet 代码。

你能告诉我如何在下面的代码中插入 jet 上下文菜单吗？

JET

require(['ojs/ojoffcanvas','knockout','ojs/ojbootstrap','ojs/ojarraydataprovider','jquery','ojs/ojknockout','fullCalendar','moment','jqueryui','jquerycontextmenu','ojs/ojdiagram','ojs/ojformlayout','ojs/ojbutton','ojs/ojmenu','ojs/ojoption','ojs/ojinputtext','ojs/ojselectcomboBox'],function (ko,Bootstrap,ArrayDataProvider,$) {    

    
      function ChartModel() {
        var self = this;
        self.addressBookData = ko.observableArray([]);  
        self.columns = ko.observableArray([
            { headerText : 'title',field : 'title'},{ headerText : 'start',field : 'start'},{ headerText : 'end',field : 'end'},{ headerText : 'QuantityOrdered',field : 'QuantityOrdered'},{ headerText : 'QuantityCompleted',field : 'QuantityCompleted'}
        ])
        
   this.dataprovider = new ArrayDataProvider(self.addressBookData,{ keyAttributes: 'title'});   
    
    }
    
function getE1Data(self,callback) {
    var input = {
        aliasNaming: true,findOnEntry: "TRUE",maxPageSize: "100",targetName: "XXX",aliasNaming : true,targettype: "view",dataServiceType: "broWSE",returnControlIDs: "TABLEX.DOCO|TABLEX.DL01|TABLEX.LITM|TABLEX.STRT|TABLEX.DRQJ|TABLEX.UORG|TABLEX.soQS|TABLEX.soCN|TABLEX.SRST"
    };
    
    callAISService(input,DATA_SERVICE,function(response) {
        if (response.message) {
            callback("Failed");
        } else {
            renderData($,self,response.fs_DATAbroWSE_V4801C.data.gridData.rowset);
            callback("success");
        }
    });
}

       
function renderData($,data)  {

    self = this;
    this.events = [];
      data.forEach(element => {
    const obj ={};
    const extendedProps ={};
        var teststr1 = (element.TABLEX_LITM.value).concat(" - ",(element.TABLEX_DOCO.value));
        var teststr2 = (element.TABLEX_DL01.value).concat(" - ",teststr1);
        obj.title = teststr2,obj.start = new Date(element.TABLEX_DRQJ.value),obj.end= new Date(element.TABLEX_STRT.value),extendedProps.QuantityOrdered = element.TABLEX_UORG.value,extendedProps.QuantityCompleted = element.TABLEX_SOQS.value,extendedProps.QuantityScrapped = element.TABLEX_SOCN.value,extendedProps.WOStatus = element.TABLEX_SRST.value,obj.extendedProps = extendedProps,events.push(obj); 
});  
  
    this.calendar = $ ('#calendar').fullCalendar(
    {
    editable: true,weekends : true,selectable: true,selectHelper:true,timeFormat: 'H(:mm)',displayEventTime: false,header:{
        left : 'prev,next,today',center : 'title',right : 'month,agendaWeek,agendaDay'
    },events: events,eventClick: function(self,events) {
      console.log(events.extendedProps.QuantityOrdered);
      console.log(events.extendedProps.QuantityCompleted);
    },eventRender: function (events,element) {
        element.attr('href','javascript:void(0);');
        element.click(function() {
            $("#startTime").html(formatDate(events.start));
            $("#endTime").html(formatDate(events.end));
            $("#QuantityOrdered").html(events.extendedProps.QuantityOrdered);   
            $("#QuantityCompleted").html(events.extendedProps.QuantityCompleted); 
            $("#QuantityScrapped").html(events.extendedProps.QuantityScrapped);
            $("#WOStatus").html(events.extendedProps.WOStatus);
            $("#eventContent").dialog({ modal: true,resizable: true,effect: "explode",title: events.title,width:350});           
        });       
     
    }
}); 

}
 
    $(document).ready(function() {
        var chartModel = new ChartModel();
        getE1Data(chartModel,(status)=>{
            ko.applyBindings(chartModel,document.getElementById('calendar'));             
        });
    }); 
 });

JET

HTML

        <body 
        <br />
        <div class = "container">
        <div id = "calendar"> </div>
        </div>  
        </body>

HTML

请找到下面的示例 HTML，它使用了 JET 库，如 oj-menu 使用哪个上下文菜单被实现：

    <body id="content">
            <oj-input-text id="filter" class="oj-form-control-max-width-md" label-hint="Filter" label-edge="inside"
                           placeholder="Type to filter" on-raw-value-changed="[[handleValueChanged]]" value="{{filter}}" clear-icon="always">
              </oj-input-text>
           <oj-input-text id="filter1" class="oj-form-control-max-width-md" label-hint="Filter1" label-edge="inside"
                           placeholder="Type to filter" on-raw-value-changed="[[handleValueChanged1]]" value="{{filter1}}" clear-icon="always">
              </oj-input-text>
               <oj-input-text id="filter2" class="oj-form-control-max-width-md" label-hint="Filter1" label-edge="inside"
                           placeholder="Type to filter" on-raw-value-changed="[[handleValueChanged2]]" value="{{filter2}}" clear-icon="always">
              </oj-input-text>
                 <oj-table id='table' aria-label='Departments Table'
                                 data='[[dataprovider]]' 
                                 scroll-policy='loadMoreOnScroll'
                                 columns-default.sortable='disabled' 
                                 columns='{{columns}}'
                                 style='width:100%; height: 1000px;'> 
                                 
                <oj-menu id="ctxMenu" slot="contextMenu" aria-label="Match Edit">
                <oj-option value="Action 1">Work Centre Details</oj-option>
                <oj-option value="Action 12">Resource Units</oj-option>
                <oj-option value="Action 13">Work Day Calendar</oj-option>
                </oj-menu>
                
    <div id="eventContent" title="Event Details">
    <div id="eventInfo"></div>
    </div>
            </oj-table>
            
    </body>