问题描述
我正在使用jquery全日历。在页面中我有两个输入元素
1- startdate（它的开始某个事件的日期）
2-频率（该事件之后没有一天，它会重复它自己）
因此，基于这两个参数，我必须将颜色从startdate到enddate（sartdate +频率） 。
因此，外部如何将颜色放在完整日历中？
jsfiddle link -http：//jsfiddle.net/bhupendra21589/f160m655/
after改变startdate或frequency..date从startdate到enddate（startdate + frequency）应该是彩色的???????
$ b $ p
plzz helpp
您可以使用这是修改星期细胞的钩子。
这个例子在dayRender中做了如下工作：
检查输入的开始日期是否有效。
添加频率的天数。结果将是所选的第一天+频率的天数（所以如果频率是2，那么突出显示的总天数将是3）。如果这不是预期的行为，则将if语句中的检查更改为< endDate.format（YYYYMMDD）。
3）当日历绘制并呈现每一天时，它会检查日期呈现在开始日期+频率内。如果是这样，请添加一个类来突出显示它。
I am using jquery full-calender. In page I have two input element
1- startdate( its date to start some event)
2- frequency( no of day for that event after that it will repeat itself )
So based on these two parameter I have to put color from startdate to enddate(sartdate+frequency).
So externally how can I put color in full-calender????
jsfiddle link-http://jsfiddle.net/bhupendra21589/f160m655/
after changing startdate or frequency..date from startdate to enddate(startdate+frequency) should be colored???????
plzz helpp
You can use the dayRender callback which is the "hook for modifying a day cell."
This example does the following on dayRender:
1) Checks that the start date from the input is valid.
2) Adds the # of days for the frequency. The result will be the initial day selected + the number of days for frequency (so if frequency is 2 then total # of days highlighted will be 3). If this isn't the expected behavior, then change the check in the if statement to < endDate.format("YYYYMMDD").
3) When the calendar draws and each day is rendered, it checks to see if the day being rendered is within the start date + frequency. If so, add a class to highlight it.
$(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>
这篇关于全日历根据外部事件添加颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！