更改fullcalendar中日期的背景颜色 [英] change the background color of the dates in fullcalendar
本文介绍了更改fullcalendar中日期的背景颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在ROR应用程序中，我有实现了jquery fullcalendar 。在fullcalendar的月份视图中，我需要将日期的背景颜色从开始日期更改为结束日期。我获得了开始日期和结束日期。但我无法更改这些日期的背景颜色。我已经尝试过如下所示，但是日历的所有月份（从开始日期到结束日期）都在变化。有没有其他的方式来实现这一目标？请帮忙。
$（document）.ready（function（）{
var calInstance = $（'＃calendar'）
$（'。task_name'）。live（'click'，function（）{$ b $ alert（this.id）;
$ .ajax （{
url：'pending_task_details'，
dataType：'json'，
cache：false，
data：{
task_id：this.id
}，
成功：函数（数据，响应，事件，日期）{
var start_date = new Date（data.start_date）;
var end_date = new Date（data.end_date）;
alert（开始日期是.....+ start_date）;
alert（结束日期是...........+ end_date）;
for（i = start_date; i <= end_date; i = new Date（i.getTime（）+ 86400000））{
getCellFromDate（i，calInstance）;
}
}
}）;
}）;
函数getCellFromDate（thisDate，calInstance）{
var d = thisDate.getDate（）;
var m = thisDate.getMonth（）;
var y = thisDate.getFullYear（）;
$（'＃calendar'）。fullCalendar（'gotoDate'，y，m，d）;
var coords = calInstance.fullCalendar（'getView'）。dateCell（new Date（thisDate）），
$ row = calInstance.find（'。fc-view-month tbody tr'）。eq coords.row），
$ cell = $ row.find（'td'）。eq（coords.col）;
$（$ cell）.find（'。fc-day-number'）。parent（）。css（'background-color'，'＃6E5849'）;
$（$ cell）.find（'。fc-day-number'）。css（{
'background-color'：'＃6E5849'，
'border'：'1px固体＃6E5849'
}）
}
}）;
解决方案
首先，您需要一个函数来处理当天月份元素
类似这样：
//根据给定的事件日期返回完整日历日jquery对象（< td ...>）
//匹配日期和月份
//
/ /假设：
// - 事件日期是如果与当前可查看月份相同的年份
// - fc-day * TD按时间顺序排列
// - fc -day * TD不是当前月份有一类fc-other-month
//
findFullCalendarDayForClickedEvent：function（eventDate）{
var foundDay;
var $ theCalendar = $（'#myCalendar'）;
var currentDate = $ theCalendar.fullCalendar（'getDate'）;
var fullCalendarDayContainers = $ theCalendar.find（'td [class * =fc-day]'）;
for（var i = 0; i< fullCalendarDayContainers.length; i ++）{
var $ currentContainer = $（fullCalendarDayContainers [i]）;
var dayNumber = $ currentContainer.find（'.fc-day-number'）.html（）;
//首先找到匹配的日期
if（eventDate.getDate（）== dayNumber）{
//现在月份检查，如果我们当前的容器有fc-other-month
//然后事件月份和当前月份需要不匹配，
//否则容器丢失fc-other-month然后事件
//月份和当前月（月）需要匹配
如果（$ currentContainer.hasClass（'fc-other-month'））{
if（eventDate.getMonth（）！= currentDate.getMonth（））{
foundDay = $ currentContainer;
休息;
else {
if（eventDate.getMonth（）== currentDate.getMonth（））{
foundDay = $ currentContainer;
休息;
}
}
}
}
return foundDay;
}
更多信息请参阅：https://stackoverflow.com/posts/13647014/edit
接下来循环显示每个日期的时间范围
$ b 然后
foundDay.addClass（'选定日期）;
I have implemented a jquery fullcalendar in a ROR application. In the month view of fullcalendar, I need to change the background color of the dates from start date to end date. I got the start date and end date. But I am not able to change the background color of these dates. I have tried like below but it is changing for all the months(from start date to end date) of the calendar. Is there any other way to achieve this?? Please help. I am a novice in Javascript.
$(document).ready(function () {
var calInstance = $('#calendar')
$('.task_name').live('click', function () {
alert(this.id);
$.ajax({
url: 'pending_task_details',
dataType: 'json',
cache: false,
data: {
task_id: this.id
},
success: function (data, response, event, date) {
var start_date = new Date(data.start_date);
var end_date = new Date(data.end_date);
alert("The start date is....." + start_date);
alert("The end date is..........." + end_date);
for (i = start_date; i <= end_date; i = new Date(i.getTime() + 86400000)) {
getCellFromDate(i, calInstance);
}
}
});
});
function getCellFromDate(thisDate, calInstance) {
var d = thisDate.getDate();
var m = thisDate.getMonth();
var y = thisDate.getFullYear();
$('#calendar').fullCalendar('gotoDate', y, m, d);
var coords = calInstance.fullCalendar('getView').dateCell(new Date(thisDate)),
$row = calInstance.find('.fc-view-month tbody tr').eq(coords.row),
$cell = $row.find('td').eq(coords.col);
$($cell).find('.fc-day-number').parent().css('background-color', '#6E5849');
$($cell).find('.fc-day-number').css({
'background-color': '#6E5849',
'border': '1px solid #6E5849'
})
}
});
解决方案
First you need a function get a handle on the day of the month element
Something like this:
// based on the given event date return the full calendar day jquery object (<td ...>)
// matching day and month
//
// assumptions:
// - the event date is if for the same year as the current viewable month
// - the fc-day* TD's are in chronological order
// - the fc-day* TD's not for the current month have a class of fc-other-month
//
findFullCalendarDayForClickedEvent : function( eventDate ) {
var foundDay;
var $theCalendar = $( '#myCalendar' );
var currentDate = $theCalendar.fullCalendar( 'getDate' );
var fullCalendarDayContainers = $theCalendar.find( 'td[class*="fc-day"]' );
for( var i = 0; i < fullCalendarDayContainers.length; i++ ) {
var $currentContainer = $( fullCalendarDayContainers[ i ] );
var dayNumber = $currentContainer.find( '.fc-day-number' ).html();
// first find the matching day
if ( eventDate.getDate() == dayNumber ) {
// now month check, if our current container has fc-other-month
// then the event month and the current month needs to mismatch,
// otherwise container is missing fc-other-month then the event
// month and current month need to match
if( $currentContainer.hasClass( 'fc-other-month' ) ) {
if( eventDate.getMonth() != currentDate.getMonth() ) {
foundDay = $currentContainer;
break;
}
}
else {
if ( eventDate.getMonth() == currentDate.getMonth() ) {
foundDay = $currentContainer;
break;
}
}
}
}
return foundDay;
}
For more see: https://stackoverflow.com/posts/13647014/edit
Next loop over your time frame passing in each date to the finder function.
Then
foundDay.addClass( 'selected-day' );
这篇关于更改fullcalendar中日期的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
