这是一款改造后的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}*/; }
相关推荐
fullcalendar改造后插件 增加农历显示,节假日设置,上下班设置等
fullcalendar扩展双击事件 源码版(直接改动源码)和扩展版(支持新版本)
fullcalendar日历 可点击事件
jquery.fullCalendar官方文档翻译
修改内容:添加 dayDblClick,eventDblClick两个事件,参数和dayClick、eventClick相同,修改英文标题为汉字
将Jquery日历控件fullCalendar中将dayClick改为双击或单击事件的方法,此方法也可以用于更改日历控件的其他api的事件
fullcalendar利用html显示出来而且是最新的3.2.0
销售人员日历 基于 FullCalendar JavaScript 框架构建的自定义日历。 轻松自定义以使用自定义对象。 这是对 Cody Sechelski 的改编。 他的实现的主要问题是它没有处理超过 2000 条记录。 这是由于 Apex 解决方法,...
FullCalendar 一个全尺寸拖放事件的jQuery插件日历
fullcalendar源码示例,附开发类库,使用手册,及示例。
fullcalendar 日历 控件 知识点集合
fullCalendar+fancybox+struts2实现的日程安排效果。 前台采用fullCalendar实现日历效果,同一天可以增加多个日程安排,当效果超过配置的最大数量时,将会隐藏多余的日程安排,通过单击超链接显示当天的所有日程安排...
日程安排,FullCalendar,日历,JSON,jquery实例 在线演示FullCalendar新建、修改和删除日程事件的示例。
可根据自己的实际需要进行修改,这里改为我自己所需样式,汉化版。里面有html页面和所需js,汉化包
fullcalendar日历控件 简单易用,在日历上可以添加点击事件
fullcalendar-listview Fullcalendar.js 库的事件列表视图
在fullcalendar-1.6.4的基础上增加农历和相关节日,直接拿过来可以用,包含所有的CSS、JS、HTML文件,可以直接应用于项目之中
fullcalendar-scheduler-master
fullcalendar-4.4.0官方示例demo,包含了所有的官方demo示例,里面包括20左右个例子,拖拽、本地化、日视图、月视图、周视图、代办视图、谷歌日历集成、自定义视图等