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

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

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

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

  优点:1、设置时区

2、丰富的回调函数

3、支持拖拽 多选

4、支持触摸

5、列表视图

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

7、前端展示可自定义

8、有完整的文档

2:基本使用方法

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

 <link href="css/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="css/fancybox.css" rel="stylesheet" type="text/css" />
<link media='print' href="css/fullcalendar.print.min.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/moment.min.js" type="text/javascript"></script>
<script src="Scripts/fullcalendar.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>

 HTML代码--------------->>>>

  <div id='calendar'></div>

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

  <script>
$(document).ready(function () { $('#calendar').fullCalendar({
//自定义按钮
customButtons: {
myCustomButton: {
text:'自定义按钮!',
click:function(){
alert('我是自定义按钮');
}}},
//日历头部
header: {
//左边是 前一月/后一月/ 回到今天按钮 自定义按钮
left: 'prev,next today,myCustomButton',
//中间是当前的时间
center: 'title',
//切换日历显示月/周/日视图
right: 'month,agendaWeek,day'
},
//日历底部
footer: {
//左边是 前一月/周/日,后一月/周/日 以及 回到今天按钮
left: 'prev,next today',
//中间是 当前试图的时间
center: 'prevYear,title,nextYear',
//切换日历显示月/周/日视图
right: 'month,agendaWeek'
},
//自定义图标
buttonIcons:{
prev:'left-single-arrow',
next: 'right-single-arrow',
prevYear: 'left-double-arrow',
nextYear: 'right-double-arrow'
},
//设置时区
currentTimezone: 'Asia/Beijing',
//设置每星期的第一天是星期几,0 是星期日
firstDay:0,
//单击日期事
// dayClick:function(){
// alert('a day has been clicked!'
// )},
//设置日期的现实方向 左到右还是右到左 默认左到右
isRTL:false,
//设置是否现实周末 默认现实
weekends:true,
//隐藏某周的某一天
//hiddenDays:[1,2,3],
//设置每月显示的周数 默认true显示六周
fixedWeekCount:true,
//设置周数显示 默认不显示
weekNumbers:true,
//确定月视图周数和基本观点的造型
weekNumbersWithinDays:true,
//工作时间 默认关闭 true显示周末休息
//businessHours:true,
businessHours: {
// 时间段
dow: [1,2,3,4,5],
start:'10:00',
//开始时间 (10am in this example)
end:'18:00'},
//结束时间(6pm in this example)}
//月份外的表格不显示
showNonCurrentDates:false,
//高度设置
height:"700",
//纵横比
aspectRatio:1.6,
//是否自动调整日历大小
handleWindowResize:true,
//当事务大于约定的时候回收缩显示
eventLimit: true,
views: {
agenda: {
eventLimit: 3//最大容纳数量
}
},
//eventLimitClick回调函数
eventLimitClick:
function(cellInfo){
alert("eventLimitClick回调事件");
},
dayClick: function(date, allDay, jsEvent, view) {
var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//格式化日期
alert(selDate);
$.fancybox({
//调用fancybox弹出层 });
},
//设置月份名称,中英文均可
monthNames: ["一月", "二月", "三月", "四月",
"五月", "六月", "七月", "八月", "九月",
"十月", "十一月", "十二月"
],
//设置月份的简称
monthNamesShort: ["一月", "二月", "三月",
"四月", "五月", "六月", "七月", "八月",
"九月", "十月", "十一月", "十二月"
],
dayNames: ["周日", "周一", "周二", "周三", //设置星期名称
"周四", "周五", "周六"
],
dayNamesShort: ["周日", "周一", "周二", //设置星期简称
"周三", "周四", "周五", "周六"
],
today: ["今天"], //today 按钮的显示名称
buttonText: { //设置按钮文本
today: '今天',
month: '月',
week: '周',
day: '日',
prev: '上一月',
next: '下一月'
},
theme:false, eventClick: function (event) {
alert(event.title + "按钮被点击了"); },
editable: true, //事项是否可编辑,改变大小、拖拽等 events: [
{
start: '2017-04-06',
end: '2017-04-08',
overlap: false,
rendering: 'background', //背景
color: '#ff9f89'
}, {
title: 'All Day Event',
start: '2017-04-01'
},
{
title: 'Long Event',
start: '2017-04-07',
end: '2017-04-10',
color:'green',
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-16T16:00:00'
},
{
title: 'Conference',
start: '2017-04-11',
end: '2017-04-13'
},
{
title: 'Meeting',
start: '2017-04-12T10:30:00',
end: '2017-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-04-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-04-12T17:30:00' },
{
title: 'Dinner',
start: '2017-04-12T20:00:00', },
{
title: 'Birthday Party',
start: '2017-04-13T07:00:00',
color:'blue',
},
{
title: 'Click for Google',
url: 'http://google.com/', //事件
color:'red',
start: '2017-04-28'
}
] }); }); </script>

成果展示:

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

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

Fullcalendar 日历控件的基本使用的更多相关文章

  1. fullcalendar日历控件知识点集合

    1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方 ...

  2. fullcalendar日历控件集合知识

    1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方 ...

  3. jQuery 日历控件 FullCalendar 初识

    最近有个日程管理的需求,就学习了一下 FullCalendar 控件的一些基本知识,本文不是详细介绍该控件的 API 的文档,而是记录本人使用过程中的一些学习情况. 先看一下效果图  月/周/日视图 ...

  4. js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js

    日历控件: https://fullcalendar.io/docs/ https://fullcalendar.io/docs/event_data/events_function/ https:/ ...

  5. JQuery日历控件

    日历控件最后一弹——JQuery实现,换汤不换药.原理一模一样,换了种实现工具.关于日历的终于写完了,接下来研究研究nodejs.嗯,近期就这点事了. 同样还是将input的id设置成calendar ...

  6. IOS自定义日历控件的简单实现(附思想及过程)

    因为程序要求要插入一个日历控件,该空间的要求是从当天开始及以后的六个月内的日历,上网查资料基本上都说只要获取两个条件(当月第一天周几和本月一共有多少天)就可以实现一个简单的日历,剩下的靠自己的简单逻辑 ...

  7. 【转】【WebDriver】不可编辑域和日历控件域的输入 javascript

    http://blog.csdn.net/fudax/article/details/8089404 今天用到日历控件,用第一个javascript执行后页面上的日期控件后,在html中可以看到生效日 ...

  8. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  9. javascript日历控件

    以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就 ...

随机推荐

  1. Java 集合的理解(持续更新......)

    一.集合的由来 通常,我们的程序需要根据程序运行时才知道创建多少个对象.但若非程序运行,程序开发阶段,我们根本不知道到底需要多少个数量的对象,甚至不知道它的准确类型.为了满足这些常规的编程需要,我们要 ...

  2. RecyclerView 设置item间隔的方法

    RecyclerView大家常用,但是如何给加载出来的item增加间隔很多人都不知道,下面是方法,直接上代码了: LinearLayoutManager layoutManager = new Lin ...

  3. mac 下安装securecrt

    下载文件链接中附带的文件. 1.先找到secureCRT的包内容,进入MACOS文件夹.替换crack中的secureCRT文件. 2.断网.进入软件,显示你的验证码过期.点continue.选择手动 ...

  4. C#编写代码:求三个数中的最大数

    static void Main(string[] args)        {            float x, y, z, temp;            Console.Write(&q ...

  5. cssLoading效果

    http://files.cnblogs.com/files/xdoudou/loaders.css-master.zip

  6. kvm基本原理

    KVM源代码分析1:基本工作原理 下了很大决心挖这个坑,虽然之前对kvm有些了解,但纸上得来终觉浅,只有深入到代码层面,才能摈弃皮毛,看到血肉,看到真相.作为挖坑的奠基石,准备写上几篇:kvm基本工作 ...

  7. 关于oracle后导数据的一些小TIPS

    今天下午需要把一些数据导入到正式环境中,但是通过Excel拷贝进去行会错位,把excel的每一列的双击让其变为最宽即可解决该问题

  8. SVN使用小记

    SVN(Subversion)是优秀的版本控制工具,之前在eclipse里面项目管理的时候,File-->Import-->SVN-->从SVN检出项目-->创建新的资源库位置 ...

  9. Android Studio 安装后首次启动的 Config path ...... is invalid 问题(转)

    原文链接:http://m.blog.csdn.net/blog/hnust_xiehonghao/46127775 1. 问题描述: 安装好Android Studio后,启动时弹出如下信息: Co ...

  10. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...