diff --git a/Calendar.js b/Calendar.js
new file mode 100644
index 0000000..fa2b76f
--- /dev/null
+++ 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;
diff --git a/index.html b/index.html
index ee03b3b..cdc673b 100644
--- a/index.html
+++ b/index.html
@@ -8,19 +8,19 @@
Calendar
-
+
-
+
-
+
+
+