javascript-全日历根据外部事件添加颜色

我正在使用jQuery全日历.在页面中,我有两个输入元素

1- startdate(开始某个事件的日期)

2次-频率(该事件将在一天中的任何一天之后重复出现)

因此,基于这两个参数,我必须将颜色从开始日期更改为结束日期(更改日期频率).

那么在外部如何将颜色放入全日历？

jsfiddle link-http://jsfiddle.net/bhupendra21589/f160m655/

更改开始日期或频率后..从开始日期到结束日期的日期(开始日期频率)应为彩色？

请帮助

解决方法:

您可以使用dayRender callback,它是“用于修改日间单元格的挂钩”.

本示例在dayRender上执行以下操作：

1)检查输入的开始日期是否有效.

2)添加频率的天数.结果将是选择的第一天作为频率的天数(因此,如果频率为2,则突出显示的总天数将为3).如果这不是预期的行为,则将if语句中的check更改为<. endDate.format( “YYYYMMDD”). 3)绘制日历并渲染每一天后,它将检查渲染的日期是否在开始日期频率内.如果是这样,请添加一个类以使其突出显示.

$(document).ready(function() {
  var loadCal = function() {
    $('#fullCal').fullCalendar({
      header: {
        left: '',
        center: 'prev title next today',
        right: ''
      },
      dayRender: function(date, cell) {
        var startDate = moment($("#startdate").val());
        if (startDate.isValid()) {
          var endDate = moment(startDate).add($("#frequency").val(), 'days');
          //just compare the YYYYMMDD so don't run into problems with hour/minute/second, etc. if we used valueOf() or similar
          if (moment(date).format("YYYYMMDD") >= startDate.format("YYYYMMDD") && moment(date).format("YYYYMMDD") <= endDate.format("YYYYMMDD")) {
            cell.addClass("pjpDay");
          };
        }
      }
    });
  };

  //reload calendar on input change
  $("input").on("change", function() {
    $('#fullCal').fullCalendar('destroy'); //must redraw the calendar, so destroy it and then reload.
    loadCal();
  });

  loadCal(); //initial load of calendar
});

.pjpDay {
  background-color: #6666cc !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>

<p>
  <label for="startdate">PJP start date:</label>
  <input id="startdate" type="date">
</p>
<p>
  <label for="frequency">PJP cycle frequency:</label>
  <input id="frequency" min="1" type="number" value="2">
</p>

<div id="fullCal"></div>

标签：javascript,jquery,fullcalendar
来源： https://codeday.me/bug/20191013/1908487.html