在ICardYou 上偶尔收发明信片，心血来潮做了个日历。
原来做成了独立页面，这里整理一个预览版本。
包含魔改功能的独立页面
感觉可以放在明信片的背面作为背景之类的。
var offset = 20;
var gap = 2;
var size = 20;
var fontFamily = "Segoe UI, Tahoma, Arial, Microsoft YaHei, sans-serif";
var box = svg.append("g");
var ruler = svg.append("g");
var rect = box.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 655)
.attr("height", 375)
.attr("fill", "#ffffff");
var dayName = ['日', '一', '二', '三', '四', '五', '六'];
var monthName = ["㋀", "㋁", "㋂", "㋃", "㋄", "㋅", "㋆", "㋇", "㋈", "㋉", "㋊", "㋋"];
var dayCount = 365 + 7;
var now = new Date();
var start = new Date();
start.setDate(now.getDate() - dayCount);
dayCount += start.getDay(); //补全到星期日
var date = new Date();
date.setDate(date.getDate() - dayCount)
// week day name
for (var i = 0; i < 7; i++) {
var text = box.append("text")
.attr("x", offset + size / 2)
.attr("y", offset + size / 2 + i * (size + gap))
.attr("text-anchor", "middle")
.attr("alignment-baseline", "central")
.text(dayName[i])
.attr("font-size", (size-3) +"px")
.attr("font-family", fontFamily)
.attr("fill", "#055");
var text = box.append("text")
.attr("x", offset + size / 2)
.attr("y", offset + size / 2 + (i + 7) * (size + gap) + gap + offset + gap)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "central")
.text(dayName[i])
.attr("font-size", (size-3) +"px")
.attr("font-family", fontFamily)
.attr("fill", "#055");
}
for (var i = 0; i <= dayCount; i++) {
var theData = data.find(i => new Date(i.date).toDateString() == date.toDateString());
var received = 0;
var sent = 0;
if (theData) {
received = theData.received || 0;
sent = theData.sent || 0;
}
var baseColor = 0xE;
var color = "#" +
(baseColor - Math.min(Math.round(sent), baseColor - 1)).toString(16) +
(baseColor - Math.min(Math.round(sent) + Math.round(received), baseColor - 1)).toString(16) +
(baseColor - Math.min(Math.round(received), baseColor - 1)).toString(16);
var x = offset + (size + gap) * (Math.floor(i / 7) + 1);
var y = offset + (size + gap) * date.getDay();
var monthY = offset - (size / 2);
if ( i > 7 * 27 - 1) {
x -= 27 * (size + gap)
y += 7 * (size + gap) + offset + gap + gap;
monthY += 7 * (size + gap) + offset + gap + gap;
}
var rect = box.append("rect")
.attr("x", x)
.attr("y", y)
.attr("width", size)
.attr("height", size)
.attr("fill", color)
.attr("rx", size/10)
.attr("ry", size/10)
.append("svg:title")
.text(date.toLocaleDateString() + "\n收：" + received + "\n发：" + sent);
if (date.getDate() == 1) {
var text = box.append("text")
.attr("x", x + 1)
.attr("y", monthY)
.attr("text-anchor", "left")
.attr("alignment-baseline", "central")
.text(monthName[date.getMonth()])
.attr("font-size", (size - 3) + "px")
.attr("font-family", fontFamily)
.attr("fill", "#055");
}
date.setDate(date.getDate() + 1);
}
};
function process() {
var result = [];
var receivedData = document.getElementById("received").value;
var sentData = document.getElementById("sent").value;
receivedData = receivedData.split("\n");
for (i in receivedData) {
var line = receivedData[i];
a= [...line.matchAll(/\d{4}-\d{2}-\d{2}/g)]
if (a.length == 2){
var date = a[1][0];
var theData = result.find(i => new Date(i.date).toDateString() == new Date(date).toDateString());
if (theData) {
theData.received += 1;
} else {
result.push({
"date": date,
"received": 1,
"sent": 0
})
}
}
}
sentData = sentData.split("\n");
for (i in sentData) {
var line = sentData[i];
a= [...line.matchAll(/\d{4}-\d{2}-\d{2}/g)]
if (a.length == 2 || a.length == 1){
var date = a[0][0];
var theData = result.find(i => new Date(i.date).toDateString() == new Date(date).toDateString());
if (theData) {
theData.sent += 1;
} else {
result.push({
"date": date,
"received": 0,
"sent": 1
})
}
}
}
document.getElementById("data").value = JSON.stringify(result);
go();
}
document.getElementById("data").value = "[{'date':'2021-07-03','received':2,'sent':4},{'date':'2021-07-20','received':2,'sent':0},{'date':'2021-06-24','received':1,'sent':0},{'date':'2021-06-22','received':1,'sent':0},{'date':'2021-06-14','received':1,'sent':0},{'date':'2021-05-31','received':4,'sent':0},{'date':'2021-05-28','received':1,'sent':3},{'date':'2021-05-26','received':1,'sent':0},{'date':'2021-06-06','received':1,'sent':0},{'date':'2021-05-19','received':1,'sent':0},{'date':'2021-05-18','received':2,'sent':3},{'date':'2021-06-07','received':1,'sent':2},{'date':'2021-05-20','received':1,'sent':1},{'date':'2021-05-23','received':1,'sent':0},{'date':'2021-05-06','received':1,'sent':0},{'date':'2021-05-02','received':1,'sent':2},{'date':'2021-04-10','received':1,'sent':0},{'date':'2021-04-06','received':1,'sent':0},{'date':'2021-04-01','received':3,'sent':0},{'date':'2021-03-24','received':1,'sent':0},{'date':'2021-04-17','received':1,'sent':0},{'date':'2021-04-03','received':1,'sent':0},{'date':'2021-03-26','received':1,'sent':0},{'date':'2021-03-22','received':1,'sent':0},{'date':'2021-06-26','received':1,'sent':2},{'date':'2021-03-29','received':1,'sent':0},{'date':'2021-03-13','received':1,'sent':0},{'date':'2021-03-10','received':1,'sent':0},{'date':'2021-03-07','received':2,'sent':0},{'date':'2021-03-16','received':1,'sent':0},{'date':'2021-03-09','received':1,'sent':0},{'date':'2021-03-12','received':2,'sent':4},{'date':'2021-03-02','received':2,'sent':0},{'date':'2021-03-01','received':1,'sent':0},{'date':'2021-02-24','received':1,'sent':0},{'date':'2021-02-17','received':1,'sent':3},{'date':'2021-01-23','received':1,'sent':0},{'date':'2021-01-06','received':2,'sent':0},{'date':'2020-12-28','received':1,'sent':0},{'date':'2020-12-23','received':1,'sent':0},{'date':'2020-12-10','received':3,'sent':0},{'date':'2020-12-05','received':1,'sent':3},{'date':'2020-11-13','received':1,'sent':0},{'date':'2020-11-06','received':1,'sent':0},{'date':'2020-11-23','received':1,'sent':0},{'date':'2020-12-01','received':1,'sent':1},{'date':'2020-11-02','received':9,'sent':0},{'date':'2020-11-05','received':2,'sent':0},{'date':'2020-10-26','received':1,'sent':0},{'date':'2020-10-30','received':2,'sent':0},{'date':'2020-10-28','received':2,'sent':0},{'date':'2020-10-22','received':2,'sent':0},{'date':'2020-10-29','received':2,'sent':0},{'date':'2020-10-20','received':4,'sent':5},{'date':'2020-10-25','received':1,'sent':8},{'date':'2020-10-13','received':1,'sent':0},{'date':'2020-10-08','received':2,'sent':1},{'date':'2020-07-17','received':2,'sent':0},{'date':'2020-08-26','received':1,'sent':0},{'date':'2020-07-15','received':3,'sent':0},{'date':'2020-07-07','received':2,'sent':0},{'date':'2020-08-09','received':1,'sent':0},{'date':'2020-07-20','received':1,'sent':0},{'date':'2020-06-30','received':2,'sent':0},{'date':'2020-09-01','received':1,'sent':0},{'date':'2020-07-05','received':1,'sent':5},{'date':'2020-06-29','received':1,'sent':0},{'date':'2020-07-03','received':1,'sent':0},{'date':'2020-05-15','received':1,'sent':0},{'date':'2020-05-13','received':1,'sent':0},{'date':'2020-05-12','received':1,'sent':0},{'date':'2020-04-19','received':1,'sent':0},{'date':'2021-06-23','received':0,'sent':2},{'date':'2021-05-16','received':0,'sent':6},{'date':'2021-04-25','received':0,'sent':3},{'date':'2021-03-20','received':0,'sent':9},{'date':'2021-03-06','received':0,'sent':5},{'date':'2021-02-28','received':0,'sent':8},{'date':'2021-02-27','received':0,'sent':6},{'date':'2021-02-22','received':0,'sent':3},{'date':'2021-02-12','received':0,'sent':8},{'date':'2020-12-14','received':0,'sent':1},{'date':'2020-11-09','received':0,'sent':1},{'date':'2021-02-25','received':0,'sent':5},{'date':'2021-02-19','received':0,'sent':1},{'date':'2020-11-01','received':0,'sent':9},{'date':'2020-11-07','received':0,'sent':1},{'date':'2020-10-18','received':0,'sent':3},{'date':'2020-10-17','received':0,'sent':4},{'date':'2020-10-04','received':0,'sent':13},{'date':'2020-10-03','received':0,'sent':8},{'date':'2020-07-12','received':0,'sent':4},{'date':'2020-06-26','received':0,'sent':7},{'date':'2020-05-09','received':0,'sent':3},{'date':'2020-04-04','received':0,'sent':1}]"
go(); </script>