<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas日历</title>
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.min.css" />
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="./jquery.datetimepicker.full.min.js"></script>
</head>
<style type="text/css">
html,
body {
margin: 0 0;
padding: 0 0;
width: 100%;
height: 100%;
}
</style>
<body>
<div style="padding:20px;">
<div>
<div style="font-weight: bold;margin-bottom:5px;">Choose Your Anniversary</div>
<input id="datetimepicker" type="text">
</div>
<canvas id="cav" width="360" height="360"></canvas>
</div>
</body>
<script type="text/javascript">
var newDate = ''
$('#datetimepicker').datetimepicker({
timepicker: false,
theme: 'dark',
format: 'Y-m-d',
lang: 'en'
});
$('#datetimepicker').on('change', function (event) {
console.log('input', $(this).val())
if (!newDate) {
newDate = $(this).val()
canvasCalendar($(this).val())
} else {
if ($(this).val() != newDate) {
canvasCalendar($(this).val())
}
}
})
function initcalender () {
newDate = new Date().getFullYear() + '-' + new Date().getMonth() + 1 + '-' + new Date().getDate()
$('#datetimepicker').val(newDate)
canvasCalendar(newDate)
}
var canvas = document.getElementById("cav");
var ctx = canvas.getContext("2d");
var date = ''
var year = ''
var mouth = ''
var today = ''
var week = ''
var cardSize = 40;
initcalender()
function canvasCalendar (val) {
if (canvas && canvas.width) {
canvas.width = canvas.width
}
date = new Date(val);
year = date.getYear();
mouth = date.getMonth();
today = date.getDate();
week = date.getDay();
var array_three = [4, 6, 9, 11];
var array_threeone = [1, 3, 5, 7, 8, 10, 12];
var array_week = ['', "S", "M", "T", "W", "T", "F", "S"]
var firstDraw;//1号绘制位置
var wIdx = today % 7;
if (week >= wIdx) {
firstDraw = week - wIdx + 1;
} else {
firstDraw = week - wIdx + 8;
}
var dayIndex = 1;
var countDay = 30;
if (array_three.indexOf(mouth) > -1) {
countDay = 30;
} else if (array_threeone.indexOf(mouth) > -1) {
countDay = 31;
} else {
countDay = 28;//未考虑瑞年情况
}
var row = 7;//6;
if (7 - firstDraw + 7 * 4 < countDay) {//确定表格行数，防止日期绘制不全
row = 8;//7;
}
for (var i = 1; i < row + 1; i++) {//开始绘制日期数
for (var j = 1; j < 8; j++) {
if (i == 1) {//绘制年月位置
drawMonYear();
continue;
}
if (i == 2) {//表格第一行绘制星期
drawDate(array_week[j], i, j);
continue;
}
if (i == 3 && j < firstDraw) {//确定1号绘制位置
continue;
}
if (dayIndex > countDay) {//只绘制月份的天数
break;
}
drawDate(dayIndex++, i, j);
}
}
}
/*绘制年月*/
function drawMonYear () {
var mouth = date.getMonth();
ctx.textAlign = "center";
ctx.font = 'bold 20px serif';
ctx.fillStyle = 'black';
var monArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']
ctx.fillText(monArr[mouth], 2.5 * cardSize + cardSize / 2, 1 * cardSize + cardSize / 3 * 2);
ctx.font = ' 18px Open Sans,Arial,Helvetica,sans-serif';
ctx.fillText(date.getFullYear(), 5.3 * cardSize + cardSize / 2, 1 * cardSize + cardSize / 3 * 2);
}
/*绘制背景表格*/
function drawbg (ctx) {
for (var i = 0; i < row; i++) {
for (var j = 0; j < 7; j++) {
ctx.strokeRect(j * cardSize, i * cardSize, cardSize, cardSize);
}
}
}
/*绘制确定日期*/
function drawDate (txt, i, j) {
if (txt == today) {
drawHeartbg(j, i);
}
ctx.textAlign = "center";
if (i == 1) {
ctx.font = 'bold 18px serif';
} else {
ctx.font = 'bold 14px Open Sans,Arial,Helvetica,sans-serif';
}
ctx.strokeStyle = 'black';
ctx.fillText(txt, j * cardSize + cardSize / 2, i * cardSize + cardSize / 3 * 2);
}
/*绘制标志今天的背景图爱心*/
function drawHeartbg (i, j) {
ctx.save();
var percision = 100;
var vertices = new Array();//存放爱心坐标数组
for (var ii = 0; ii < percision; ii++) {
var t = Math.PI * 2 * (ii / percision - 0.5);
var tx = 12 * Math.sin(t) - 4 * Math.sin(3 * t);
var ty = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
vertices.push({ x: tx, y: -ty });
}
ctx.beginPath();
ctx.translate(i * cardSize + cardSize / 2, j * cardSize + cardSize / 2);
//ctx.rotate(Math.PI);
ctx.scale(1.2, 1.2); //缩放
vertices.forEach(element => {
ctx.lineTo(element.x, element.y); //绘制轮廓
});
ctx.stroke()
ctx.restore();
}
</script>
</html>
