console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日历</title>
<style type="text/css">
html,body{
background-color: antiquewhite;
}
.main-wrap {
width: 700px;
background-color: ;
margin: 0px auto;
}
.main-wrap .head {
width: 700px;
text-align: center;
}
.main-wrap .head .head-item {
width: 100px;
float: left;
font-size: 30px;
border-radius: 100px;
background-color: #8A2BE2;
}
.main-wrap .body .day-item {
width: 100px;
height: 100px;
float: left;
font-size: 20px;
text-align: center;
border-radius: 100px;
}
.main-wrap .body .gap {
width: 500px;
height: 2px;
float: left;
}
#header{
width: 100%;
margin: 50px auto 20px auto;
font-size: 40px;
text-align: center;
}
.anniu{
width: 100%;
position: relative;
}
#next-month{
position: absolute;
top: 10px;
right: 40px;
background-color: #FAEBD7;
font-size: 18px;
border: white solid 1px;
}
#pre-month{
position: absolute;
top: 10px;
left: 40px;
background-color: #FAEBD7;
list-style: none;
font-size: 18px;
border: white solid 1px;
}
.back{
width: 700px;
height: 30px;
margin: 0px auto;
position: relative;
}
#backNowMonth{
font-size: 18px;
background-color: #FAEBD7;
position: absolute;
top: 10px;
right: 40px;
border: white solid 1px;
}
.event-item{
white-space: wrap;
font-size: 0.5em;
color: blueviolet;
}
#add-event{
height: 100px;
width: 150px;
background-color: burlywood;
position: fixed;
top: 200px;
left: 10px;
color: blueviolet;
text-align: center;
line-height: 100px;
font-size: 20px;
}
#add-event:hover{
box-shadow: 0px 8px 8px brown;
}
</style>
</head>
<body>
<div class="back">
<button type="button" id="backNowMonth">回到本月</button>
</div>
<div class="main-wrap" >
<div class="anniu" >
<button type="button" id="next-month">下一月</button>
<button type="button" id="pre-month">上一月</button>
</div>
<div class="header" id="header">
</div>
<div class="head">
<div class="head-item">
周日
</div>
<div class="head-item">
周一
</div>
<div class="head-item">
周二
</div>
<div class="head-item">
周三
</div>
<div class="head-item">
周四
</div>
<div class="head-item">
周五
</div>
<div class="head-item">
周六
</div>
</div>
<div class="body" id="body">
<div class="gap" id="">
</div>
</div>
</div>
<div id="add-event">
添加事件
</div>
<script type="text/javascript">
var eventDate = [
{
content:'今天我吃饭了，还**了',
date : "2019-11-07 21:48:00",
},
{
content:'今天是个很差的日子，wodadja',
date : "2019-11-04 21:48:22",
},
{
content: '今天心情很差',
date: '2019-11-5 13:07:22'
}
]
var backNow = document.getElementById('backNowMonth')
var riliBody = document.getElementById('body')
var nowDisplayDate = {
};
var nextMonth = document.getElementById('next-month')
var preMonth = document.getElementById('pre-month')
var header = document.getElementById('header')
var getDaysOfMonth = function(year, month) {
if (typeof month == 'string') {
month = parseInt(month)
}
if (typeof month == 'number') {
if (month < 1 || month > 12) {
return alert('傻逼一年哪有' + month + '月')
}
} else {
return alert('傻逼')
}
var days = 0
if (typeof year == 'string') {
year = parseInt(year)
}
if (typeof year == 'number') {
if (year < 0) {
return alert('傻逼哪有' + month + '年')
}
} else {
return alert('傻逼')
}
var year = year ? year : (new Date()).getFullYear()
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
days = 31
}
if (month == 4 || month == 6 || month == 9 || month == 11) {
days = 30
}
if (month == 2) {
days = year % 4 == 0 ? 29 : 28;
}
return days
}
var getTheFirstDateOfThisMonthIsWhichDay = function(year, month) {
var dateStr = year + '-' + month + '-' + '01'
console.log(dateStr)
var firstDateOfThisMonth = new Date(dateStr)
var days = firstDateOfThisMonth.getDay()
console.log(days)
return days
}
var processEvent = function(year,month){
var thisMonthEvent = []
eventDate.forEach(function(item,index){
var itemDate = new Date(item.date)
if(month == itemDate.getMonth()+1 && year == itemDate.getFullYear()){
thisMonthEvent.push(
{
year :itemDate.getFullYear(),
month:itemDate.getMonth(),
date:itemDate.getDate(),
hours : itemDate.getHours(),
min:itemDate.getMinutes(),
sec:itemDate.getSeconds(),
content : item.content
}
);
}
})
return thisMonthEvent
}
var render = function(year, month) {
var thisMonthEvent = processEvent(year,month)
console.log(thisMonthEvent)
var today = new Date()
var isThisMonth = false
if(month == today.getMonth()+1 && year == today.getFullYear()){
isThisMonth = true
}
var dayCount = getDaysOfMonth(year, month)
var firstDay = getTheFirstDateOfThisMonthIsWhichDay(year, month)
var width = 0
var str = ''
var gap = '<div class="gap" style = "width:${%width%}px"></div>'
var tmp = '<div class="day-item" style = "${%color%}">&{%riqi%}号<br\>${%event%}</div>'
if (firstDay == 7) {
width = 0
} else {
width = firstDay * 100
}
str += gap.replace('${%width%}', width)
for (var i = 0; i < dayCount ; i++) {
var emptyStr = '';
if(isThisMonth && i+1 ==today.getDate()){
emptyStr = tmp.replace('&{%riqi%}', i+1).replace('${%color%}','background-color:#878787;color:white; border-radius: 100%; ')
}else{
emptyStr = tmp.replace('&{%riqi%}', i+1)
}
for(var j = 0;j<thisMonthEvent.length;j++){
if(thisMonthEvent[j].date == i+1){
emptyStr=emptyStr.replace('${%event%}','<span class="event-item">'+thisMonthEvent[j].content+'</span>')
}
}
emptyStr=emptyStr.replace('${%event%}',' ')
str += emptyStr
}
header.innerHTML = year+'-'+(month >9?month:'0'+month)+ '-'+((today.getDate())>9?(today.getDate()):'0'+(today.getDate()))
riliBody.innerHTML = str
}
var init = function(date) {
var year = date.getFullYear();
var month = date.getMonth() +1;
nowDisplayDate = date;
render(year, month)
}
var goNextMonth = function() {
var displayDate = {
year: nowDisplayDate.getFullYear(),
month: nowDisplayDate.getMonth(),
}
if(displayDate.month >=11){
displayDate.month = 0
displayDate.year ++
}else{
displayDate.month ++
}
console.log(displayDate.month+1 ,displayDate.year)
var nextMonth = displayDate.year + '-' + (displayDate.month + 1) + '-' + '01'
var nextDate = new Date(nextMonth)
init(nextDate)
}
var goPreMonth = function(){
var displayDate = {
year: nowDisplayDate.getFullYear(),
month: nowDisplayDate.getMonth(),
}
if(displayDate.month == 0){
displayDate.month = 11
displayDate.year--
}else{
displayDate.month--
}
console.log(displayDate.month+1 ,displayDate.year)
var nextMonth = displayDate.year + '-' + (displayDate.month + 1) + '-' + '01'
var nextDate = new Date(nextMonth)
init(nextDate)
}
nextMonth.addEventListener('click',function(){
nextMonth.style = 'border: white solid 1px;'
goNextMonth()
})
preMonth.addEventListener('click',function(){
preMonth.style = 'border: white solid 1px;'
goPreMonth()
})
backNow.addEventListener('click',function(){
init(new Date());
})
var loadEventDate = function(){
eventDate = JSON.parse( localStorage.getItem('eventDate'))
console.log(eventDate)
}
var saveEventDate = function(){
localStorage.setItem('eventDate', JSON.stringify(eventDate))
}
var reFresh = function(){
init(nowDisplayDate);
}
var addEvent = function(){
var event = prompt('请输入事件')
var date = prompt('请输入日期 （例：2019-11-7 20：39：33）')
var obj = {
date : date,
content :event
}
eventDate.push(obj);
saveEventDate();
reFresh()
}
var addEventSomeoneDay = document.getElementById('add-event')
addEventSomeoneDay.addEventListener('click',function(){
addEvent()
})
var main = function(){
loadEventDate()
init(new Date());
}
main()
</script>
</body>
</html>