-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcalendar.js
73 lines (53 loc) · 2.39 KB
/
calendar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
let calendar = document.querySelector('.calendar')
const month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
isLeapYear = (year) => {
return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 ===0)
}
getFebDays = (year) => {
return isLeapYear(year) ? 29 : 28
}
generateCalendar = (month, year) => {
let calendar_days = calendar.querySelector('.calendar-days')
let calendar_header_year = calendar.querySelector('#year')
let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
calendar_days.innerHTML = ''
let currDate = new Date()
if (!month) month = currDate.getMonth()
if (!year) year = currDate.getFullYear()
let curr_month = `${month_names[month]}`
month_picker.innerHTML = curr_month
calendar_header_year.innerHTML = year
// get first day of month
let first_day = new Date(year, month, 1)
for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
let day = document.createElement('div')
if (i >= first_day.getDay()) {
day.classList.add('calendar-day-hover')
day.innerHTML = i - first_day.getDay() + 1
day.innerHTML += `<span></span>
<span></span>
<span></span>
<span></span>`
if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) {
day.classList.add('curr-date')
}
}
calendar_days.appendChild(day)
}
}
let month_list = calendar.querySelector('.month-list')
month_names.forEach((e, index) => {
let month = document.createElement('div')
month.innerHTML = `<div data-month="${index}">${e}</div>`
month.querySelector('div').onclick = () => {
month_list.classList.remove('show')
curr_month.value = index
generateCalendar(index, curr_year.value)
}
month_list.appendChild(month)
})
let month_picker = calendar.querySelector('#month-picker')
let currDate = new Date()
let curr_month = {value: currDate.getMonth()}
let curr_year = {value: currDate.getFullYear()}
generateCalendar(curr_month.value, curr_year.value)