在全日历中为每个单元格添加一个按钮，以允许用户使用jQuery

Question

我一直在使用jQuery和fullcalendar创建日历，以使用php和MYSQL显示数据库中的事件。

日历看起来像这样。

事件以红色显示。我希望能够在每个没有事件的单元格中添加一个按钮，以使用户能够添加一个按钮。

这是我尝试过的代码

viewRender: function (view) {
   $(".fc-content").append('<button>Add</button>')  
   }

我的完整代码。

$(document).ready(() => {
	const calendar = $('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'agendaWeek,agendaDay'

		},
		defaultView: 'agendaWeek',
		defaultTimedEventDuration: '01:00',
		allDaySlot: false,
		scrollTime: '09:00',
		businessHours: {
		  dow: [ 2, 3, 4, 5, 6 ], 
		  start: '09:00', 
		  end: '17:30'
		},

		//viewRender: function (view) {
                  //  $(".fc-content").append('<button>Book</button>');
                      //  },
  
		long: /^en-/.test(navigator.language) ? 'en' : 'zh-cn',
		eventOverlap: (stillEvent, movingEvent) => {
			return true;
		}, 
		events:
			 <?php echo $json;?>

			  //'2018-12-12T15:00+08:00'
		//}, 
		//{
			//title: '',
			//start: '' //'2018-12-12T12:00+08.00'
		,
		eventColor: '#FF0000',
		edittable: true,
		selectable: true,
		selectHelper: true,
		select: (start, end) => {
			const duration = (end - start) / 1000;
				if(duration == 1800){
					// set default duration to 1 hr.
					end = start.add(30, 'mins');
					return
				calendar.fullCalendar('select', start, end);
				}
				let eventData;
				if (title && title.trim()) {
					eventData = {
						title: title,
						start: start,
						end: end
					};
				calendar.fullCalendar('renderEvent', eventData);
				}

				calendar.fullCalendar('unselect');

		},
		 eventRender: (event, element) => {
		 	const start = moment(event.start).fromNow();
		 	element.attr('title', start);

		 },

	    loading: () => {}
  });
});

Answer 1

首先确定，除非从UI / UX角度需要该按钮，否则可以跳过添加按钮的操作，而只使用fullCalendars内置方法/事件。

示例（跳过不相关的选项）：

fullCalendar({
...
editable: true,
selectable: true, // makes each day selectable
select: function (start, end) {
// in this select callback you are given the start and end dates of the user's selection
// when a user selects any cells this will fire and you can do stuff in here
// fullcalendar will always give 2 dates as callback, even if the user only selected 1 
// date, the 'end' will correspond to the next day actually...
events: [{event1},{event2},{event3}], // use this to initialize the events already //existing
eventClick: function (event) {
// this is the handler that will run when the user clicks on an event, not a day! an //event on a day
}
}
})

我希望这会有所帮助，您随时可以阅读更多on the docs

Answer 2

您不需要按钮.. 您可以在函数事件中做到这一点

$('#calendar').fullcalendar({

eventClick     : function(xEvent, jsEvent, view){ hus_eventClick(xEvent, jsEvent, view);} ,
});

并在功能显示对话框中添加事件.. https://fullcalendar.io/docs/dayClick