fullcalendar实现一个日历记事备注待办事项效果代码
代码语言：html
所属分类：其他
代码描述：fullcalendar实现一个日历记事备注待办事项效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fullcalendar.min.css">
<style>
* {
padding: 0;
margin: 0;
}
html, body {
position: relative;
/*width: 100%;
height: 100%;*/
}
#calendar {
max-width: 1200px;
margin: 20px auto 0;
}
.green {
color: #FFFFFF;
background-color: #369a5f;
border: 1px solid #257e4a;
}
.yellow {
color: #FFFFFF;
background-color: #f3b20f;
border: 1px solid #af7d00;
}
.red {
color: #FFFFFF;
background-color: #ea5454;
border: 1px solid #b11616;
}
</style>
</head>
<body>
<header class="nav"></header>
<!-- 主体 -->
<div class="main">
<div id="calendar"></div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment.2.29.1.js"></script>
<!-- 日期处理时间工具 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fullcalendar.min.js"></script>
<script type="text/javascript">
$(function(){
var get = '2020-05-14';
// $("#calendar").fullCalendar({
var calendar = $('#calendar').fullCalendar({
header: { //设置日历头部信息，false，则不显示头部信息。包括left，center,right左中右三个位置
left: 'prev,next, today', //上一个、下一个、今天
center: 'title', //标题
right: 'month,agendaWeek,agendaDay,listMonth' //月、周、日、日程列表
},
locale: 'zh-cn', //?没用？
timeFormat: 'HH:mm', //日程事件的时间格式
// timeFormat: 'HH:mm{ - H:mm}',{agenda: ‘h:mm{ - h:mm}}
buttonText: { //各按钮的显示文本信息
today: '今天',
month: '月',
agendaWeek: '周',
agendaDay: '日',
listMonth: '日程',
},
// columnFormat: {
// month: 'dddd',
// week: 'dddd M-d',
// day: 'dddd M-d'
// },
// titleFormat: {
// month: 'yyyy年 MMMM月',
// week: "[yyyy年] MMMM月d日 { '—' [yyyy年] MMMM月d日}",
// day: 'yyyy年 MMMM月d日 dddd',
// },
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份全称
monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份简写
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周全称
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周简写
noEventsMessage : "当月无数据", //listview视图下，无数据提示
allDayText: "全天", //自定义全天视图的名称
allDaySlot: false, //是否在周日历上方显示全天
// allDayDefault: false, //是否为全天日程事件，显示这一天中所做的事情
slotDuration : "00:30:00", //一格时间槽代表多长时间，默认00:30:00（30分钟）
slotLabelFormat : "H(:mm)a", //日期视图左边那一列显示的每一格日期时间格式
slotLabelInterval : "01:00:00", //日期视图左边那一列多长间隔显示一条日期文字(默认跟着slotDuration走的，可自定义)
snapDuration : "01:00:00", //其实就是动态创建一个日程时，默认创建多长的时间块
firstDay: 1, //一周中显示的第一天是哪天，周日是0，周一是1，类推
hiddenDays: [], //隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
weekends: true, //是否显示周六和周日，设为false则不显示周六和周日。默认值为true
weekMode: 'fixed', //月视图里显示周的模式，因每月周数不同月视图高度不定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定
weekNumbers: false, //是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
weekNumberCalculation: 'iso', //周次的显示格式。
height: 800, //设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。
// contentHeight: 600, //设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。
handleWindowResize: true, //是否随浏览器窗口大小变化而自动变化。
defaultView: 'month', //初始化时默认视图，默认是月month，agendaWeek是周，agendaDay是当天
// slotEventOverlap: false, //事件是否可以重叠覆盖
defaultDate: get, //默认显示那一天的日期视图getDates(true)2020-05-10
nowIndicator: true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
eventLimit: false, //数据条数太多时，限制显示条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数
eventLimitText: "更多", //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义（应该与eventLimit: true一并用）
dayPopoverFormat : "YYYY年M月d日", //点开"+2 more"弹出的小窗口标题，与eventLimitClick可以结合用
render:function(view){ //method,绑定日历到id上。$('#id').fullCalendar('render');
console.log('render',view)
},
// events: function(start, end, timezone, callback){
// $.ajax({
// type : "",
// url : "",
// dateType:'json',
// data:{
// 'id': id,
// 'status': status,
// 'startTime': status,
// 'endTime': endTime,
// 'duration': duration,
// '': ,
// },
// success : function(data) {
// callback(data);
// if (data != null && data.length > 0) {
// for(var i= 0; i < data.length; i ++) {
// //状态判断？？？
// //颜色区分？？？
// }
// },
// });
// },
// events: {
// url: 'json/events.json',
// error: function () {
// alert("000");
// }
// },
events: [
{
"title": "可以直接加跳转链接",
"start": "2020-05-13T09:00:00",
"end": "2020-05-13T14:00:00",
"duration": "03:00",
"url": "https://www.baidu.com/",
"className": "green"
},{
"title": "标题123",
"start": "2020-05-13T12:00:00",
"end": "2020-05-14T13:00:00",
"duration": "05:00",
"className": "yellow"
},{
"title": "标题456",
"start": "2020-05-16T10:30:00",
"end": "2020-05-16T12:30:00",
"className": "red"
},{
"title": "标题789",
"start": "2020-05-16T12:00:00",
"end": "2020-05-16T14:00:00",
"className": "red"
},{
"title": "标题233333333",
"start": "2020-05-16T14:30:00",
"end": "2020-05-16T16:00:00",
"className": "red"
},{
"title": "标题45645655",
"start": "2020-05-16T17:30:00",
"end": "2020-05-16T20:00:00",
"className": "red"
},{
"title": "标题1234567890",
"start": "2020-05-16T20:00:00",
"end": "2020-05-16T23:00:00",
"className": "red"
},{
"start": "2020-05-06",
"end": "2020-05-13",
"overlap": false,
"rendering": "background",
"color": "#cccccc"
},
],
dayClick: function(date, allDay, jsEvent, view) { //空白的日期区点击
// alert.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0