-
Notifications
You must be signed in to change notification settings - Fork 0
/
calendar.html
executable file
·141 lines (135 loc) · 6.76 KB
/
calendar.html
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Football Calendar</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="public/css/style.css">
</head>
<body>
<div id="app">
<div class="container">
<div class="row content">
<div class="col-sm-12 col-md-4 fixtures">
<div class="calendar">
<div class="header">
<h2 class="month-year">{{ currentMonthYear }}</h2>
<div>
<button @click="goToPreviousMonth" class="nav-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
</button>
<button @click="goToNextMonth" class="nav-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</button>
</div>
</div>
<div class="days-grid">
<div v-for="day in daysOfWeek" :key="day" class="day-name">
{{ day }}
</div>
<button
v-for="day in monthDays"
:key="day.toISOString()"
@click="handleDateClick(day)"
:class="[
'day-button',
!isSameMonth(day, currentDate) ? 'other-month' : '',
isToday(day) ? 'today' : '',
selectedDate && isSameDay(day, selectedDate) ? 'selected' : ''
]"
>
{{ day.getDate() }}
</button>
</div>
<div class="selected-date">
{{ selectedDateText }}
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Vue.js Script -->
<script>
new Vue({
el: '#app',
data() {
return {
currentDate: new Date(),
selectedDate: null,
daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
};
},
computed: {
currentMonthYear() {
const options = { month: 'long', year: 'numeric' };
return this.currentDate.toLocaleDateString('en-US', options);
},
monthDays() {
const year = this.currentDate.getFullYear();
const month = this.currentDate.getMonth();
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const days = [];
// Add days from previous month
const daysFromPrevMonth = firstDay.getDay();
for (let i = daysFromPrevMonth; i > 0; i--) {
days.push(new Date(year, month, -i + 1));
}
// Add days of current month
for (let d = new Date(firstDay); d <= lastDay; d.setDate(d.getDate() + 1)) {
days.push(new Date(d));
}
// Add days from next month
const daysFromNextMonth = 42 - days.length;
for (let i = 1; i <= daysFromNextMonth; i++) {
days.push(new Date(year, month + 1, i));
}
return days;
},
selectedDateText() {
if (this.selectedDate) {
return `Selected: ${this.formatDate(this.selectedDate)}`;
} else {
return `Today: ${this.formatDate(new Date())}`;
}
}
},
methods: {
goToPreviousMonth() {
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
},
goToNextMonth() {
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
},
handleDateClick(day) {
this.selectedDate = this.isSameDay(this.selectedDate, day) ? null : day;
},
isSameMonth(date1, date2) {
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
},
isSameDay(date1, date2) {
return date1 && date2 &&
date1.getFullYear() === date2.getFullYear() &&
date1.getMonth() === date2.getMonth() &&
date1.getDate() === date2.getDate();
},
isToday(date) {
const today = new Date();
return this.isSameDay(date, today);
},
formatDate(date) {
const options = { month: 'long', day: 'numeric', year: 'numeric' };
return date.toLocaleDateString('en-US', options);
}
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
</body>
</html>