Fullcalendar 日历控件的基本使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Fullcalendar 日历控件的基本使用相关的知识,希望对你有一定的参考价值。

1:Fullcalendar 日历控件的基本简介

 

 

    Fullcalendar是一款十分强大的开源日历免费控件,提供了丰富的属性设置和方法调用。

                                                                  官网地址:https://fullcalendar.io/

                                                                 文档地址:https://fullcalendar.io/docs/

    优点:1、设置时区

            2、丰富的回调函数

            3、支持拖拽 多选

            4、支持触摸

            5、列表视图

            6、年、月、周。日的显示

            7、前端展示可自定义

            8、有完整的文档

技术分享

2:基本使用方法

 

 

 

需要引用的外部支持文件---->>>

1 <link href="css/fullcalendar.css" rel="stylesheet" type="text/css" />
2 <link href="css/fancybox.css" rel="stylesheet" type="text/css" />
3 <link media=‘print‘ href="css/fullcalendar.print.min.css" rel="stylesheet" type="text/css" />
4 
5 <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
6 <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
7 <script src="Scripts/moment.min.js" type="text/javascript"></script>
8 <script src="Scripts/fullcalendar.min.js" type="text/javascript"></script>
9 <script src="Scripts/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>

 html代码--------------->>>>

1  <div id=‘calendar‘></div>

Js进行初始化----------------->>>>>

 

