正在更改特定日期的完整日历日CSS
Altering fullcalendar day CSS for specific dates
我在这个Fiddle中使用fullcalendar,我想将上个月的任何一天和当前月份后的任何一日设置为禁用/不可见/灰显/等。我知道我可以用javascript处理事件创建,但有没有办法使用CSS来更改本月前和本月后几天的外观?这可能吗?在我看到的文档中,"自定义时间轴视图的持续时间",但不确定这是否是我可以用来实现的?它还说我需要高级版本才能有这个功能?
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventRender: function(event, element, view) {
var nextEventLeft = element.offset().left + element.width() + 5;
element.parent().children().eq(element.index() + 1).css('left', nextEventLeft);
},
selectable: true,
selectHelper: true,
year: y,
month: m,
date: d,
slotMinutes: 15,
editable: true,
events: [{
title: 'Sales Meeting',
start: new Date(y, m, d, 10, 30),
end: new Date(y, m, d, 11, 30),
allDay: false,
className: 'fc-event-height-overirde'
}]
});
console.log($('#calendar').html());
});
<div style="border:solid 1px red;">
<div id='calendar'></div>
</div>
好吧,我玩了一点,试试这个。
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventRender: function (event, element, view) {
var nextEventLeft = element.offset().left + element.width() + 5;
element.parent().children().eq(element.index()+1).css('left',nextEventLeft);
},
selectable: true,
selectHelper: true,
year: y,
month: m,
date: d,
slotMinutes: 15,
editable: true,
events: [
{
title: 'Sales Meeting',
start: new Date(y, m, d, 10, 30),
end: new Date(y, m, d, 11, 30),
allDay: false,
className: 'fc-event-height-overirde'
}
]
});
console.log($('#calendar').html());
function IsCurrentMonth() {
if ($('.fc-button-today').hasClass('fc-state-disabled'))
$('.fc-header-left span[class^="fc-button"]').closest('#calendar').addClass('current-month');
else
$('.fc-header-left span[class^="fc-button"]').closest('#calendar').removeClass('current-month');
}
IsCurrentMonth();
$('.fc-header-left span[class^="fc-button"]').click(function() {
IsCurrentMonth();
});
});
还添加此样式代码:
#calendar:not(.current-month) .fc-content .fc-day-number {
color: #808080;
opacity: 0.3;
}
相关文章:
- CSS-如何定位内容数据标题
- JavaScript打印功能使日历停止工作
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- CKEditor-我在editor.css中的风格是't
- HTML/CSS/JS切换不同的谷歌日历是同一个框架
- 如何使用javascript、jquery、html和css制作基本的事件日历
- jQuery css"点击“;不会'更改日历中选定的月份后无法工作
- 阿尔肖日历特定日期 css 更改颜色
- 根据季节(当前日历月)更改<正文>(在 CSS 中)的背景图像
- 创建一个可调整大小的日历(html/css/jquery)
- 正在更改特定日期的完整日历日CSS
- 在单元格上引导完整的日历CSS
- 如何使用基础CSS日历在ng-include Angular JS
- 完整日历- Rails -为事件添加自定义CSS类
- jquery/css日历错误