我正在使用jquery full-calender。在页面I中有两个输入元素
1- startdate(开始某个活动的日期)
2-频率(此事件的日期之后,它将重复)
因此,基于这两个参数,我必须将颜色从startdate设置为enddate(sartdate + frequency)。
外部如何在全日历中添加颜色????
jsfiddle link-http://jsfiddle.net/bhupendra21589/f160m655/
更改startdate或frequency..date从startdate到enddate(startdate + frequency)后应该着色???????
plzz helpp
答案 0 :(得分:1)
您可以使用dayRender callback"钩子来修改日期单元格。"
此示例在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
});
&#13;
.pjpDay {
background-color: #6666cc !important;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
在没有代码的情况下,几乎无法正确回答问题。
但是......这是最好的猜测。日历响应此示例中的按钮单击。您可以使用日期和颜色创建事件对象,如下所示:
$('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'
}]
});
})