改造之后的fullCalendar（改事件背景、标题自定义、无星期、左右按钮）

这是一款改造后的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("
").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}*/; }