Hôm nay mình sẽ hướng dẫn các bạn code cuốn lịch bằng vueJs rất đơn giản.
Đầu tiên là phần template này, mình sẽ chia ra 2 phần. Phần head bao gồm tên các ngày trong tuần, phần 2 là các ngày trong tháng.
<template>
<!-- calendar -->
<div class="calendar" v-if="calendar">
<!-- head -->
<div class="calendar-row head">
<div v-for="(item, index) in dateOfWeek" :key="index" class="row-item">
<strong v-text="item" />
</div>
</div>
<!-- body -->
<div
v-for="(row, row_index) in calendar"
:key="row_index"
class="calendar-row"
>
<div
v-for="(cell, cell_index) in row"
:key="cell_index"
class="row-item"
>
<span v-text="cell ? cell : ''" />
</div>
</div>
</div>
</template>Các bạn để ý cái này <span v-text="cell ? cell : '' " /> có nghĩa là nếu cell có giá trị thì mình mới hiển thị ra màn hình.
Tiếp theo là mình sẽ style cho phần này, mình sẽ sử dụng sass để style cho phần teamplate. Mình khuyên các bạn nên học sass vì nhìn nó rất trực quan, mạnh và không quá khó để học.
<style lang="scss">
.calendar {
padding: 0 1em;
.calendar-row {
display: flex;
&.head {
& > div {
height: 64px;
color: #eb5757;
background: #eb57571a;
border: thin solid #eb575733;
display: flex;
align-items: center;
justify-content: center;
}
}
.row-item {
flex-grow: 1;
position: relative;
border-top: none;
border: thin solid #e2e8f0;
min-width: 100px;
width: calc(100% / 7);
height: 100px;
& > span {
position: absolute;
top: 5px;
left: 5px;
color: #7184a3;
font-size: 16px;
}
}
}
}
</style>Cuối cùng là đến đoạn script, ở đây quan trọng nhất là 2 hàm getRangeMonth (Lấy ngày đầu và ngày cuối trong tháng) và buildCalendar (dùng để build lịch và hiển thị ra màn hình)
Mình sẽ sử dụng mảng 2 chiều để xử lý, mỗi 1 phần tử trong mảng sẽ là mảng con (tương ứng 1 hàng) và trong mảng con đó là các ngày trong tháng.
<script>
export default {
data() {
return {
dateOfWeek: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
calendar: null,
};
},
created() {
// sau khi khởi tạo component thì mình gọi hàm buildCalendar này để hiển thị lịch tháng 8 năm 2021
this.buildCalendar(8,2021)
},
methods: {
// lấy ngày đầu và ngày cuối trong tháng
getRangeMonth(numbMonth, numbYear) {
numbMonth = Number(numbMonth) || new Date().getMonth() + 1;
numbYear = Number(numbYear) || new Date().getFullYear();
return {
firstDay: new Date(`${numbYear}-${numbMonth}-1`),
lastDay: new Date(`${numbYear}-${numbMonth}-${new Date(numbYear, numbMonth, 0).getDate()}`)
};
},
buildCalendar(month, year) {
let arr = [[]]
// lấy ngày đầu và ngày cuối trong tháng
let { firstDay, lastDay } = this.getRangeMonth(month, year);
// đếm ngày
let countDay = 1;
// nếu countDay lớn hơn số ngày cuối trong tháng thì mình dừng vòng lặp
for (let i = 1; countDay <= lastDay.getDate(); i++) {
for (let j = 0; j < 7; j++) {
// first loop
if (i == 1) {
if (j < firstDay.getDay()) arr[arr.length - 1].push(0);
else {
arr[arr.length - 1].push(countDay);
countDay++;
}
} else {
if (countDay > lastDay.getDate()) arr[arr.length - 1].push(0);
else {
arr[arr.length - 1].push(countDay);
countDay++;
}
}
}
if (countDay > lastDay.getDate()) break;
arr.push([]);
}
this.calendar = arr
}
}
};
</script>Như vậy là xong rồi, các bạn có thể xem kết quả chi tiết ở dưới này.
Bạn cũng có thể làm 1 cái form chọn tháng, năm mà bạn muốn hiển thị. Ở đây mình làm cơ bản nhất cho các bạn tham khảo.
Chúc các bạn đọc bài vui vẻ 😘
