将自定义按钮/文本添加到全日历中没有事件的日期

Question

我已经浏览了多次完整日历的文档，但从未遇到过与此问题相关的主题。到目前为止，我可以使用 eventRender 将文本显示到事件的日期，例如 already booked ，如下所示：

eventRender: function(event, element){
                    var view = $('#calendar').fullCalendar('getView');
                        var eventStart = moment(event.start);
                        var eventEnd = event._end === null ? eventStart : moment(event.end);
                        var diffInDays = eventEnd.diff(eventStart, 'days');
                        $(element).css("display", "none");
                        $('.fc-day[data-date="' + event.start.format("YYYY-MM-DD") + '"]').append("<div class='already-booked'><span>Already Booked <br></span></div>");
                },

但是，我想在没有任何事件的日期添加带有">可用"的文本/按钮。但是，已经好几个星期了，我找不到解决方案。

因此，我将不胜感激任何帮助来实现此要求。

为了使事情变得更容易，我在代码笔上创建了一个笔，可以从这里分叉。我想要的只是向那些没有事件的日期添加文本"可用"，并且日期应该不是过去的日期。

Answer 1

我在不包含任何事件的天数中添加了文本"可用"。请检查一下：代码笔链接：完整日历

var calender; 
var date = new Date();
var start_date = null;
var end_date = null;
var events = [];
var events_dates = [];
function getCalenderEvents(start_date,end_date){
  $.ajax({
    url:"https://api.myjson.com/bins/z31j5",
    type:"GET",
    dataType: 'json',
    success: function(doc) {
      events = [];
      events_dates = [];
      calender.fullCalendar( 'removeEvents');
      if(doc.data.length > 0){
        for(var i=0;i<(doc.data.length);i++){
          var startTime1 = new Date((doc.data[i].start).toString()).getTime(), endTime1 = new Date((doc.data[i].end).toString()).getTime();
          while (startTime1 <= endTime1){
            events_dates.push(moment(startTime1).format('YYYY-MM-DD'));
            startTime1 += 86400000;
          }
          doc.data[i].start = new Date(doc.data[i].start);
          doc.data[i].end = new Date(doc.data[i].end);
          events.push(doc.data[i]);
        }
      }
      console.log(events);
      console.log(events_dates);
      var startTime = new Date((start_date).toString()).getTime(), endTime = new Date((end_date).toString()).getTime();
      for(var loopTime = startTime; loopTime <= endTime; loopTime += 86400000){
        let date = moment(loopTime).format('YYYY-MM-DD');
        let e = {"title":"Avilable","id":(events.length + 1),"start":new Date(date),"end":new Date(date),'date':date};
        if(events_dates.indexOf(date) < 0){
          events.push(e);
        }
      }
      console.log(events);
      calender.fullCalendar( 'addEventSource', events);
    },  
  });
}
$(document).ready(function(){
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        calender = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            viewRender: function (view, element) {
              start_date = moment(view.start).format('YYYY-MM-DD');
              end_date = moment(view.end).format('YYYY-MM-DD');
              getCalenderEvents(start_date,end_date);
            }
          
        });
})

<div id="calendar">