Question

我正在使用JqxScheduler进行日程表约会。
似乎如果我们在不同的单元格上使用左键单击和右键单击来选择一个单元格，则jqxScheduler不会选择我们右键单击的那个单元格。
我的要求是，如果用户右键单击其他单元格并选择该鼠标右键，则重置所有单元格。添加了一个解决方案，但第一次只能使用一次。

$(document).ready(function () {
    var appointments = new Array();

    var appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        location: "",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2015, 10, 23, 9, 0, 0),
        end: new Date(2015, 10, 23, 16, 0, 0)
    }


    appointments.push(appointment1);

    // prepare the data
    var source =
    {
        dataType: "array",
        dataFields: [
            { name: 'id', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'location', type: 'string' },
            { name: 'subject', type: 'string' },
            { name: 'calendar', type: 'string' },
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };
    var adapter = new $.jqx.dataAdapter(source);
    $("#scheduler").jqxScheduler({
        date: new $.jqx.date(2015, 11, 23),
        width: 850,
        height: 600,
        source: adapter,
        view: 1,
        showLegend: true,
        /**
         * called when the context menu is created.
         * @param {Object} menu - jqxMenu's jQuery object.
         * @param {Object} settings - Object with the menu's initialization settings.
        */


        /**
         * called when the menu is opened.
         * @param {Object} menu - jqxMenu's jQuery object.
         * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.
         * @param {jQuery.Event Object} the open event.
        */
        contextMenuOpen: function (menu, appointment, event) {
            var date = $('.jqx-fill-state-hover').attr('data-date')
            if (date) {
                var d = new Date(date);

                var year = d.getFullYear();
                var month = (d.getMonth() + 1);
                var date = d.getDate();
                var hours = d.getHours();

                var minutes = d.getMinutes();
                $("#scheduler").jqxScheduler('clearSelection');
                $("#scheduler").jqxScheduler('selectCell', new $.jqx.date(year, month, date, hours, minutes));
                console.log(date)
            }
        },
        /**
         * called when the menu is closed.
         * @param {Object} menu - jqxMenu's jQuery object.
         * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.
          * @param {jQuery.Event Object} the close event.
       */
        contextMenuClose: function (menu, appointment, event) {
        },
        ready: function () {
            $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
        },
        resources:
        {
            colorScheme: "scheme02",
            dataField: "calendar",
            source: new $.jqx.dataAdapter(source)
        },
        appointmentDataFields:
        {
            from: "start",
            to: "end",
            id: "id",
            description: "description",
            location: "place",
            subject: "subject",
            resourceId: "calendar"
        },
        views:
            [
                'dayView',
                'weekView',
                'monthView'
            ]
    });


});

<HTML>
	<HEAD>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
		<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
		<script type="text/javascript" src="https://www.jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
		<script type="text/javascript" src="https://www.jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
		<script type="text/javascript" src="app.js"></script>
		<link rel="stylesheet" href="app.css" type="text/css" />

	</HEAD>
	<BODY>
        <div id="scheduler">
         
        </div>
	
</HTML>

Answer 1

JqxScheduler没有提供默认功能。但是，您可以使用以下逻辑，

contextMenuOpen: function (menu, appointment, event) {
    var date = $("td[data-selected='true']").attr('data-date');
    alert(date)
}

在准备就绪的文档中创建事件鼠标右键。

 $("#scheduler tbody tr td").mousedown(function(e){ 
    if(e.button == 2 ) { 
        $('#scheduler').find('td').each (function() {
            $(this).removeAttr("data-selected");
        });  
        $(this).attr("data-selected","true")
    }
 });

JqxScheduler上下文菜单选择右键单击的单元格

1 个答案: