JS日程管理插件FullCalendar简单实例

在线演示              源码下载

HTML

首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件，包括jQuery库文件，FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能，那么还需要加入jQuery ui插件。

<link rel="stylesheet" type="text/css" href="css/fullcalendar.css" rel="external nofollow" >
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="js/fullcalendar.min.js"></script>

然后，在页面的body里加入div#calendar，用来放置日历主体。

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

jQuery

现在我们需要在页面加载完成后，调用FullCalendar插件初始化日历，使用jQuery代码：

$(document).ready(function() {
 //页面加载完初始化日历
 $('#calendar').fullCalendar({
  //设置选项和回调
 }) 

});

然后保存并浏览页面，你会发现页面中已经显示一个很大的日历表了。当然这还只是一个初步的日历，FullCalendar的强大之处在于它提供了丰富的选项设置、方法及事件，可以很方便的扩展，打造你想要的日历表，先来做一下简单了解。

选项（Options）

FullCalendar官方文档中提供了丰富的操作选项设置，比如是否在日历中显示周末等等，使用方法：

$('#calendar').fullCalendar({
 weekends: false //不显示周末，将会隐藏周六和周日
});

查看更多选项

事件（EVents）

当点击或者拖动等事件发生时，可以调用相关函数，比如点击某一天时，弹出提示框：

$('#calendar').fullCalendar({
 dayClick: function() {
  alert('a day has been clicked!');
 }
});

查看更多事件

方法（Methods）

FullCalendar提供了很多方法可以调用，诸如进入下一个月视图等，代码可以这样写：

$('#calendar').fullCalendar('next');

查看更多方法

以上代码调用了next方法后，日历视图切换到下一月（周、日）的视图。

本文简单介绍了下JS日程管理插件FullCalendar的使用，更多详细使用方法请查看文章：JS日程管理插件FullCalendar中文说明文档

本例需要引用的相关插件：

jQuery下载地址：jQuery v3.0

jQuery ui下载地址：jQuery UI v1.8.18

FullCalendar插件下载地址：FullCalendar

FullCalendar实例源码下载：FullCalendar_demo

FullCalendar的官方网址：http://fullcalendar.io/docs/

赞 (0)

相关推荐

  • FullCalendar日历插件应用之数据展现(一)

    FullCalendar日历插件应用之数据展现(一)

    开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序. 由于项目需求,需要通过日历的方式展现某些数据,在网上搜索了很多日历的插件,觉得比较好用的还是fullCalendar,下面是我写的一个简单Demo,如有不足,请多多指正!!! 一.引入必要的文件: <link href="Scripts/Plugins/fullcalendar.css" rel="style

  • JS日程管理插件FullCalendar中文说明文档

    JS日程管理插件FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中文文档,以供参阅 普通显示设置 属性 描述 默认值 header 设置日历头部信息. 如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置: title: 显示当前月份/周/日信息 prev: 用于切换到上一月

  • fullCalendar中文API官方文档

    fullCalendar中文API官方文档

    1. 使用方式: 引入相关js, css后, $('#div_name').fullCalendar({//options}); 接受的是一个option对象 2. 普通属性 2.1. year, month, date: 整数, 初始化加载时的日期. 2.2. defaultView: 字符串类型, 默认是'month; 2.2.1. 允许的views: 2.2.1.1. month 一页显示一月, 日历样式 2.2.1.2. basicWeek 一页显示一周, 无特殊样式 2.2.1.3.

  • jQuery日程管理插件fullcalendar使用详解

    FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性. HTML 首先是要载入jQuery库和fullcalendar插件. <script src='js/jquery-1.9.1.min.js'></script> <script src='js/fullcalendar.min.js'></script>

  • JS日程管理插件FullCalendar简单实例

    JS日程管理插件FullCalendar简单实例

    在线演示              源码下载 HTML 首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表.如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件. <link rel="stylesheet" type="text/css" href="css/fullcalendar.css&q

  • fullcalendar日程管理插件月份切换回调处理方案

    fullcalendar日程管理插件月份切换回调处理方案

    目录 解决方案 示例 fullcalendar设置及渲染 点击事件定义 展示效果 注意: fullcalendar 版本:v5.9.0 解决方案 fullcalendar next ,prev等切换月份的按钮是没有回调函数,要想由回调函数必须用customButtons(自定义按钮,官方文档),它能提供回调函数,然后再回调函数里通过调用 this.$refs.calendar.$options.calendar.next();或calendar.next(); 去切换月份. 示例 核心代码 fu

  • Delphi 用DLL实现插件的简单实例

    Delphi 用DLL实现插件的简单实例 这是DLL的代码 实现代码: library MyDll; uses SysUtils, Dialogs, Classes; procedure ShowInfo(info:PChar);stdcall; begin ShowMessage('您选择了['+info+']'); end; function GetCaption:Pchar; begin Result := '中国'; end; exports ShowInfo, GetCaption;

  • js实现弹窗居中的简单实例

    在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置, 之前我也遇到这样的问题,现在我把我知道的呈现给大家 css样式 .windowBox{ width:500px; } .mid-tanBox{ position: fixed; top: 50%; left: 50%; margin-left: -250px; background: #fff; border:1px solid red; display:none } html代码 <div class=

  • JS添加删除DIV的简单实例

    JS添加删除DIV的简单实例 function addDiv(w,h){ //如果原来有"divCell"这个图层,先删除这个图层 deleteDiv(); //创建一个div var my = document.createElement("divCell"); //添加到页面 document.body.appendChild(my); //通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看 my.s

  • 用js写的一个路由(简单实例)

    前几天在网上看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现路由</title> </head> <body> &l

  • js实现楼层效果的简单实例

    今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>楼层切换</title> <style> *{padding: 0;margin: 0;} li{list-style: none;} .main img{width:

  • JS只能输入正整数的简单实例

    如下所示: <html> <head> <title>只能输入正整数</title> </head> <body> 兑换数量:<input type="text" ID="txtNumber" Width="50px" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]

随机推荐