获取Fullcalendar
我们提供三种方式获取Fullcalendar。
1、使用NPM安装Fullcalendar。
$ npm install fullcalendar
2、官方提供了稳定的CNDJS资源，直接可以引入：
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.print.css
3、下载Fullcalendar到本地并引入。官方下载地址：https://fullcalendar.io/download/
<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.js'></script>
调用Fullcalendar
首先在<body>之间你想放置Fullcalendar的位置添加一个#calendar的div元素。
<div id='calendar'></div>
然后在页面最后的<script>标签里添加如下代码：
$(document).ready(function() {
// 页面加载完毕，初始化Canlendar
$('#calendar').fullCalendar({
// 你的选项配置和回调函数
});
});
最后保存打开页面，你就可以看到一个空的日程表，上面没有任何日程，请看Demo演示，添加日程的方法我们会在后续章节中讲到。
选项设置(Options)
FullCalendar的大部分文档都在讲日程表的“呈现”和“行为”，通常在初始化的时候配置FullCalendar，例如：
$('#calendar').fullCalendar({
weekends: false // 隐藏周六和周日
});
回调函数(Callbacks)
回调函数和配置有几分相似，执行某些操作的时候会触发回调。下面的例子中，用户点击日程表的某一天，会弹出一个警告提示：
$('#calendar').fullCalendar({
dayClick: function() {
alert('a day has been clicked!');
}
});
方法(Methods)
“方法”是用来操作日程表的，直接使用fullCalendar命令可以调用方法，下面的例子会让日程表切换到下一个月/周/日视图：
$('#calendar').fullCalendar('next');
官方英文文档地址：https://fullcalendar.io/docs/usage/
。
共1条评论
请问怎么在angular-cli中使用fullcalendar？