这是我的代码,后面就不会写了
<!DOCTYPE html>
<html><head>
<meta charset='utf-8' />
<link rel="stylesheet" href="css/fullcalendar.css" />
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="jq/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/jquery-ui.min.js" ></script>
<script type="text/javascript" src="js/moment.min.js" ></script>
<script type="text/javascript" src="js/fullcalendar.min.js" ></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,listWeek'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-09-01'
},
{
title: 'Long Event',
start: '2017-09-07',
end: '2017-09-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-09-16T16:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-09-28'
}
],
dayClick: function(date, jsEvent, view)
{
$("#dialog").dialog(
);
}
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<!--日历框-->
<div id='calendar'></div>
<!--对话框-->
<div id="dialog" style="display: none">
<form id="schedule" method="post">
<table id=form_table>
<tr class="noFeedback">
<td>日程标题:</td>
<td><input id="title" name="title"></td>
</tr>
<tr class="noFeedback">
<td>开始时间:</td>
<td><input id="start" name="start"></td>
</tr>
<tr class="noFeedback">
<td>结束时间:</td>
<td><input id="end" name="end"></td>
</tr>
<tr>
<td class="noFeedback">计划内容:</td>
<td><textarea id="details" name="details"></textarea></td>
</tr>
</table>
</form>
</div>
</body>
</html>