101 lines
3.9 KiB
JavaScript
101 lines
3.9 KiB
JavaScript
import {getDaysInMonth, getFirstDayInMonth, getWeekdaysForLocale} from "./utils.js";
|
|
|
|
class Calendar {
|
|
constructor(calendarDiv, options = {locale: 'en-GB', firstDayInWeek: 'Sunday'}) {
|
|
this.calendarDiv = calendarDiv
|
|
this.options = options
|
|
this.date = new Date(Date.now())
|
|
// this.date = new Date(2021, 5, 12)
|
|
console.log(this.date)
|
|
this.visiableDays = 42
|
|
|
|
this.locale = this.options.locale
|
|
this.firstDayInWeek = this.options.firstDayInWeek
|
|
|
|
this.weekdays = getWeekdaysForLocale(this.locale, 'long', this.firstDayInWeek)
|
|
this.randomImgUrl = 'https://picsum.photos/1920/1080'
|
|
}
|
|
|
|
init() {
|
|
const body = document.querySelector('body')
|
|
if (body) {
|
|
body.style.backgroundImage = 'url(' + this.randomImgUrl + ')'
|
|
body.style.backgroundSize = 'cover'
|
|
body.style.backgroundRepeat = 'no-repeat'
|
|
body.style.backgroundPosition = 'center center'
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const calendarHeader = this.calendarDiv.querySelector('#calendar__header')
|
|
if (calendarHeader) {
|
|
const yearDiv = calendarHeader.querySelector('#year')
|
|
const monthDiv = calendarHeader.querySelector('#month')
|
|
|
|
if (yearDiv) {
|
|
yearDiv.innerText = Intl.DateTimeFormat(this.locale, {year: 'numeric'}).format(this.date)
|
|
}
|
|
|
|
if (monthDiv) {
|
|
monthDiv.innerText = Intl.DateTimeFormat(this.locale, {month: 'long'}).format(this.date)
|
|
}
|
|
}
|
|
|
|
const calendarBody = this.calendarDiv.querySelector('#calendar__body')
|
|
if (calendarBody) {
|
|
// Weekdays
|
|
for (let i = 0; i < 7; i++) {
|
|
const weekday = document.createElement('div')
|
|
weekday.classList.add('day', 'weekday')
|
|
weekday.textContent = this.weekdays[i]
|
|
calendarBody.appendChild(weekday)
|
|
}
|
|
|
|
// Days
|
|
const currentMonthDays = getDaysInMonth(this.date.getMonth(), this.date.getFullYear())
|
|
const lastMonthDays = getDaysInMonth(this.date.getMonth() - 1, this.date.getFullYear())
|
|
const nextMonthDays = getDaysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
|
|
const firstDayInMonth = getFirstDayInMonth(this.date.getMonth(), this.date.getFullYear())
|
|
|
|
let daysAtEndOfMonth = this.visiableDays - currentMonthDays - firstDayInMonth + 1
|
|
let daysAtStartOfMonth = this.visiableDays - daysAtEndOfMonth - currentMonthDays
|
|
if (daysAtStartOfMonth < 0) {
|
|
daysAtStartOfMonth = daysAtStartOfMonth + 7
|
|
daysAtEndOfMonth = daysAtEndOfMonth - 7
|
|
}
|
|
console.log(daysAtStartOfMonth, daysAtEndOfMonth)
|
|
|
|
for (let i = 0; i < this.visiableDays; i++) {
|
|
const day = document.createElement('div')
|
|
const dateSpan = document.createElement('span')
|
|
dateSpan.id = 'date'
|
|
day.classList.add('day', 'monthday')
|
|
|
|
let visibleDate = i - daysAtStartOfMonth + 1
|
|
|
|
// last month date
|
|
if (i < daysAtStartOfMonth) {
|
|
visibleDate = lastMonthDays + visibleDate
|
|
day.classList.add('dim')
|
|
}
|
|
|
|
// next month date
|
|
if (this.visiableDays - i - 1 < daysAtEndOfMonth) {
|
|
visibleDate = visibleDate - currentMonthDays
|
|
day.classList.add('dim')
|
|
}
|
|
|
|
dateSpan.innerText = visibleDate.toString()
|
|
|
|
const dayId = `${this.date.getFullYear()}${this.date.getMonth()}${this.date.getDay()}`
|
|
day.classList.add('day-' + dayId)
|
|
|
|
day.appendChild(dateSpan)
|
|
calendarBody.appendChild(day)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Calendar;
|