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

Full-calender add color based on external event

本文关键字：事件 添加 颜色 外部 日历      更新时间：2023-09-26

我正在使用jquery full-calender。在页面中，我有两个输入元素

1-开始日期（开始某些事件的日期）

2-频率（该事件之后它将重复的一天）

因此，基于这两个参数，我必须将颜色从开始日期到结束日期（sartdate+频率）。

那么在外部，我如何在全日历中放置颜色????

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

更改开始日期或频率后。从开始日期到结束日期（开始日期+频率）的日期应着色???????

请帮忙

您可以使用 dayRender 回调，它是"修改日单元格的钩子"。

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

1） 检查输入的开始日期是否有效。

2） 添加频率的 # 天。结果将是选择的初始日期 + 频率的天数（因此，如果频率为 2，则突出显示的总天数 # 将为 3）。如果这不是预期的行为，则将 if 语句中的检查更改为 < 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>

没有代码几乎不可能正确回答问题。

但。。。这是一个最好的猜测。在此示例中，日历响应按钮单击。您可以获取日期和颜色，并创建如下所示的事件对象：

$('button').on('click', function() {
    e.preventDefault()
    $('#calendar').fullCalendar({
        events: [{
            title: '1',
            start: new Date(2014, 02, 25, 10, 30),
            end: new Date(2014, 02, 27, 10, 30),
            allDay: false,
            editable: false,
            backgroundColor: '#ED1317'
        }, {
            title: '2',
            start: new Date(2014, 02, 26, 10, 30),
            end: new Date(2014, 02, 28, 10, 30),
            allDay: false,
            editable: false,
            backgroundColor: '#BADA55'
        }]
    });
})
相关文章：