javascript - fullcalendar.js 自动选中并且复选框可用

Question

我有角色。

1. 当用户单击阻止框时。框将在单击框后选择 2 框（如鼠标拖动选择）。

2. 如果 2 个盒子有一个或多个联合一些事件。选择失败。（确保有 2 个盒子可用）但我坚持如何去做。

我想为活动建造注册大楼。这是获得注册时间的界面。

$('#calendar').fullCalendar({
            defaultView: 'agendaWeek',
            selectable: true,
            eventLimit: true, // allow "more" link when too many events
            allDaySlot: false,
            editable: false,
            selectAllow: function(selectInfo) {
                var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
                console.log(selectInfo.end);
                return duration.asHours() <= 1;
            },
            selectMinDistance: 0,
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            eventMouseover: function(event, jsEvent, view) {},
            validRange: function(nowDate) {
                nowDate = nowDate.clone().add(-1, 'day');
                return {
                    start: nowDate,
                    end: nowDate.clone().add(1, 'months')
                };
            },
            businessHours: [{
                dow: [1], // Monday - Friday
                start: '08:00',
                end: '12:00',
            }, {
                dow: [4, 5], // Monday - Friday (if adding lunch hours)
                start: '13:00',
                end: '17:00',
            }],
            selectConstraint: "businessHours",
            resources: [{
                id: 'b',
                title: '',
                eventColor: 'green'
            }, ],
            events: [{
                    id: '2',
                    resourceId: 'b',
                    start: '2018-10-27T09:00:00',
                    end: '2018-10-27T10:00:00'
                },
                {
                    id: '3',
                    resourceId: 'b',
                    start: '2018-11-28T12:00:00',
                    end: '2018-11-28T06:00:00'
                },
                {
                    id: '4',
                    resourceId: 'b',
                    start: '2018-10-29T07:30:00',
                    end: '2018-10-29T09:30:00'
                },
                {
                    id: '5',
                    resourceId: 'b',
                    start: '2018-10-29T10:00:00',
                    end: '2018-10-29T15:00:00'
                }
            ],
            select: function(start, end, jsEvent, view, resource) {
                console.log(
                    'select ted',
                    start.format(),
                    end.format(),
                    resource ? resource.id : '(no resource)'
                );
            },
        });
    });

我有片段

$(function() { // document ready
			$('#calendar').fullCalendar({
				defaultView: 'agendaWeek',
				selectable: true,
				eventLimit: true, // allow "more" link when too many events
				allDaySlot: false,
				editable: false,
				selectAllow: function(selectInfo) {
					var duration = moment.duration(selectInfo.end.diff(selectInfo.start));
					console.log(selectInfo.end);
					return duration.asHours() <= 1;
				},
				selectMinDistance: 0,
				header: {
					left: 'prev',
					center: 'title',
					right: 'next'
				},
				eventMouseover: function(event, jsEvent, view) {},
				validRange: function(nowDate) {
					nowDate = nowDate.clone().add(-1, 'day');
					return {
						start: nowDate,
						end: nowDate.clone().add(1, 'months')
					};
				},
				businessHours: [{
					dow: [1], // Monday - Friday
					start: '08:00',
					end: '12:00',
				}, {
					dow: [4, 5], // Monday - Friday (if adding lunch hours)
					start: '13:00',
					end: '17:00',
				}],
				selectConstraint: "businessHours",
				resources: [{
					id: 'b',
					title: '',
					eventColor: 'green'
				}, ],
				events: [{
						id: '2',
						resourceId: 'b',
						start: '2018-10-27T09:00:00',
						end: '2018-10-27T10:00:00'
					},
					{
						id: '3',
						resourceId: 'b',
						start: '2018-11-28T12:00:00',
						end: '2018-11-28T06:00:00'
					},
					{
						id: '4',
						resourceId: 'b',
						start: '2018-10-29T07:30:00',
						end: '2018-10-29T09:30:00'
					},
					{
						id: '5',
						resourceId: 'b',
						start: '2018-10-29T10:00:00',
						end: '2018-10-29T15:00:00'
					}
				],
				select: function(start, end, jsEvent, view, resource) {
					console.log(
						'select ted',
						start.format(),
						end.format(),
						resource ? resource.id : '(no resource)'
					);
				},
			});
		});

	.fc-time-grid .fc-event,
		.fc-time-grid .fc-bgevent {
			width: calc(100% + 4px);
			margin-left: -2px;
			border-radius: 0px;
		}

<html>

<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js"></script>
</head>

<body>
	<div id="calendar"></div>
	
</body>

</html>

标签： javascriptjquery