';
var week = scbody.querySelector('.sc-week');
var days = scbody.querySelector('.sc-days');
for (var i = 0; i < 7; i++) {
week.innerHTML = week.innerHTML + ' ';
}
for (var i = 0; i < 35; i++) {
days.innerHTML = days.innerHTML + '
';
}
//添加下拉框数据
this.updateSelect(this.tyear, this.tmonth);
//刷新日历
this.update();
//时间刷新
self.setInterval('SimpleCalendar.timeupdate()', 200);
}
//刷新日历
update(month = this.tmonth, year = this.tyear) {
this.updateSize()
this.updateWeek();
this.addData(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 += '';
}
selectMonth.innerHTML = '';
for (var i = 0; i < 12; i++) {
var data = this.languageData['months_' + this._options.language];
selectMonth.innerHTML += '';
}
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;
//取得节日数据
var data = options.mark;
if (data) {
daysElement.forEach(function(v, i) {
var day = +(v.querySelector('.day').innerHTML);
if (day == 1) currentmonth++;
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.month + '-' + lunar.day]) {
v.querySelector('.lunar-day').innerHTML = lunardata[lunar.month + '-' + lunar.day];
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;
//取得节日数据
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 (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;
})
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;
}
// get options() {
// console.log(this._options);
// }
}
//时间刷新函数
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-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: {
'1-1': '春节',
'2-2': '龙抬头',
'1-15': '元宵节',
'4-4': '寒食节',
'4-5': '清明节',
'5-5': '端午节',
'8-15': '中秋节',
'9-9': '重阳节',
'12-30': '除夕',
},
//节气
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']
},
}
SimpleCalendar.prototype.tyear = (new Date()).getFullYear();
SimpleCalendar.prototype.tmonth = (new Date()).getMonth() + 1;
SimpleCalendar.prototype.tday = (new Date()).getDate();