Добавление кнопки в каждую ячейку в fullcalendar, чтобы позволить пользователю добавить событие, используя 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

Вам не нужна кнопка .. Вы можете сделать это в функции eventClick этого триггера в click в любой день

$('#calendar').fullcalendar({

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

и в диалоговом окне отображения функции добавить событие. https://fullcalendar.io/docs/dayClick

Answer 2

Хорошо, во-первых, если кнопка не требуется с точки зрения 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
}
}
})

Надеюсь, это поможет, вы всегда можете прочитать больше в документации