时间戳

首页 > 解决方案 > JqxScheduler 上下文菜单选择右键单击的单元格

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

问题描述

我正在使用 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>

标签： javascriptjquery

解决方案

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

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

在准备好的文档中创建一个事件 mousedown。

 $("#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")
    }
 });

推荐阅读