这是一款改造后的fullCalendar,这个样式是应用了主题的哦，你只要把我说的几个地方，复制样式名在相应的文件中搜索找到后改下就能实现这样的效果了。具体改了为今天设置背景为图片、事件背景插入了图片、标题是自定义的、星期没有显示了、左右按钮样式变了、点击左右按钮时日历高度没有变化了。附件是我实现后的效果图和改过的源码文件。
这些都是通过改源码才能实现的哦，下面我说明改哪些地方能实现哪些效果。
这是js要改的地方，实现功能：标题是自定义的、星期没有显示了
$(function(){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
theme:true,
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
//dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
//dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
//这里是设置无星期显示的
dayNames: ["", "", "", "", "", "", ""],
dayNamesShort: ["", "", "", "", "", "", ""],
editable: false,
disableResizing:false,
//这里是设置标题自定义的，我设置为“个人日程安排”了
titleFormat:{month: '个人日程安排 MMMM'},
events:function(start, end, callback) {
var urlR = baseURL+"/toJsonForCalandar.do?index=shouye";
$.ajax({
url: urlR,
cache:false,
success:function(data) {
//给日历增加事件
var events = [];
var info = eval(data);
for (var i = 0; i < info.length; i++) {
var ev = info[i];
var evtstart=formatJson(ev.startTime.time);
events.push({
title:"",
start:evtstart
//这里换事件的背景颜色
// backgroundColor:"red"
});
}
callback(events);
}
})
},eventClick: function(calEvent, jsEvent, view) {
var url=baseURL+"/kinth/daily/perschedule/perscheduleByCalMain.jsp?type=false";
showPer = showModalDialog(url, '查看日程', 'dialogWidth:1000px;dialogHeight:800px;dialogLeft:280;dialogTop:180;scroll:no;');
},dayClick:function(date, allDay, jsEvent, view){
//$(this).css({color: "red", background: "blue" });
//$(this).removeClass("ui-widget-content");
var url = baseURL+"/kinth/daily/perschedule/perscheduleMainLeader.jsp";
newPer = showModalDialog(url, window, 'dialogWidth:1200px;dialogHeight:720px;dialogLeft:280;dialogTop:180;scroll:no;');
}
});
});
改fullCalendar.css，实现的功能：为今天设置背景为图片、事件背景插入了图片、左右按钮样式变了、点击左右按钮时日历高度没有变化了。
/*这样式的效果是当你点击左右按钮的时候，日历文本区的高度不会随之变动，因为固定了为10px，如果
想设置文本行间的高度可以在上面的js中加入配置contentHeight: 高度值*/
.fc-grid .fc-day-content {
/*clear: both;*/
padding: 2px 2px 1px; /* distance between events and day edges */
height:10px;
}
/*更改今天的背景为图片*/
/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
/*border: 1px solid #fcefa1 {borderColorHighlight}*/;
background: #ffffff/*{bgColorHighlight}*/
url(images/bg_today.png)/*{bgImgUrlHighlight}*/
50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/
no-repeat/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
/*更改有日程事件的背景为图片*/
/* Global Event Styles
------------------------------------------------------------------------*/
.fc-event {
border: 0px; /* default BORDER color */
/*background-color: #3a87ad; default BACKGROUND color */
background-image:url('../images1/bg_work.png');
background-repeat:no-repeat;
color: #fff; /* default TEXT color */
font-size: .85em;
cursor: default;
}
/*这个是我自己加的，用来设置背景图片的位置，要把此样式加到fullcalendar.min.js文件中
如：
function i() {
Q = t("<div class='position1' style='position:absolute;z-index:8;top:4;left:10'/>").appendTo(e);
}
*/
.position1{
top:4px;
left:15px;
}
/*处理点击左右按钮的时候会动的现象，把那行样式注释掉*/
.fc-header .fc-button {
/*margin-bottom: 1em; */
vertical-align: top;
}
/*文件jquery.ui.theme.css中，去掉点左右按钮的样式，删除下面样式即可*/
/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #99ACBA/*{borderColorDefault}*/;
background: #D0E6F4/*{bgColorDefault}*/ url()/*{bgImgUrlDefault}*/
50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/
repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/;
color: #555555/*{fcDefault}*/; }