fullcalendar实现一个日历记事备注待办事项效果代码-html代码-BFW代码库

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日 { '&#8212;' [yyyy年] MMMM月d日}",
        //	        day: 'yyyy年 MMMM月d日 dddd',
        /.........完整代码请登录后点击上方下载按钮下载查看