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").fullCalen.........完整代码请登录后点击上方下载按钮下载查看

网友评论0