- 浏览: 380962 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (209)
- db2 (4)
- oracle (1)
- sqlserver (16)
- java (54)
- jdbc (3)
- html、js (21)
- MQ、MB (6)
- uml (3)
- 格言 (7)
- 笑话 (3)
- 管理 (5)
- note (10)
- hibernate (1)
- 设计模式 (4)
- win8 (5)
- postgre (2)
- cxf (3)
- MyBatis (4)
- tomcat (9)
- servlet (2)
- ant (2)
- spring (5)
- windows (3)
- linux (7)
- struts2 (2)
- android (2)
- eclipse (1)
- drools (1)
- jmx (2)
- c++ (3)
- html、js、JSP (1)
- mysql (1)
- redis (1)
- 架构 (1)
最新评论
-
onlyor:
灰太狼1991 写道很受用,请教一下博主,mybatis模糊查 ...
MyBatis模糊查询 -
灰太狼1991:
很受用,请教一下博主,mybatis模糊查询是不是和版本也有关 ...
MyBatis模糊查询 -
zzgvictory:
你写的么,很美啊
js 画 玫瑰花 -
onlyor:
里面的算法值得研究啊
js 画 玫瑰花 -
bjqincy:
用 org.joda System.out.println(& ...
Java 获取 一个月有多少周
1.与google日历连接,别忘记加入
<script type='text/javascript' src='js/gcal.js'/> events: $.fullCalendar.gcalFeed ("http://www.google.com/calendar/feeds/xuqi86@gmail.com/private-660ae86cc26345cff3430480e8eea4bb/basic ", { className:'gcal-event', editable:true, currentTimezone:'Asia/Shanghai' } )
2.表头信息
agenda带有具体的时间格子
month,basicWeek,basicDay,agendaWeek,agendaDay 是5种不同的视图
空格和,的区别
header:{
left: 'month,basicWeek,basicDay,agendaWeek,agendaDay',
center: 'title',
right: 'prevYear,prev,today,next,nextYear'
}
3.是否使用 jquery的主题(我用的是start主题)
<link type="text/css" href="css/start/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type='text/javascript' src='js/jquery.js'>
theme:true
4.
buttonText:{
prev: '昨天',
next: '明天',
prevYear: '去年',
nextYear: '明年',
today: '今天',
month: '月',
week: '周',
day: '日'
}
5.每周的第一天是哪天
Sunday=0, Monday=1, Tuesday=2, etc.
firstDay:1
6.日期从右向左显示...不知道什么时候会这么用
isRTL:false
7.是否显示周末
weekends:true
8.在月视图里显示周的模式,因为可能每月周数不同,所以月视图高度不一定,注意引号
fixed 固定显示6周高,高度永远保持不变
liquid 不固定周数,周高度可变化
variable 不固定周数,但高度固定
weekMode:'fixed'
9.日历高度,包括表头
height: 850
内容高度,不包括表头
contentHeight: 600
10.单元格宽与高度的比值
注意:此属性不能与日历高度同时存在
aspectRatio: 1.35
11.切换视图的时候要执行的操作
view是一个对象,后面将说道具体的属性
viewDisplay:function(view){}
12.窗口大小变化时执行的操作
windowResize: function(view){}
13.把日历绑定到一个id的东西上
$('#id').fullCalendar('render');
14.销毁id日历
把日历回复到初始化前,删除了所有元素,时间,和初始化数据
$('#id').fullCalendar('destroy');
15.默认显示的视图,注意引号
defaultView:'month'
16.view对象的属性
name: 包括month,basicWeek,basicDay,agendaWeek,agendaDay
title: 标题内容(例如"September 2009" or "Sep 7 - 13 2009")
start:Date类型, 该view下的第一天.
end:Date类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天.
visStart:Date类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致.
visEnd: Date类型, 最后一个可访问的day
17.集中设定初始化值
可以设置的属性有 dragOpacity, titleFormat, columnFormat, and timeFormat
被应用的视图有
{
month: // month view
week: // basicWeek & agendaWeek views
day: // basicDay & agendaDay views
agenda: // agendaDay & agendaWeek views
agendaDay: // agendaDay view
agendaWeek: // agendaWeek view
basic: // basicWeek & basicDay views
basicWeek: // basicWeek view
basicDay: // basicDay view
'': // (an empty string) when no other properties match
}
18.取得视图对象
.fullCalendar('getView')->View Object
var view = $('#calendar').fullCalendar('getView');
alert("The view's title is " + view.title);
19.改变当前视图
.fullCalendar('changeView',viewName)
20.20里以下属性都是在agenda视图里起作用的
在agenda开头的视图里,是否显示最上面all-day那一栏
allDaySlot:true
默认的文字:
allDayText:'今天的任务'
左边那一列时间的格式:
axisFormat:'h(:mm)tt'
()表示整点就不显示里面的内容
支持的格式化占位符
1. s: 秒
2. ss: 秒, 两位
3. m: 分钟
4. mm: 分钟, 两位
5. h: 小时, 12小时制
6. hh: 小时, 12小时制, 两位
7. H: 小时, 24小时制
8. HH: 小时, 24小时制, 两位
9. d: 日期数字
10. dd: 日期数字, 两位
11. ddd: 日期名称, 缩写
12. dddd: 日期名称, 全名
13. M: 月份数字
14. MM: 月份数字, 两位
15. MMM: 月份名称, 缩写
16. MMMM: 月份名称, 全名
17. yy: 两位的年份
18. yyyy: 4位的年份
19. t: 上下午加 a或者p
20. tt: 上下午加am或pm
21. T: 上下午加A 或者P
22. TT: 上下午加AM或PM
23. u: ISO8601格式
24. S: 给日期加上st, nd, rd, th等后缀, 表明是第几天
每行的时间间隔
slotMinutes:10
滚动条滚动到得起始时间
firstHour: 7
每天从几点起开始显示
minTime:7
minTime:'7:30'
如果加上了分钟需要设置时间间隔
每天显示到几点结束
maxTime:24
maxTime:'23:10'
事件默认的时间执行长度
defaultEventMinutes:120
此时,如果事件对象没有指定执行多长时间,则默认执行两个小时,后面将说到事件对象
21.当前日期
year: 必须是4位数字,如果不指定,则是当前年
month: 当前月,从0开始,如果当前年和月都未指定,则月显示为1月
date:日期的一个月,这个属性只和周视图和日视图有关,如果没指定,并且年月也没有指定,则显示一个月的第一天
以下8个关于操作日期的方法
.fullCalendar('prev') 返回到上一个年月日,与视图的种类有关
.fullCalendar('next')
.fullCalendar('prevYear')
.fullCalendar('nextYear')
.fullCalendar('today')
.fullCalendar( 'gotoDate', year [, month, [ date ]] ) 注意月从0开始
.fullCalendar( 'incrementDate', years [, months, [ days ]] )
.fullCalendar( 'getDate' ) -> Date 取得一个日期对象
$('#my-button').click(function() {
var d = $('#calendar').fullCalendar('getDate');
alert("The current date of the calendar is " + d);
});
22.指定默认的时间格式
timeFormat:h(:mm)tt
23.指定默认的列格式
columnFormat:{
month: 'ddd', // Mon
week: 'ddd M/d', // Mon 9/7
day: 'dddd M/d' // Monday 9/7
}
24.标题格式化
titleFormat:{
month: 'MMMM yyyy', // September 2009
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2009
day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2009
}
25.月显示的名字
monthNames:['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December']
monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月',
'八月', '九月', '十月', '十一月', '十二月']
月名字的简写
monthNamesShort:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
26.星期显示的名字
dayNames:['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday']
dayNames:['星期日', '星期一', '星期二', '星期三',
'星期四', '星期五', '星期六']
星期名字的缩写
dayNamesShort:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
月显示的名字
monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort:['一月','二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'],
27.4个关于鼠标的回调方法
当点击某一天时触发此操作
dayClick:function( date, allDay, jsEvent, view ) { }
dayClick: function(date, allDay, jsEvent, view) {
if (allDay) {
alert('Clicked on the entire day: ' + date);
}else{
alert('Clicked on the slot: ' + date);
}
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('Current view: ' + view.name);
// change the day's background color just for fun
$(this).css('background-color', 'red');
}
当点击某一个事件时触发此操作
eventClick:function( event, jsEvent, view ) { }
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
// change the border color just for fun
$(this).css('border-color', 'red');
}
当鼠标悬停在一个事件上触发此操作
eventMouseover:function( event, jsEvent, view ) { }
当鼠标从一个事件上移开触发此操作
eventMouseout:function( event, jsEvent, view ) {}
28.事件对象
fullcalendar用来存储一个日历事件信息的标准对象
一下属性中,只有title和start是必须的
id:String/Integer (optional)
title:String
allDay:true or false (optional) 指定是否是全天事件
start:Date 事件开始时间,格式如下
IETF format (ex: "Wed, 18 Oct 2009 13:00:00 EST")
ISO8601 format (ex: "2009-11-05T13:15:30Z")
end: Date (optional) 事件结束时间
如果事件是一个全天事件,则结束时间包括在内
如果事件不是全天事件,结束时间是0:00,则结束时间的第二天不包括在内
url:String (optional) 当用户点击时,将会访问的网址
className: String/Array (optional) 这个事件使用的css 类名
editable:true or false (optional) 事件是否可编辑
source: Array/String/Function (automatically populated) 事件源,自动指定
除了以上属性外,你可以自己指定属性和值
29.事件数组 events (as an array)
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09 12:30:00',
allDay : false // will make the time show
}
]
事件Json源 events (as a json feed)
events: "/myfeed.php" 该URL返回一个json或数组的日程事件组, GET参数视startParam和endParam选项而定
当用户改变视图时触发此事件,FullCalendar 将通过GET方法传递参数来确定需要哪些日程数据
/myfeed.php?start=1262332800&end=1265011200&_=1263178646
startParam:'start' 开始参数的名字
endParam:'end' 结束参数的名字
cacheParam:'_' 缓存参数的名字
lazyFetching:true 只有当需要的时候才取得数据,先从缓存里读取数据
_参数是自动加上去的,防止读缓存内容
日程事件 events (as a function)
events:function( start, end, callback ) { }
events: function(start, end, callback) {
$.ajax({
url: 'myxmlfeed.php',
dataType: 'xml',
data: {
// our hypothetical feed requires UNIX timestamps
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000)
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
event.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
30.事件源
eventSources 存储数组对象,可以是Arrays/Functions/URLs
eventSources: [
$.fullCalendar.gcalFeed("http://www.google.com/feed1 "),
$.fullCalendar.gcalFeed("http://www.google.com/feed2 ")
]
31.日程默认为全天日程
allDayDefault:true
32.当读取ajax数据时
loading:function( isLoading, view )
当开始读取的时候是true,当读取完成是false
33.改变日程事件
updateEvent:
eventClick: function(event, element) {
event.title = "CLICKED!";
$('#calendar').fullCalendar('updateEvent', event);
}
日程对象可以通过回调函数被获得,比如 eventClick 或者 clientEvents的方法
34.取得客户端内存中保存的日程对象
clientEvents
.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array 返回一个日程对象的数组
如果idOrFilter不写,则输出全部保存在客户端的日程对象数组
如果为ID ,则返回所有为此ID的对象
还可以为一个过滤function 接受一个日程对象,如果返回true,则此值包含在客户端对象组中国
35.从日历中删除日程
removeEvents 参数同上
36.重新取得日程
.fullCalendar('refetchEvents') 从所有源并且重新渲染到屏幕上
37.增加一个日程源
.fullCalendar('addEventSource',source)
源可以是Array/URL/Function ,获取的数据可以立刻显示在日历上
38.删除一个事件源
.fullCalendar('removeEventSource',source)
39.日程绑定
eventRender.function( event, element, view ) { }
event 是企图被渲染的日程对象
element 是一个新建的jQuery<div>被用来渲染的,他已经在恰当的时间被创建
eventRender 返回函数可以修改element,返回一个新的dom元素,用来替换被渲染的元素,或者返回false,禁止被渲染
40.日程渲染后事件
eventAfterRender:function( event, element, view ) { }
41.渲染事件
.fullCalendar('renderEvent',event[,stick])
通常,一旦日历重新取得日程源,则原有日程将消失,当指定stick为true时,日程将永久的保存到日历上
42.重新渲染所有事件
rerenderEvents
.fullCalendar('rerenderEvents')
43.是否可以拖拽和改变大小
editable:true
44.禁止拖拽和改变大小
disableDragging:false
disableResizing:false
45.如果拖拽不成功,多久回复原状
dragRevertDuration:500 单位是毫秒
46.拖拽不透明度
dragOpacity:{
agenda:.5 //对于agenda试图
'':1.0 //其他视图
}
47.需要的js包
<script type='text/javascript' src='js/ui.core.js'/>
<script type='text/javascript' src='js/ui.draggable.js'/>
<script type='text/javascript' src='js/ui.resizable.js'/>
注意顺序,要把jquery.js放到这3个包前面
48.拖拽事件引发的操作
eventDragStart:function(event,jsEvent,ui,view) { }
eventDragStop:function( event, jsEvent, ui, view ) { }
49.当拖拽完成并且时间改变
eventDrop:function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }
dayDelta 保存日程向前或者向后移动了多少天
minuteDelta 这个值只有在agenda视图有效,移动的时间
allDay 如果是月视图,或者是agenda视图的全天日程,此值为true,否则为false
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
alert(
event.title + " was moved " +
dayDelta + " days and " +
minuteDelta + " minutes."
);
if (allDay) {
alert("Event is now all-day");
}else{
alert("Event has a time-of-day");
}
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
50.改变大小的事件触发的操作
eventResizeStart:function( event, jsEvent, ui, view ) { }
eventResizeStop:function( event, jsEvent, ui, view ) { }
eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }
详细文档:http://arshaw.com/fullcalendar/docs/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' /> <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' /> <script type='text/javascript' src='../jquery/jquery-1.7.1.min.js'></script> <script type='text/javascript' src='../jquery/jquery-ui-1.8.17.custom.min.js'></script> <script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script> <script type='text/javascript'> $(document).ready(function() { //$('#bt').bind('click',function(){}) $("#del").click(function(){ $('#calendar').fullCalendar('removeEvents',2); }) var objson = "[{id:'5',title:'Sjr',content:'Library',start: new Date(2012, 11, 7)},{id:'6'title:'Sjr',content:'Library',start: new Date(2012, 11, 7) }]"; var calEvent={ id:8, title: 'asdf', content:'afsdfasdf', start: new Date(2012,10,7), }; var a = new Array(); a[0]=calEvent; $("#add").click(function(){ $('#calendar').fullCalendar('addEventSource', a); // $('#calendar').fullCalendar('refetchEvents'); // $('#calendar').fullCalendar('renderEvent', calEvent, true); }) $("#get").click(function(){ var ary = $('#calendar').fullCalendar('clientEvents'); $(ary).each(function(index) { var val = ary[index]; alert(val.title + " " + val.content + " " + val.start + " " + val.end); }); }) var d = new Date(); var y = d.getFullYear(); var m = d.getMonth(); $('#calendar').fullCalendar( { header: { left: 'title', center: 'prevYear,nextYear', right: 'prev,today,next,agendaDay,month' }, // 是否可以拖拽和改变大小 editable: true, draggable: true, // 是否显示周末 weekends: true, weekMode:'liquid', // allday allDayText:'今天的任务', // 日历高度,包括表头 height: 600, // 内容高度,不包括表头 contentHeight: 500 // 单元格宽与高度的比值,注意:此属性不能与日历高度同时存在 //aspectRatio: 1.35, // 主题 //theme:true, // 每行的时间间隔 slotMinutes:60, //事件默认的时间执行长度 defaultEventMinutes:120, // 左边那一列时间的格式: axisFormat:'H(:mm)', // 每天从几点起开始显示 minTime:9, // 每天显示到几点结束 maxTime:'17:30', // 日期显示的名字 dayNames:['星期日', '星期一', '星期二', '星期三','星期四', '星期五', '星期六'], dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], // 月显示的名字 monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'], monthNamesShort:['一月','二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'], // 按钮值 buttonText:{ prev: '昨天', next: '明天', prevYear: '去年', nextYear: '明年', today: '今天', month: '月', week: '周', day: '日' }, // 标题格式化 titleFormat:{ month: 'MMMM yyyy', // September 2009 week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2009 day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2009 }, //指定默认的列格式 //columnFormat:{ // month: 'ddd', // Mon // week: 'ddd M/d', // Mon 9/7 // day: 'dddd M/d' // Monday 9/7 //}, // 禁止拖拽和改变大小 disableDragging:false, disableResizing:false, // 如果拖拽不成功,多久回复原状 dragRevertDuration:500, //单位是毫秒 // 拖拽不透明度 dragOpacity:{ agenda:0.1 //对于agenda试图 // '':1.0 //其他视图 }, // 当点击某一个事件时触发此操作 eventClick:function(event, element) { event.title = "CLICKED!"; $('#calendar').fullCalendar('updateEvent', event); }, // 当点击某一天时触发此操作 dayClick: function() { alert('空白处已被点击!'); }, //当鼠标悬停在一个事件上触发此操作 eventMouseover:function(event, jsEvent, view){ }, // 当拖拽完成并且时间改变 eventDragStart:function(event,jsEvent,ui,view) { //alert('eventDragStart'); }, eventDrop: function(event, delta) { //alert('eventDrop'); }, // 当读取ajax数据时 loading: function(bool) { // alert('loading'); }, // 改变大小的事件触发的操作 eventResizeStart:function( event, jsEvent, ui, view ) { //alert('eventResizeStart'); }, eventResizeStop:function( event, jsEvent, ui, view ) { //alert('eventResizeStop'); }, eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { //alert('eventResize'); }, // events: "json_events.php", events: [ //{ id: 1, title: "学习jQuery",start: new Date(y, m, 6, 14, 0), end: new Date(y, m, 11) }, { id: 2, title: "每天写必优博客2", content:'----',start: new Date(y, m, 2) }, { id: 3, title: "开会", content:'+++++',start: new Date(y, m, 20, 9, 0) }, //{ id: 4, title: "查看facebook", start: new Date(y, m, 27, 16), end: new Date(y, m, 29),url: "facebook.com/" } ]} ); }); </script> <style type='text/css'> body { margin-top: 40px; text-align: center; font-size: 13px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #calendar { width: 800px; margin: 0 auto; } </style> </head> <body> <input type="button" id="del" value="del"/><input type="button" id="add" value="add"/><input type="button" id="get" value="get"/> <div id='calendar'></div> </body> </html>
发表评论
-
html5 audio声音多次播放
2014-12-17 09:37 6433<html> <head&g ... -
js call
2014-11-03 10:13 821call 方法 请参阅 应用于:Function 对象 ... -
JS中通过方法名字符串调用
2014-10-31 14:21 655我贴: <html> <h ... -
js Date 详解
2014-07-11 10:13 677Date 对象用于处理日期和时间。创建 Date ... -
JS取整,四舍五入,取绝对值等Math对象常用方法
2014-06-11 16:11 1273JS取整,四舍五入,取绝对值等Math对象常用方法 ... -
js ascii和字符互相转换
2014-05-28 08:41 1076ascii和字符相互转换 用String.from ... -
js 进制转换
2014-05-27 16:33 719<!DOCTYPE html PUBLIC " ... -
ASCII 标准I表
2014-05-27 16:30 1241Bin Dec Hex 缩写/字符 ... -
js call 方法 (js方法继承)
2014-05-27 11:06 511js call call 方法 请参阅 应用于:Fu ... -
(function($){...})(jQuery)的意思
2014-05-27 10:43 671(function($){...})(jQuery)实际上 ... -
js textarea 自适应高度
2014-04-26 11:45 1147写道 <!DOCTYPE html>< ... -
jQuery.extend 函数详解
2014-02-18 15:18 822JQuery的extend扩展方法: Jquer ... -
js 画 玫瑰花
2014-02-18 10:18 1818<html><head><tit ... -
js 获取 月 的 周数
2013-04-17 15:41 2380<script> function g ... -
JS 将字符串转换成日期类型 字符串转换成日期形式
2012-11-09 12:54 1169将字符串形式的日期转换成日期对象 var strTime ... -
meta是html语言head区的一个辅助性标签
2012-11-08 09:21 1042meta是html语言head区的一个辅助性标签。几乎所有的网 ... -
JS Boolean 初始值
2012-07-31 13:41 1952JS Boolean 初始值 Boolean ... -
界面开发过程中,会使用各种控件
2012-06-21 12:35 3550界面开发过程中,会使用各种控件 1. 树形控件( ... -
UI 控件分析
2012-06-21 11:42 1394控件库 / 因素 版权控制 ... -
JavaScript,一切都是这么简单
2012-02-03 14:16 765JavaScript,一切都是这么简单:http://www. ...
相关推荐
它的中文API官方文档提供了详细的配置选项和使用方法,帮助开发者更好地定制和集成日历功能。 1. **引入与初始化** 要使用FullCalendar,首先需要在HTML文件中引入对应的JavaScript和CSS文件。然后,通过jQuery...
### FullCalendar API中文文档知识点详解 #### 一、概述 FullCalendar是一款强大的JavaScript库,用于在网页上展示日历,并支持各种复杂的事件管理和视图切换功能。本文档旨在详细介绍FullCalendar的一些基本配置...
6. **本地化支持**:FullCalendar 2.0引入了中文汉化,使得中文用户界面更加友好,提升了用户体验。 7. **自定义事件渲染**:开发者可以定制事件的外观,如颜色、形状、大小等,以满足特定的设计需求。 8. **事件...
**全历插件 FullCalendar 1.6.4 中文版** FullCalendar 是一个非常流行的JavaScript库,专门用于创建交互式、响应式的日历视图。这个1.6.4版本是针对中文用户的一个优化版本,它包含了丰富的文档、JS依赖包以及多个...
这个“fullcalendar中文版(含demo)”包含了全历的中文版本以及示例代码,便于开发者理解和应用。在JavaScript的世界里,处理日期和时间是一个常见的需求,FullCalendar提供了一个优雅的解决方案。 1. **全历功能...
提供的汉化版意味着这个Demo已经将FullCalendar的默认英文界面翻译成了中文,方便中文用户使用。汉化通常涉及到对控件、按钮、提示信息等元素的文本进行替换,以适应中文语言环境。 3. **HTML页面**: 在Demo中,...
这个资源"fullcalendar-1.5.1+中文应用方法"提供的是FullCalendar的1.5.1版本,并且包含了中文的应用教程,适合于那些希望在网页中实现类似Google日程管理功能的开发者。 FullCalendar的核心特性包括: 1. **事件...
- **API更新**:FullCalendar的API允许开发者动态添加、修改和删除事件,2.7.3可能对这些接口进行了优化,使得开发者能更方便地操作日历事件。 3. **使用方法**: 使用FullCalendar首先需要在HTML中引入相关的CSS...
可以创建一个方法获取数据(例如通过API请求),然后使用`events`选项将数据传入Fullcalendar。例如: ```javascript data() { return { calendarOptions: { events: this.getEvents } } }, methods: { ...
- **自定义事件**:开发者可以根据需求自定义节日事件,通过FullCalendar的API添加新的事件源,比如从数据库或API获取并渲染到日历上。 - **样式调整**:为了使农历、节气和节日在视觉上更加突出,可能需要自定义...
events: '/api/events', // 事件源,可以是URL或者本地数据 headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth', }, }, }; }, ``` ##...
根据你的描述,你已经对原版的FullCalendar进行了汉化,将月份和周的英文词汇翻译成了中文,以便于在进行项目开发时更符合中文用户的阅读习惯。 FullCalendar的核心功能包括: 1. **多视图展示**:支持日视图、周...
在Vue.js应用中,FullCalendar是一个非常流行的开源库,用于创建功能丰富的日历组件,能够显示事件、进行日程管理。这个项目示例提供了一种方法来集成FullCalendar到Vue项目中,帮助开发者构建出交互性强的日程安排...
5. **API接口**:提供了丰富的API,允许开发者对日历进行各种自定义操作,如添加、删除、修改事件等。 6. **与数据库集成**:可以与后端数据库集成,实现事件数据的存储和检索。 在FullCalendar 1.6.4版本中,主要...
它提供了丰富的API和多种视图,如日视图、周视图、月视图、Agenda视图等,使得开发者可以轻松地构建出美观且实用的日历应用。 **核心特性** 1. **多视图展示**:FullCalendar支持多种视图切换,包括日视图、工作日...
其次,FullCalendar的API设计灵活,开发者可以通过JavaScript轻松地添加、修改和删除事件。它也支持与各种数据源集成,例如JSON、Google Calendar或者数据库,这使得在实际项目中使用FullCalendar时,能够方便地获取...
- **多语言**:FullCalendar支持多种语言,包括中文,可以满足全球化应用的需求。 **6. **扩展性**:** - **插件支持**:丰富的插件库允许开发者添加更多功能,如资源管理、时间表视图、事件重叠控制等。 **7. *...
`jQuery.fullCalendar` 是一个流行的JavaScript库,用于在网页上展示日历视图。它能够帮助开发者轻松地创建交互式的日历应用,...在实际开发中,还可以结合API来动态添加、修改和删除事件,实现高度交互的日历功能。
全历日历(FullCalendar)是一款广泛应用于网页端的日程管理工具,以其美观的界面和强大的功能深受开发者喜爱。这款JavaScript库允许用户在网页上创建、编辑和展示各种日程事件,非常适合构建会议安排、任务管理或者...