class CalendarHelper {
static build(date, dates = null) {
const _daysNames = `
Mon
Tue
Wed
Thu
Fri
Sat
Sun
`;
let month = DateHelper.getMonth(date)
let html = ``, index = 1, indexRaw = 0;
for (let i = 0, dayNum = month[i]; i < month.length; i++, dayNum = month[i]) {
let className = ``
if (this._isInactive(dayNum, i)) {
className = 'inactive'
}
let color = this._getColor(new Date(date.getFullYear(), date.getMonth(), dayNum), dates)
html += this._getCalendarDay(dayNum, className, color)
if ((i + 1) % 7 == 0) {
html += ``
}
}
html = removeExcessTagSection(html)
document.querySelector('.calendar__days').innerHTML = _daysNames + html
function removeExcessTagSection(html) {
return html.substr(0, html.length - 9)
}
}
static main(day = null) {
let datePicker = document.querySelector('#date');
let oldDate = datePicker.value.substr(0, 7);
let nameDateBoard = document.querySelector('.sidebar__heading');
this._getMonth(datePicker.value.substr(5, 2), datePicker.value.substr(0, 4))
.then(dates => {
this.build(DateHelper.stringToDate(datePicker.value), dates)
datePicker.onchange = async function (day = null) {
let days = document.querySelectorAll('.calendar__day ')
for (let i = 0; i < days.length; i++) {
if (parseInt(days[i].textContent) === parseInt(datePicker.value.substr(8, 2)) &&
!days[i].classList.contains('inactive')) {
days[i].classList.add('active_day')
} else if (days[i].classList.contains('active_day'))
days[i].classList.remove('active_day')
}
if (!CalendarHelper.isOldDatePicker(datePicker, oldDate)) {
oldDate = datePicker.value.substr(0, 7);
CalendarHelper._getMonth(datePicker.value.substr(5, 2), datePicker.value.substr(0, 4))
.then(dates => {
CalendarHelper.main(day)
let date = new Date(datePicker.value);
let monthName = date.toLocaleString('default', {month: 'long'});
let dayWeekName = date.toLocaleString('default', {weekday: 'long'});
nameDateBoard.innerHTML = `${dayWeekName}
${monthName} ${datePicker.value.substr(8, 2)}`;
document.querySelector('#p0').innerHTML = CalendarHelper._getHtmlContentForDate(dates, datePicker.value)
})
}
let date = new Date(datePicker.value);
let monthName = date.toLocaleString('default', {month: 'long'});
let dayWeekName = date.toLocaleString('default', {weekday: 'long'});
nameDateBoard.innerHTML = `${dayWeekName}
${monthName} ${datePicker.value.substr(8, 2)}`;
document.querySelector('#p0').innerHTML = await CalendarHelper._getDayContent(date)
}
let days = document.querySelectorAll('.calendar__day');
for (let i = 0; i < Object.keys(days).length; i++) {
let dateDay = parseInt(days[i].textContent);
if (parseInt(datePicker.value.substr(8,2)) == dateDay && !days[i].classList.contains('inactive')) {
days[i].classList.add('active_day')
}
if (days[i].classList.contains('inactive')) {
days[i].onclick = function () {
let date = CalendarHelper._getFutureDate(datePicker.value, parseInt(days[i].textContent))
datePicker.value = date;
datePicker.onchange(this)
}
} else {
days[i].onclick = function () {
datePicker.value = datePicker.value.substr(0, 8) + DateHelper.intToDate(dateDay);
datePicker.onchange(this)
}
}
}
datePicker.onchange()
})
}
static _getHtmlContentForDate(content, date) {
/* making html content; Example: return "In this day Birthday of " +content['date']['user']; */
}
static _runBuild(date, content) {
/*making something for dates from content = [date1, date2, ...]*/
this.build(date, content)
}
static
async _getMonth(month, year) {
return fetch('../ajax/get-birthday-by-month?' +
'month=' + month)
.then((res) => {
return res.json()
})
}
static isOldDatePicker(datePicker, oldDate) {
if (datePicker.value.substr(0, 7) == oldDate)
return true;
return false
}
static _isInactive(numDay, i) {
if (i < 8 && numDay !== i + 1) {
return (numDay > i)
} else {
return (i - 8) > numDay
}
}
static _getCalendarDay(dayNum, className = ``, color = ``) {
let day = ''
if (color === 'danger' && className !== 'inactive') {
day = 'empty_day'
}
else if (color === 'success' && className !== 'inactive') {
day = 'fully_day'
}
return `
${dayNum}
`;
}
static _getColor(date, dates = null) {
if (dates == null || dates.length == 0) {
return ``;
}
for (dateContent of dates){
if (dateContent['date'] == date){
return dateContent['class'];
}
}
return ``;
}
static async _getDayContent(date){
}
static _getFutureDate(dat, value) {
let date = new Date(dat);
if (value < 8) {
if (date.getMonth() == 11) {
date = new Date(date.getFullYear() + 1, 0, value);
} else {
date = new Date(date.getFullYear(), date.getMonth() + 1, value);
}
} else {
if (date.getMonth() == 0) {
date = new Date(date.getFullYear() - 1, 11, value);
} else {
date = new Date(date.getFullYear(), date.getMonth() - 1, value);
}
}
return date.getFullYear() + '-' + DateHelper.intToDate(date.getMonth() + 1) + '-' + DateHelper.intToDate(value);
}
static _getActionColumn(url, id) {
return `
| `;
}
}