new design and added class function

2025-01-28 06:19:12 +01:00
parent b3d6c7c75b
commit 8e0d7c9e8d
5 changed files with 255 additions and 100 deletions
--- a/Calendar.js
+++ b/Calendar.js
@@ -0,0 +1,100 @@
+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;