javascript - 向全日历中的每个单元格添加一个按钮，以允许用户使用 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 的 Angular 来看需要按钮，否则您可以跳过添加按钮而只使用 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