技术分享
  1  <script>
  2         $(document).ready(function () {
  3 
  4             $(#calendar).fullCalendar({
  5                 //自定义按钮
  6                 customButtons: {
  7                     myCustomButton: {
  8                         text:自定义按钮!,
  9                         click:function(){
 10                             alert(我是自定义按钮);
 11                         }}},
 12                 //日历头部
 13                 header: {
 14                     //左边是 前一月/后一月/ 回到今天按钮  自定义按钮
 15                     left: prev,next today,myCustomButton,
 16                     //中间是当前的时间
 17                     center: title,
 18                     //切换日历显示月/周/日视图
 19                     right: month,agendaWeek,day
 20                 },
 21                 //日历底部
 22                 footer: {
 23                     //左边是 前一月/周/日,后一月/周/日  以及  回到今天按钮
 24                     left: prev,next today,
 25                     //中间是   当前试图的时间
 26                     center: prevYear,title,nextYear,
 27                     //切换日历显示月/周/日视图
 28                     right: month,agendaWeek
 29                 },
 30                 //自定义图标
 31                 buttonIcons:{
 32                     prev:left-single-arrow,
 33                     next: right-single-arrow,
 34                     prevYear: left-double-arrow,
 35                     nextYear: right-double-arrow
 36                 },
 37                 //设置时区
 38                 currentTimezone: Asia/Beijing,
 39                 //设置每星期的第一天是星期几,0 是星期日
 40                 firstDay:0,
 41                 //单击日期事
 42                 // dayClick:function(){
 43                 //     alert(‘a day has been clicked!‘
 44                 //     )},
 45                 //设置日期的现实方向 左到右还是右到左  默认左到右
 46                 isRTL:false,
 47                 //设置是否现实周末 默认现实
 48                 weekends:true,
 49                 //隐藏某周的某一天
 50                 //hiddenDays:[1,2,3],
 51                 //设置每月显示的周数  默认true显示六周
 52                 fixedWeekCount:true,
 53                 //设置周数显示  默认不显示
 54                 weekNumbers:true,
 55                 //确定月视图周数和基本观点的造型
 56                 weekNumbersWithinDays:true,
 57                 //工作时间  默认关闭 true显示周末休息
 58                 //businessHours:true,
 59                 businessHours: {
 60                     // 时间段
 61                     dow: [1,2,3,4,5],
 62                     start:10:00,
 63                     //开始时间 (10am in this example)
 64                     end:18:00},
 65                     //结束时间(6pm in this example)}
 66                 //月份外的表格不显示
 67                 showNonCurrentDates:false,
 68                 //高度设置
 69                 height:"700",
 70                 //纵横比
 71                 aspectRatio:1.6,
 72                 //是否自动调整日历大小
 73                 handleWindowResize:true,
 74                 //当事务大于约定的时候回收缩显示
 75                 eventLimit: true,
 76                 views: {
 77                     agenda: {
 78                         eventLimit: 3//最大容纳数量
 79                     }
 80                 },
 81                 //eventLimitClick回调函数
 82                 eventLimitClick:
 83                     function(cellInfo){
 84                     alert("eventLimitClick回调事件");
 85                     },
 86                 dayClick: function(date, allDay, jsEvent, view) {
 87                     var selDate =$.fullCalendar.formatDate(date,yyyy-MM-dd);//格式化日期
 88                     alert(selDate);
 89                     $.fancybox({
 90                         //调用fancybox弹出层
 91 
 92                     });
 93                     },
 94                     //设置月份名称,中英文均可
 95                 monthNames: ["一月", "二月", "三月", "四月",
 96                     "五月", "六月", "七月", "八月", "九月",
 97                     "十月", "十一月", "十二月"
 98                 ],
 99                 //设置月份的简称
100                 monthNamesShort: ["一月", "二月", "三月",
101                     "四月", "五月", "六月", "七月", "八月",
102                     "九月", "十月", "十一月", "十二月"
103                 ],
104                 dayNames: ["周日", "周一", "周二", "周三",     //设置星期名称
105                     "周四", "周五", "周六"
106                 ],
107                 dayNamesShort: ["周日", "周一", "周二",       //设置星期简称
108                     "周三", "周四", "周五", "周六"
109                 ],
110                 today: ["今天"],                              //today 按钮的显示名称
111                 buttonText: {                                 //设置按钮文本
112                     today: 今天,
113                     month: ,
114                     week: ,
115                     day: ,
116                     prev: 上一月,
117                     next: 下一月
118                 },
119                 theme:false,
120 
121                 eventClick: function (event) {
122                     alert(event.title + "按钮被点击了");
123                
124                 },
125                 editable: true,                            //事项是否可编辑,改变大小、拖拽等
126               
127                 events: [
128                     {
129                         start: 2017-04-06,
130                         end: 2017-04-08,
131                         overlap: false,
132                         rendering: background,         //背景
133                         color: #ff9f89
134                     },
135 
136                     {
137                         title: All Day Event,
138                         start: 2017-04-01
139                     },
140                     {
141                         title: Long Event,
142                         start: 2017-04-07,
143                         end: 2017-04-10,
144                         color:green,
145                     },
146                     {
147                         id: 999,
148                         title: Repeating Event,
149                         start: 2017-04-09T16:00:00
150                     },
151                     {
152                         id: 999,
153                         title: Repeating Event,
154                         start: 2017-04-16T16:00:00
155                     },
156                     {
157                         title: Conference,
158                         start: 2017-04-11,
159                         end: 2017-04-13
160                     },
161                     {
162                         title: Meeting,
163                         start: 2017-04-12T10:30:00,
164                         end: 2017-04-12T12:30:00
165                     },
166                     {
167                         title: Lunch,
168                         start: 2017-04-12T12:00:00
169                     },
170                     {
171                         title: Meeting,
172                         start: 2017-04-12T14:30:00
173                     },
174                     {
175                         title: Happy Hour,
176                         start: 2017-04-12T17:30:00
177 
178                     },
179                     {
180                         title: Dinner,
181                         start: 2017-04-12T20:00:00,
182 
183                     },
184                     {
185                         title: Birthday Party,
186                         start: 2017-04-13T07:00:00,
187                         color:blue,
188                     },
189                     {
190                         title: Click for Google,
191                         url: http://google.com/,  //事件
192                         color:red,
193                         start: 2017-04-28
194                     }
195                 ]
196 
197 
198             });
199 
200         });
201 
202     </script>
View Code

成果展示:

技术分享

 

页面风格是引用的Jq ui 实现的 http://jqueryui.com/themeroller/#!bgImgOpacityHeader=35&bgImgOpacityContent=75&bgImgOpacityDefault=50&bgImgOpacityHover=75&bgImgOpacityActive=40&bgImgOpacityHighlight=80&bgImgOpacityError=50

 

 

  页面标注的很详细,其中部分是在大神那学到,其余部分是自己看的的官方文档学习的,这些基本使用代码,再仔细看一下文档就可以掌握。

 

 

技术分享

 

以上是关于Fullcalendar 日历控件的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

jquery日历插件FullCalendar使用技巧

fullCalendar使用经验总结

fullcalendar 没有从谷歌日历获取事件

FullCalendar日历插件

使用 Google 日历在 Fullcalendar 中选择事件

Jquery fullcalendar不显示事件