由simple-calendar-es6 改版过来，修复本身插件存在的各种不对
添加一个名为simple-calendar-es6.js文件
/* eslint-disable no-sparse-arrays */
/* eslint-disable no-redeclare */
/* eslint-disable no-unused-vars */
class SimpleCalendar {
//构造函数
constructor(query, options) {
//默认配置
this._defaultOptions = {
width: "500px",
height: "500px",
language: "CH", //语言
showLunarCalendar: true, //阴历
showHoliday: true, //休假
showFestival: true, //节日
showLunarFestival: true, //农历节日
showSolarTerm: true, //节气
showMark: true, //标记
showWeek: true, // 是否显示星期日期
isAdd: false, //添加自定义内容
customData: {},
timeRange: {
startYear: 1900,
endYear: 2050
},
timeZone: "", //时区
mark: {
"2116-5-5": "上学"
},
theme: {
changeAble: false,
weeks: {
backgroundColor: "#FBEC9C",
fontColor: "#4A4A4A",
fontSize: "20px"
},
days: {
backgroundColor: "#ffffff",
fontColor: "#565555",
fontSize: "24px"
},
todaycolor: "orange",
activeSelectColor: "orange",
invalidDays: "#C1C0C0"
}
};
//容器
this.container = document.querySelector(query);
this._defaultOptions.width = this.container.style.offsetWidth;
this._defaultOptions.height = this.container.style.offsetHeight;
//得到最终配置
this._options = this.optionAssign(this._defaultOptions, options);
this.create();
}
//用B更新A的属性 并返回结果
optionAssign(optionsA, optionsB) {
for (var key in optionsB) {
if (typeof optionsA[key] !== "object") optionsA[key] = optionsB[key];
else {
optionsA[key] = this.optionAssign(optionsA[key], optionsB[key]);
}
}
return optionsA;
}
//生成日历样式
create() {
var root = this.container;
root.innerHTML =
'<div class="sc-header"> </div> <div class="sc-body"> </div>';
root.style.width = this._options.width;
root.style.height = this._options.height;
root.className = "sc-calendar";
var header = root.querySelector(".sc-header");
var scbody = root.querySelector(".sc-body");
//actions
header.innerHTML =
header.innerHTML +
'<div class="sc-actions">' +
' <div class="sc-yleft">' +
" ‹</div>" +
' <select class="sc-select-year" name="">' +
" </select>" +
' <div class="sc-yright">›</div>' +
" </div>";
header.innerHTML =
header.innerHTML +
'<div class="sc-actions">' +
' <div class="sc-mleft">' +
" ‹</div>" +
' <select class="sc-select-month" name="">' +
" </select>" +
' <div class="sc-mright">›</div>' +
"</div>";
header.innerHTML =
header.innerHTML +
'<div class="sc-actions"><span class="sc-return-today ">返回今天</span></div>';
header.innerHTML =
header.innerHTML +
'<div class="sc-actions"><span class="sc-time"></span></div>';
//是否显示星期日期
if (this._options.showWeek) {
scbody.innerHTML =
' <div class="sc-week"> </div> <div class="sc-days"> </div>';
var week = scbody.querySelector(".sc-week");
for (var i = 0; i < 7; i++) {
week.innerHTML = week.innerHTML + ' <div class="sc-week-item"></div>';
}
} else {
scbody.innerHTML = '<div class="sc-days"> </div>';
}
var days = scbody.querySelector(".sc-days");
for (var i = 0; i < 35; i++) {
days.innerHTML =
days.innerHTML +
'<div class="sc-item"><div class="day"></div><div class="lunar-day"></div><div class="signplay"></div></div>';
}
//添加下拉框数据
this.updateSelect(this.tyear, this.tmonth);
//刷新日历
this.update();
//时间刷新
self.setInterval(SimpleCalendar.timeupdate(), 200);
}
addHtml(year, month) {
if (year == undefined || month == undefined) {
return false;
}
var options = this._options;
if (options.isAdd) {
var daysElement = this.arrayfrom(
this.container.querySelectorAll(".sc-item")
);
var data = options.customData;
var currentmonth = month - 1;
if (currentmonth == "00") {
year--;
currentmonth = 12;
}
if (Object.keys(data).length > 0) {
daysElement.forEach(function(v, i) {
var day = +v.querySelector(".day").innerHTML;
if (day == 1) currentmonth++;
if (currentmonth > 12) {
year++;
currentmonth = 1;
}
currentmonth =
parseInt(currentmonth) < 10
? "0" + parseInt(currentmonth)
: currentmonth;
day = day < 10 ? "0" + day : day;
if (data[year + "-" + currentmonth + "-" + day]) {
v.querySelector(".signplay").innerHTML =
data[year + "-" + currentmonth + "-" + day];
} else {
v.querySelector(".signplay").innerHTML = "";
}
});
}
}
}
//刷新日历
update(month = this.tmonth, year = this.tyear) {
this.updateSize();
this.updateWeek();
this.addData(year, month);
this.addHtml(year, month);
this.updateHoliday(year, month);
this.updateMark(year, month);
this.updateFestival(year, month);
this.updateEvent();
this.updateTheme(this._options.theme);
}
//刷新日历
updateCustom(
customData = this._options.customData,
month = this.tmonth,
year = this.tyear
) {
this._options.customData = customData;
this.updateSize();
this.updateWeek();
this.addData(year, month);
this.addHtml(year, month);
this.updateHoliday(year, month);
this.updateMark(year, month);
this.updateFestival(year, month);
this.updateEvent();
this.updateTheme(this._options.theme);
}
//调整大小
updateSize(width = this._options.width, height = this._options.height) {
//将大小赋值给option
this._options.width = width;
this._options.height = height;
this.container.style.width = width;
this.container.style.height = height;
//根据长度和宽度大小调整适合的样式
if (parseInt(width) < 500) {
var actions = this.arrayfrom(
this.container.querySelectorAll(".sc-actions")
);
actions.forEach(function(v, i) {
v.classList.add("sc-actions-big");
});
} else {
var actions = this.arrayfrom(
this.container.querySelectorAll(".sc-actions")
);
actions.forEach(function(v, i) {
v.classList.remove("sc-actions-big");
});
}
if (parseInt(height) < 400) {
var items = this.arrayfrom(this.container.querySelectorAll(".sc-item"));
var weeks = this.arrayfrom(
this.container.querySelectorAll(".sc-week-item")
);
items.forEach(function(v, i) {
v.querySelector(".day").classList.add("sc-item-small");
});
weeks.forEach(function(v, i) {
v.classList.add("sc-item-small");
});
} else {
var items = this.arrayfrom(this.container.querySelectorAll(".sc-item"));
var weeks = this.arrayfrom(
this.container.querySelectorAll(".sc-week-item")
);
items.forEach(function(v, i) {
v.querySelector(".day").classList.remove("sc-item-small");
});
weeks.forEach(function(v, i) {
v.classList.remove("sc-item-small");
});
}
}
//刷新下拉框 只有在初始化和设置语言后才会更新
updateSelect(year, month) {
//下拉框
var selectYear = this.container.querySelector(".sc-select-year");
var selectMonth = this.container.querySelector(".sc-select-month");
selectYear.innerHTML = "";
for (
var i = this._options.timeRange.startYear;
i < this._options.timeRange.endYear + 1;
i++
) {
selectYear.innerHTML += '<option value="' + i + '">' + i + "</option>";
}
selectMonth.innerHTML = "";
for (var i = 0; i < 12; i++) {
var data = this.languageData["months_" + this._options.language];
selectMonth.innerHTML +=
'<option value="' + (i + 1) + '">' + data[i] + "</option>";
}
selectYear.value = year;
selectMonth.value = month;
}
//刷新星期
updateWeek() {
var weeks = this.arrayfrom(
this.container.querySelectorAll(".sc-week-item")
);
var data = this.languageData["days_" + this._options.language];
if (!data) {
console.error("language error!");
}
weeks.forEach(function(v, i) {
v.innerHTML = data[i];
});
}
//添加阳历阴历数据
addData(year, month) {
var daysElement = this.arrayfrom(
this.container.querySelectorAll(".sc-item")
);
var day = new Date(year, month - 1, 1);
var week = day.getDay();
if (week == 0) week = 7;
//计算得到第一个格子的日期
var thispageStart = new Date(
Date.parse(day) - (week - 1) * 24 * 3600 * 1000
);
//对每一个格子遍历
for (var i = 0; i < 35; i++) {
daysElement[i].className = "sc-item";
var theday = new Date(Date.parse(thispageStart) + i * 24 * 3600 * 1000);
var writeyear = theday.getFullYear();
var writeday = theday.getDate();
var writemonth = theday.getMonth() + 1;
if (writemonth != month) {
daysElement[i].classList.add("sc-othermenth");
}
daysElement[i].querySelector(".day").innerHTML = writeday;
//判断是否添加阴历
if (this._options.showLunarCalendar) {
daysElement[i].querySelector(".lunar-day").innerHTML = new LunarHelp(
writeyear,
writemonth,
writeday
).getLunarDayName();
} else {
daysElement[i].querySelector(".lunar-day").innerHTML = "";
daysElement[i].classList.add("item-nolunar");
}
//添加today样式
if (
this.tyear == writeyear &&
this.tday == writeday &&
this.tmonth == writemonth
) {
this.selectDay = daysElement[i];
daysElement[i].classList.add("sc-today");
}
}
}
//刷新标记日期
updateMark(year, month) {
var options = this._options;
if (options.showMark) {
var daysElement = this.arrayfrom(
this.container.querySelectorAll(".sc-item")
);
var currentmonth = month - 1;
if (currentmonth == "00") {
year--;
currentmonth = 12;
}
//取得节日数据
var data = options.mark;
if (data) {
daysElement.forEach(function(v, i) {
var day = +v.querySelector(".day").innerHTML;
if (day == 1) currentmonth++;
if (currentmonth > 12) {
year++;
currentmonth = 1;
}
currentmonth =
parseInt(currentmonth) < 10
? "0" + parseInt(currentmonth)
: currentmonth;
day = day < 10 ? "0" + day : day;
if (data[year + "-" + currentmonth + "-" + day]) {
v.classList.add("sc-mark");
v.title = data[year + "-" + currentmonth + "-" + day];
} else {
v.classList.remove("sc-mark");
v.title = "";
}
});
}
}
}
//刷新节日数据
updateFestival(year, month) {
var options = this._options;
var daysElement = this.arrayfrom(
this.container.querySelectorAll(".sc-item")
);
var currentmonth = month - 1;
//取得节日数据
var data = this.languageData["feativals_" + this._options.language];
var lunardata = this.languageData[
"lunarFeatival_" + this._options.language
];
var solarTermdata = this.languageData["solarTerm"];
if (!data) {
console.error("language error!");
}
daysElement.forEach(function(v, i) {
var day = +v.querySelector(".day").innerHTML;
if (day == 1) currentmonth++;
//24节气
if (options.showSolarTerm) {
if (solarTermdata[currentmonth + "-" + day]) {
v.querySelector(".lunar-day").innerHTML =
solarTermdata[currentmonth + "-" + day];
v.classList.add("sc-festival");
}
}
//国际节日
if (options.showFestival) {
if (data[currentmonth + "-" + day]) {
v.querySelector(".lunar-day").innerHTML =
data[currentmonth + "-" + day];
v.classList.add("sc-festival");
}
}
//阴历节日
if (lunardata && options.showLunarFestival) {
var lunar = new LunarHelp(year, currentmonth, day).getLunarDayNum();
if (lunardata[lunar]) {
v.querySelector(".lunar-day").innerHTML = lunardata[lunar];
v.classList.add("sc-festival");
}
}
});
}
//刷新假期 休假
updateHoliday(year, month) {
var options = this._options;
if (options.showHoliday) {
var daysElement = this.arrayfrom(
this.container.querySelectorAll(".sc-item")
);
var currentmonth = month - 1;
if (currentmonth == "00") {
year--;
currentmonth = 12;
}
//取得节日数据
var data = this.languageData.vocation["data_" + year];
if (data) {
daysElement.forEach(function(v, i) {
var day = +v.querySelector(".day").innerHTML;
if (day == 1) currentmonth++;
if (currentmonth > 12) {
year++;
currentmonth = 1;
}
//国际节日
if (data.indexOf(currentmonth + "-" + day) > 0) {
v.classList.add("sc-vocation");
}
});
}
}
}
//刷新主题
updateTheme(theme) {
if (this._options.theme.changeAble) {
var daytheme = theme.days;
var weektheme = theme.weeks;
var weeks = this.arrayfrom(
this.container.querySelectorAll(".sc-week-item")
);
var days = this.arrayfrom(this.container.querySelectorAll(".sc-item"));
weeks.forEach(function(v, i) {
v.style.backgroundColor = weektheme.backgroundColor;
v.style.fontSize = weektheme.fontSize;
v.style.color = weektheme.fontColor;
});
days.forEach(function(v, i) {
if (!v.classList.contains("sc-today")) {
v.style.backgroundColor = daytheme.backgroundColor;
v.querySelector(".day").style.color = daytheme.fontColor;
} else {
v.style.backgroundColor = theme.todaycolor;
}
v.querySelector(".day").style.fontSize = daytheme.fontSize;
});
// eslint-disable-next-line no-unused-vars
var Calendar = this;
//active border
days.forEach(function(v, i) {
v.onmouseover = function(e) {
this.style.borderColor = theme.activeSelectColor;
this.style.borderWidth = "1px";
};
v.onmouseout = function(e) {
this.style.borderColor = "#F1EBE4";
this.style.borderWidth = "0 0 1px 1px";
};
});
}
}
//刷新事件
updateEvent() {
var daysElement = this.arrayfrom(
this.container.querySelectorAll(".sc-item")
);
var container = this.container;
var calendar = this;
daysElement.forEach(function(v, i) {
v.onmouseover = function(e) {
this.classList.add("sc-active-day");
};
v.onmouseout = function(e) {
this.classList.remove("sc-active-day");
};
v.onclick = function() {
calendar.selectDay = v;
var pre = container.querySelector(".sc-selected");
if (pre) pre.classList.remove("sc-selected");
this.classList.add("sc-selected");
};
});
var selectYear = container.querySelector(".sc-select-year");
var selectMonth = container.querySelector(".sc-select-month");
selectYear.onchange = function() {
var m = selectMonth.value;
var y = this.value;
calendar.update(m, y);
};
selectMonth.onchange = function() {
var y = selectYear.value;
var m = this.value;
calendar.update(m, y);
};
var yearadd = container.querySelector(".sc-yright");
var yearsub = container.querySelector(".sc-yleft");
var monthadd = container.querySelector(".sc-mright");
var monthsub = container.querySelector(".sc-mleft");
yearadd.onclick = function() {
var currentyear = selectYear.value;
if (currentyear < 2099) currentyear++;
selectYear.value = currentyear;
calendar.update(this.tmonth, currentyear);
};
yearsub.onclick = function() {
var currentyear = selectYear.value;
if (currentyear > 1900) currentyear--;
selectYear.value = currentyear;
calendar.update(this.tmonth, currentyear);
};
monthadd.onclick = function() {
var currentmonth = selectMonth.value;
var currentyear = selectYear.value;
if (currentmonth < 12) currentmonth++;
else {
currentmonth = 1;
selectYear.value = ++currentyear;
}
selectMonth.value = currentmonth;
calendar.update(currentmonth, currentyear);
};
monthsub.onclick = function() {
var currentmonth = selectMonth.value;
var currentyear = selectYear.value;
if (currentmonth > 1) currentmonth--;
else {
currentmonth = 12;
selectYear.value = --currentyear;
}
selectMonth.value = currentmonth;
calendar.update(currentmonth, currentyear);
};
var returntoday = container.querySelector(".sc-return-today");
returntoday.onclick = function() {
selectYear.value = calendar.tyear;
selectMonth.value = calendar.tmonth;
calendar.update();
};
}
//添加标记
addMark(day, info) {
this._options.mark[day] = info;
this.update();
}
//获取用户点击的日期
getSelectedDay() {
var selectYear = this.container.querySelector(".sc-select-year").value;
var selectMonth = this.container.querySelector(".sc-select-month").value;
var selectDay = this.selectDay.querySelector(".day").innerHTML;
return new Date(selectYear, selectMonth - 1, selectDay);
}
//设置语言
setLenguage(language) {
this._options.language = language;
var selectYear = this.container.querySelector(".sc-select-year");
var selectMonth = this.container.querySelector(".sc-select-month");
this.updateSelect(selectYear.value, selectMonth.value);
this.update();
}
//设置是否显示节日
showFestival(s) {
this._options.showFestival = s;
this.update();
}
//设置是否显示假期
showHoliday(s) {
this._options.showHoliday = s;
this.update();
}
//设置是否显示节气
showSolarTerm(s) {
this._options.showSolarTerm = s;
this.update();
}
//设置是否显示阴历节日
showLunarFestival(s) {
this._options.showLunarFestival = s;
this.update();
}
//设置是否显示阴历日期
showLunarCalendar(s) {
this._options.showLunarCalendar = s;
this.update();
}
//设置是否显示标记日期
showMark(s) {
this._options.showMark = s;
this.update();
}
//将nodelist转为数组
//nodelist转数组
arrayfrom(nidelist) {
var array = [];
[].forEach.call(nidelist, function(v) {
array.push(v);
});
return array;
}
}
//时间刷新函数
SimpleCalendar.timeupdate = function() {
var timespan = document.querySelectorAll(".sc-time");
var now = new Date();
var nh = now.getHours();
var nm = now.getMinutes();
var ns = now.getSeconds();
if (nh < 10) nh = "0" + nh;
if (nm < 10) nm = "0" + nm;
if (ns < 10) ns = "0" + ns;
[].forEach.call(timespan, function(v) {
v.innerHTML = "时间：" + nh + ":" + nm + ":" + ns;
});
};
//国际化，和一些节日数据，标记数据
SimpleCalendar.prototype.languageData = {
feativals_CH: {
"1-1": "元旦",
"2-14": "情人节",
"3-8": "妇女节",
"3-12": "植树节",
"4-1": "愚人节",
"4-22": "地球日",
"5-1": "劳动节",
"5-4": "青年节",
"6-1": "儿童节",
"7-1": "建党节",
"8-1": "建军节",
"9-10": "教师节",
"10-1": "国庆节",
"12-24": "平安夜",
"12-25": "圣诞节"
},
feativals_EN: {
"1-1": "new year’s day",
"2-14": "Saint Valentine's Day",
"3-8": "international women’s day",
"3-12": "Arbor Day",
"4-1": "April Fool's Day",
"4-22": "Earth Day",
"5-1": "international labour day",
"5-4": "Chinese Youth Day",
"6-1": "Children's Day",
"7-1": "The party's Day",
"8-1": "the Army's Day",
"9-10": "Teachers' Day",
"10-1": "National Day",
"12-25": "Christmas Day"
},
lunarFeatival_CH: {
正月初一: "春节",
二月初二: "龙抬头",
正月十五: "元宵节",
四月初四: "寒食节",
四月初五: "清明节",
五月初五: "端午节",
八月十五: "中秋节",
九月初九: "重阳节",
腊月三十: "除夕"
},
//节气
solarTerm: {
"2-3": "立春",
"5-5": "立夏",
"8-7": "立秋",
"11-7": "立冬",
"2-18": "雨水",
"5-20": "小满",
"8-22": "处暑",
"11-22": "小雪",
"3-5": "惊蛰",
"6-5": "芒种",
"9-7": "白露",
"12-6": "大雪",
"3-20": "春分",
"6-21": "夏至",
"9-22": "秋分",
"12-21": "冬至",
"4-4": "清明",
"7-6": "小暑",
"10-8": "寒露",
"1-5": "小寒",
"4-19": "谷雨",
"7-22": "大暑",
"10-23": "霜降",
"1-20": "大寒"
},
days_EN: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
days_CH: ["一", "二", "三", "四", "五", "六", "日"],
months_EN: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
months_CH: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月"
],
vocation: {
data_2016: [
"1-1",
"1-2",
"1-3",
"2-7",
"2-8",
"2-9",
"2-10",
"2-11",
"2-12",
"2-13",
"4-2",
"4-3",
"4-4",
"4-30",
"5-1",
"5-2",
"6-9",
"6-10",
"6-11",
"9-15",
"9-16",
"9-17",
,
"10-1",
"10-2",
"10-3",
"10-4",
"10-5",
"10-6",
"10-7"
]
}
};
class LunarHelp {
constructor(year, month, day) {
this.madd = new Array(12);
this.tgString = "甲乙丙丁戊己庚辛壬癸";
this.dzString = "子丑寅卯辰巳午未申酉戌亥";
this.numString = "一二三四五六七八九十";
this.monString = "正二三四五六七八九十冬腊";
this.weekString = "日一二三四五六";
this.sx = "鼠牛虎兔龙蛇马羊猴鸡狗猪";
(this.cYear = year), (this.cMonth = month), (this.cDay = day), this.TheDate;
this.CalendarData = new Array(
0xa4b,
0x5164b,
0x6a5,
0x6d4,
0x415b5,
0x2b6,
0x957,
0x2092f,
0x497,
0x60c96,
0xd4a,
0xea5,
0x50da9,
0x5ad,
0x2b6,
0x3126e,
0x92e,
0x7192d,
0xc95,
0xd4a,
0x61b4a,
0xb55,
0x56a,
0x4155b,
0x25d,
0x92d,
0x2192b,
0xa95,
0x71695,
0x6ca,
0xb55,
0x50ab5,
0x4da,
0xa5b,
0x30a57,
0x52b,
0x8152a,
0xe95,
0x6aa,
0x615aa,
0xab5,
0x4b6,
0x414ae,
0xa57,
0x526,
0x31d26,
0xd95,
0x70b55,
0x56a,
0x96d,
0x5095d,
0x4ad,
0xa4d,
0x41a4d,
0xd25,
0x81aa5,
0xb54,
0xb6a,
0x612da,
0x95b,
0x49b,
0x41497,
0xa4b,
0xa164b,
0x6a5,
0x6d4,
0x615b4,
0xab6,
0x957,
0x5092f,
0x497,
0x64b,
0x30d4a,
0xea5,
0x80d65,
0x5ac,
0xab6,
0x5126d,
0x92e,
0xc96,
0x41a95,
0xd4a,
0xda5,
0x20b55,
0x56a,
0x7155b,
0x25d,
0x92d,
0x5192b,
0xa95,
0xb4a,
0x416aa,
0xad5,
0x90ab5,
0x4ba,
0xa5b,
0x60a57,
0x52b,
0xa93,
0x40e95
);
this.madd[0] = 0;
this.madd[1] = 31;
this.madd[2] = 59;
this.madd[3] = 90;
this.madd[4] = 120;
this.madd[5] = 151;
this.madd[6] = 181;
this.madd[7] = 212;
this.madd[8] = 243;
this.madd[9] = 273;
this.madd[10] = 304;
this.madd[11] = 334;
}
GetBit(m, n) {
return (m >> n) & 1;
}
e2c() {
this.TheDate =
arguments.length != 3
? new Date()
: new Date(arguments[0], arguments[1], arguments[2]);
var total, m, n, k;
var isEnd = false;
var tmp = this.TheDate.getYear();
if (tmp < 1900) {
tmp += 1900;
}
total =
(tmp - 1921) * 365 +
Math.floor((tmp - 1921) / 4) +
this.madd[this.TheDate.getMonth()] +
this.TheDate.getDate() -
38;
if (this.TheDate.getYear() % 4 == 0 && this.TheDate.getMonth() > 1) {
total++;
}
for (m = 0; ; m++) {
k = this.CalendarData[m] < 0xfff ? 11 : 12;
for (n = k; n >= 0; n--) {
if (total <= 29 + this.GetBit(this.CalendarData[m], n)) {
isEnd = true;
break;
}
total = total - 29 - this.GetBit(this.CalendarData[m], n);
}
if (isEnd) break;
}
this.cYear = 1921 + m;
this.cMonth = k - n + 1;
this.cDay = total;
if (k == 12) {
if (this.cMonth == Math.floor(this.CalendarData[m] / 0x10000) + 1) {
this.cMonth = 1 - this.cMonth;
}
if (this.cMonth > Math.floor(this.CalendarData[m] / 0x10000) + 1) {
this.cMonth--;
}
}
}
GetLunarString() {
var tmp = "";
if (this.cMonth < 1) {
tmp += "(闰)";
tmp += this.monString.charAt(-this.cMonth - 1);
} else {
tmp += this.monString.charAt(this.cMonth - 1);
}
tmp += "月";
tmp +=
this.cDay < 11
? "初"
: this.cDay < 20
? "十"
: this.cDay < 30
? "廿"
: "三十";
if (this.cDay % 10 != 0 || this.cDay == 10) {
tmp += this.numString.charAt((this.cDay - 1) % 10);
}
return tmp;
}
getLunarDayNum() {
let solarYear = this.cYear;
let solarMonth = this.cMonth;
let solarDay = this.cDay;
if (solarYear < 1921 || solarYear > 4020) {
return "";
} else {
solarMonth = parseInt(solarMonth) > 0 ? solarMonth - 1 : 11;
this.e2c(solarYear, solarMonth, solarDay);
let data = this.GetLunarString();
return data;
}
}
GetcDateString() {
var tmp = "";
tmp += this.tgString.charAt((this.cYear - 4) % 10);
tmp += this.dzString.charAt((this.cYear - 4) % 12);
tmp += "(";
tmp += this.sx.charAt((this.cYear - 4) % 12);
tmp += ")年 ";
if (this.cMonth < 1) {
tmp += "(闰)";
tmp += this.monString.charAt(-this.cMonth - 1);
} else {
tmp += this.monString.charAt(this.cMonth - 1);
}
tmp += "月";
tmp +=
this.cDay < 11
? "初"
: this.cDay < 20
? "十"
: this.cDay < 30
? "廿"
: "三十";
if (this.cDay % 10 != 0 || this.cDay == 10) {
tmp += this.numString.charAt((this.cDay - 1) % 10);
}
return tmp;
}
//返回农历
getLunarDayName() {
let solarYear = this.cYear;
let solarMonth = this.cMonth;
let solarDay = this.cDay;
if (solarYear < 1921 || solarYear > 4020) {
return "";
} else {
solarMonth = parseInt(solarMonth) > 0 ? solarMonth - 1 : 11;
this.e2c(solarYear, solarMonth, solarDay);
return this.GetLunarString();
}
}
//返回生肖和农历
GetLunarDay() {
let solarYear = this.cYear;
let solarMonth = this.cMonth;
let solarDay = this.cDay;
if (solarYear < 1921 || solarYear > 2050) {
return "";
} else {
solarMonth = parseInt(solarMonth) > 0 ? solarMonth - 1 : 11;
this.e2c(solarYear, solarMonth, solarDay);
return this.GetcDateString();
}
}
}
SimpleCalendar.prototype.tyear = new Date().getFullYear();
SimpleCalendar.prototype.tmonth = new Date().getMonth() + 1;
SimpleCalendar.prototype.tday = new Date().getDate();
export default { SimpleCalendar };添加一个名为simple-calendar.css文件
.sc-calendar {
width: 98%;
height: 600px;
text-align: center;
font-family: "Microsoft Yahei";
color: #4A4A4A;
box-shadow: 2px 4px 5px #bdbdbd;
border-width: 1px 0 0 1px;
border-color: #E6E4E0;
border-style: solid;
float: left;
margin-right: 20px;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
user-select: none;
-webkit-text-size-adjust: none;
font-size: 16px;
}
.sc-header {
height: 35px;
border-bottom: 0;
}
.sc-body {
height: 94%;
clear: both;
box-shadow: 2px 4px 5px #bdbdbd;
}
.sc-week {
height: 12%;
font-weight: 400;
font-size: 20px;
color: #4A4A4A;
}
.sc-days {
height: 88%;
}
.sc-item {
height: 16%;
float: left;
font-weight: 600;
color: #565555;
width: 14.2%;
padding-top: 10px;
background-color: #ffffff;
border-width: 0 0 1px 1px;
border-color: #F1EBE4;
border-style: solid;
box-sizing: border-box;
}
.item-nolunar {
padding-top: 20px;
}
.sc-item:nth-child(7n) .day, .sc-item:nth-child(7n+6) .day {
color: rgba(224, 8, 8, 0.74);
}
.sc-vocation {
background-color: #FFEBEC;
}
.sc-mark{
background-color: #E5FBFA;
}
.sc-vocation:before {
content: '休';
display: block;
position: absolute;
font-size: 0.7em;
width: 1.2em;
font-weight: 100;
color: white;
background-color: #E00808;
margin-top: -10px;
}
.sc-othermenth {
color: #C1C0C0 !important;
}
.sc-othermenth .day, .sc-othermenth .lunar-day {
color: #C1C0C0 !important;
}
.sc-active-day, .sc-selected {
border: 1px solid orange;
}
.sc-today {
background-color: orange;
color: white;
border: 1px solid orange;
}
.sc-item .day {
font-size: 1.5em;
}
.sc-today .day {
color: white !important;
}
.sc-item .lunar-day {
font-size: 10px;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.sc-festival .lunar-day {
color: #E00808;
}
/*.sc-item:last-child, .sc-item:nth-child(7n) {
border-width: 0 1px 1px 1px;
}*/
.sc-week-item {
height: 100%;
padding-top: 4%;
float: left;
width: 14.285%;
background-color: #FBEC9C;
border-width: 1px 0 1px 1px;
border-color: #ECE3B1;
border-style: solid;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
}
.sc-item-small{
font-size: 10px !important;
}
.sc-week-item:last-child {
border-width: 1px 1px 1px 1px;
}
.sc-week-item:nth-child(7n), .sc-week-item:nth-child(7n+6) {
color: rgba(224, 8, 8, 0.74)!important;
}
.sc-actions {
float: left;
width: 25%;
padding: 5px;
height: 100%;
box-sizing: border-box;
}
.sc-actions:last-child {
float: right;
}
.sc-actions-big{
width: 50%;
}
@media screen and (max-width : 500px){
.sc-actions{
width: 50%;
}
}
.sc-header select {
border-color: rgba(0, 0, 0, 0);
padding: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: "Microsoft Yahei";
color: #606060;
font-size: 13px ;
}
.sc-header input {
border-color: rgba(0, 0, 0, 0);
padding: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: "Microsoft Yahei";
color: #606060;
}
.sc-actions div {
display: inline-block;
/*border: 1px solid #ccc;*/
vertical-align: bottom;
width: 20px;
padding-bottom: 5px;
font-size: 1.5em;
line-height: 0.9em;
}
.sc-return-today {
display: block;
background-color: #F5F5F9;
border-radius: 2px;
/* border: 1px solid #ccc; */
width: 60px;
font-size: 0.8em;
padding: 0.3em;
margin: auto;
}
.sc-time {
display: block;
margin-top: 3px;
font-size: 0.8em;
}
.signplay{
font-weight: normal;
color: #f5f7ff;
background:#9090b4 ;
border-radius: 3px;
font-size: 12px;
text-align: center;
position: absolute;
right: 3px;
bottom: 1px;
padding: 0px 3px;
}
.sc-item{
position: relative;
}在vue中局部使用
<template>
<section class="content">
<div id="container" style="float:none;margin: 0px auto;"></div>
</section>
</template>
<script>
import calendar from "../../../../public/calendar/simple-calendar-es6.js";
export default {
...calendar,
data() {
return {}
},
computed: {
/**监听属性类似于data概念 */
},
watch: {
/**监控data中的数据变化 */
},
methods: {
/**方法集合 */
handleClick() {},
goBack() {}
},
created() {
/**生命周期-创建完成（可以访问当前this实例） */
},
mounted() {
/**生命周期-挂载完成（可以访问DOM元素） */
// eslint-disable-next-line no-unused-vars
var myCalendar = new calendar.SimpleCalendar("#container", {
isAdd: true
});
},
beforeCreate() {
/**生命周期-创建之前 */
},
beforeMount() {
/**生命周期-挂载之前 */
},
beforeUpdate() {
/**生命周期-更新之前 */
},
updated() {
/**生命周期-更新之后 */
},
beforeDestroy() {
/**生命周期-销毁之前 */
},
destroyed() {
/**生命周期-销毁完成 */
},
activated() {
/**如果页面有keep-alive缓存功能，这个函数会触发 */
}
};
</script>在静态页面中:
<link rel="stylesheet" type="text/css" href="stylesheets/simple-calendar.css"> <script type="text/javascript" src="javascripts/simple-calendar-es6.js"></script>
<div id="container" style="float:none;margin: 0px auto;"></div>
var myCalendar = new calendar.SimpleCalendar("#container", {
isAdd: true
});可选参数：
width: "500px",
height: "500px",
language: "CH", //语言
showLunarCalendar: true, //阴历
showHoliday: true, //休假
showFestival: true, //节日
showLunarFestival: true, //农历节日
showSolarTerm: true, //节气
showMark: true, //标记
showWeek: true, // 是否显示星期日期
isAdd: false, //添加自定义内容
customData: { "2020-11-25": 50, "2020-11-12": 19 },
timeRange: {
startYear: 1900,
endYear: 2050
},
timeZone: "", //时区
mark: {
"2116-5-5": "上学"
},
theme: {
changeAble: false,
weeks: {
backgroundColor: "#FBEC9C",
fontColor: "#4A4A4A",
fontSize: "20px"
},
days: {
backgroundColor: "#ffffff",
fontColor: "#565555",
fontSize: "24px"
},
todaycolor: "orange",
activeSelectColor: "orange",
invalidDays: "#C1C0C0"
}效果：
最后更新2020年12月11日13:31:20
评论区