改造之后的fullCalendar(改事件背景、标题自定义、无星期、左右按钮)
?改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}*/; }
?