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

我正在使用jquery全日历。 在页面I中有两个输入元素

1- startdate（开始某个活动的日期）

2频率（该事件的日期之后，它将重复）

因此，基于这两个参数，我必须将颜色从startdate设置为enddate（sartdate + frequency）。

那么外部我怎么能把颜色放在全日历？

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

更改startdate或frequency..date从startdate到enddate（startdate + frequency）应该被着色???????

plzz helpp

Answer 1

您可以使用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; } 

     
 PJP start date:  
 
 PJP cycle frequency:  
 
 

Answer 2

在没有代码的情况下，几乎无法正确回答问题。

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

 $('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' }] }); })