这是一款改造后的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扩展双击事件 源码版(直接改动源码)和扩展版(支持新版本)
汉化不仅限于标题,还包括了所有的提示信息、按钮文字以及用户界面的所有元素,确保了在中文环境下无障碍使用。 4. **jQuery集成**: FullCalendar是基于jQuery库构建的,这意味着它能够充分利用jQuery提供的便利...
fullcalendar日历 可点击事件
fullcalendar 日历控件知识点集合 以下是对 fullcalendar 日历控件的详细知识点的总结和概览: 基本语法 fullcalendar 的基本语法可以分为两种:一种是利用 fullcalendar 提供的方法来进行字符串和日期间的转换,...
jquery.fullCalendar官方文档翻译
将Jquery日历控件fullCalendar中将dayClick改为双击或单击事件的方法,此方法也可以用于更改日历控件的其他api的事件
4. 添加日程事件:使用 FullCalendar 的 addEvent 方法添加日程事件,可以指定事件的标题、开始时间、结束时间等信息。 5. 编辑日程事件:使用 FullCalendar 的 editEvent 方法编辑日程事件,可以修改事件的标题、...
fullcalendar利用html显示出来而且是最新的3.2.0
销售人员日历 基于 FullCalendar JavaScript 框架构建的自定义日历。 轻松自定义以使用自定义对象。 这是对 Cody Sechelski 的改编。 他的实现的主要问题是它没有处理超过 2000 条记录。 这是由于 Apex 解决方法,...
- **JSON格式**:可以通过`events`选项提供JSON格式的数据,包括`title`(事件标题)、`start`(开始时间)、`end`(结束时间)等字段。 - **函数回调**:也可以提供一个函数,该函数会为FullCalendar动态生成事件...
在 `说明.txt` 文件中,通常会包含更多关于如何配置和自定义 `fullcalendar` 的详细信息,例如如何设置不同视图的显示参数、如何添加自定义按钮、如何处理时间区转换等。建议查阅该文件以获取更深入的使用指导。 ...
FullCalendar 一个全尺寸拖放事件的jQuery插件日历
fullcalendar源码示例,附开发类库,使用手册,及示例。
FullCalendar的API提供了丰富的自定义选项,比如添加事件点击回调、设置时间分割间隔、调整视图切换行为等。此外,它还可以与jQuery UI插件一起使用,实现拖放事件等功能。 总的来说,FullCalendar是一个功能强大、...
fullCalendar+fancybox+struts2实现的日程安排效果。 前台采用fullCalendar实现日历效果,同一天可以增加多个日程安排,当效果超过配置的最大数量时,将会隐藏多余的日程安排,通过单击超链接显示当天的所有日程安排...
全历(fullcalendar)是一款流行的JavaScript日历插件,它提供了丰富的功能和自定义选项,用于在网页中展示日程和事件。本示例是关于如何将全历与数据库集成,以便动态地显示、添加和管理事件。以下是关于如何实现这一...
在IT领域,特别是在网页开发中,日程管理是一个常见的需求,而fullCalendar是一款功能强大的JavaScript库,专门用于创建交互式的、可自定义的日历视图。这个库提供了丰富的API,允许开发者根据项目需求进行高度定制...
全历组件FullCalendar是一款强大的JavaScript库,用于在网页上展示日程、事件和时间表。这个"fullCalendar demo"很可能是包含示例代码和配置,帮助开发者了解如何使用FullCalendar来构建自己的日历应用。 ...