Nhận javascript của năm hiện tại

Phần mẫu của ứng dụng các bạn có thể tham khảo tại đây. https. //github. com/buihien0109/calendar-javascript/tree/master/calendar-start

Các bạn có thể quan sát thấy ứng dụng của chúng ta bao gồm 1 số chức năng như sau

• Hiển thị tháng và năm
• Hiển thị số ngày trong tháng
• Vị trí bắt đầu của ngày đầu tiên (ngày ngược 1 nằm ở thứ mấy trong tuần)
• Ngày hiện tại theo thời gian thực hiện (được kích hoạt với nền)
• Chức năng tháng sau, tháng trước

Bây giờ thì cùng bắt đầu phát triển thôi nào 😁

Hiển thị tháng và năm

Công việc đầu tiên mình sẽ làm là hiển thị tháng và năm, cái nào đơn giản thì mình làm trước vậy ^^

Mặc định thì khi vào vừa trang, mình sẽ hiển thị tháng và năm theo hiện tại

let monthEle = document.querySelector('.month');
let yearEle = document.querySelector('.year');

let currentMonth = new Date().getMonth();
let currentYear = new Date().getFullYear();

Ở trên mình có quyền truy cập vào nơi hiển thị tháng và năm trên giao diện và lưu vào 2 biến số thángEle và nămEle. Để về sau, khi chúng ta có dữ liệu về tháng và năm thì dựa vào 2 biến này để hiển thị trên giao diện

currentMonth, currentYear là 2 biến lưu trữ thông tin về tháng và năm hiện tại. Có 1 lưu ý rằng currentMonth hiện đang có giá trị từ 0 -> 11 (sử dụng getMonth()) nhưng điều mình muốn là hiển thị tháng theo tên tiếng anh (ví dụ:. Tháng một tháng hai,. )

function displayInfo() {
    // Hiển thị tên tháng
    let currentMonthName = new Date(
        currentYear,
        currentMonth
    ).toLocaleString('en-us', { month: 'long' })
        
    monthEle.innerText = currentMonthName;
    
    // Hiển thị năm
    yearEle.innerText = currentYear;
}

Tiếp theo trong hàm displayInfo() mình sẽ hiển thị tháng và năm hiện tại ra bên ngoài giao diện

Đối với việc hiển thị năm thì không có gì để bàn rồi, nhưng riêng đối với tháng thì có hơi khác 1 chút, chúng ta cần phải chuyển đổi tháng hiện tại từ số -> chuỗi ngày. Rất có thể Javascript có sẵn phương thức toLocaleString() để giúp chúng ta có thể làm điều này

Ngoài ra, nếu bạn không muốn sử dụng phương thức tích hợp toLocaleString(), thì có thể sử dụng switch - case để thay thế

window.onload = displayInfo;

Để hiển thị được thì cần gọi hàm displayInfo(). Ở đây mình lắng nghe sự kiện onload() để gọi hàm này

Và đây là kết quả ban đầu của chúng tôi

Hiển thị số ngày trong tháng

// Lấy số ngày của 1 tháng
function getDaysInMonth() {
    return new Date(currentYear, currentMonth + 1, 0).getDate();
}

let dateEle = document.querySelector('.date-container');
// Hiển thị ngày trong tháng lên trên giao diện
function renderDate() {
    let daysInMonth = getDaysInMonth();

    dateEle.innerHTML = '';

    for (let i = 0; i < daysInMonth; i++) {
        dateEle.innerHTML += `
            
${i + 1}
        `;
    }
}

Hàm getDaysInMonth() giúp chúng ta có thể lấy được số ngày trong tháng hiện tạiMonth

Tiếp theo mình định nghĩa hàm renderDate(), hàm này có tác dụng hiển thị danh sách ngày lên trên giao diện

let daysInMonth = getDaysInMonth();

Đầu tiên để biết tháng hiện tại có bao nhiêu ngày, chúng ta gọi hàm getDaysInMonth() vừa định nghĩa ở trên và lưu giá trị và biến daysInMonth

dateEle.innerHTML = '';

Vì mình đã fix hard code HTML trong giao diện ban đầu để bạn có thể quan sát xem số ngày trong tháng được hiển thị như thế nào. Nhưng bây giờ chúng ta cần phải hiển thị linh động số ngày theo tháng hiện tại (currentMonth), nên trước khi kết xuất, chúng ta cần xóa hết nội dung html fix hard before that để chuẩn bị kết xuất nội dung mới

for (let i = 0; i < daysInMonth; i++) {
    dateEle.innerHTML += `
        
class="day">${i + 1}</div>
    `;
}

Cuối cùng chúng ta sẽ sử dụng vòng lặp để thực hiện kết xuất số ngày trong tháng ra bên ngoài giao diện (số ngày sẽ được chứa trong thẻ "div" có lớp "ngày") nội dung bên trong sẽ dựa vào chỉ số của vòng lặp

Hiển thị ngày bắt đầu của tháng

// Lấy ngày bắt đầu của tháng
function getStartDayInMonth() {
    return new Date(currentYear, currentMonth, 1).getDay();
}

Hàm getStartDayInMonth() giúp chúng ta có thể biết ngày bắt đầu của tháng hiện tại nằm ở thứ mấy trong tuần

Phương thức getDay() return thứ trong tuần (0 - Chủ nhật, 1 - Thứ 2, 2 - Thứ 3 ,. )

________số 8

Sau khi xác định được ngày đầu tiên trong tháng bắt đầu vào thứ mấy, lúc này chúng ta chỉ việc sử dụng vòng lặp để hiển thị nội dung ra ngoài giao diện. Đối với những thứ trong tuần trước ngày bắt đầu trong tháng chúng ta sẽ tạo ra template có nội dung

nhưng có điều là nội dung trong thẻ được để trống

Sau bước này chúng ta được kết quả như sau

Active date at

function activeCurrentDay(day) {
    let day1 = new Date().toDateString();
    let day2 = new Date(currentYear, currentMonth, day).toDateString();
    return day1 == day2 ? 'active' : '';
}

Hàm activeCurrentDay() có tác dụng kiểm tra xem ngày hiện tại theo thời gian thực hiện (day1) trùng với ngày được khởi tạo bằng new Date() với các giá trị currentYear, currentMonth và tham số ngày hay không?

If day1 == day2 trùng nhau, at the date we will return on 'active' string, but not return a null string''

function displayInfo() {
    // Hiển thị tên tháng
    let currentMonthName = new Date(
        currentYear,
        currentMonth
    ).toLocaleString('en-us', { month: 'long' })
        
    monthEle.innerText = currentMonthName;
    
    // Hiển thị năm
    yearEle.innerText = currentYear;
}

0

Tiếp theo chúng ta sẽ điều chỉnh 1 chút về việc hiển thị ngày trong hàm renderDate(). Trong vòng lặp for, mỗi khi kết xuất ngày ra bên ngoài giao diện, chúng ta sẽ kiểm tra thêm điều kiện activeCurrentDay(i + 1) tương ứng với ngày đó, để thực hiện công việc đang hoạt động

Các bạn có thể quan sát kết quả ở hình ảnh dưới đây

Cũng ổn phải không nào 😁

Xử lý tháng sau, tháng trước

function displayInfo() {
    // Hiển thị tên tháng
    let currentMonthName = new Date(
        currentYear,
        currentMonth
    ).toLocaleString('en-us', { month: 'long' })
        
    monthEle.innerText = currentMonthName;
    
    // Hiển thị năm
    yearEle.innerText = currentYear;
}

1

Đơn giản là mỗi khi chúng ta nhấp vào nút vào tháng tới, lúc này chúng ta sẽ thực hiện tăng hiện tạiTháng lên 1 đơn vị, trường hợp hiện tạiTháng == 11 (tức tháng hiện tại là tháng 12) tại thời điểm này tăng hiện tạiNăm lên 1 và cho

Sau đó gọi hàm displayInfo() để cập nhật lại thông tin mới lên giao diện

Chúng ta sẽ xử lý các tương tự như tháng trước

function displayInfo() {
    // Hiển thị tên tháng
    let currentMonthName = new Date(
        currentYear,
        currentMonth
    ).toLocaleString('en-us', { month: 'long' })
        
    monthEle.innerText = currentMonthName;
    
    // Hiển thị năm
    yearEle.innerText = currentYear;
}

2

Cuối cùng thì chúng ta đã hoàn thành một ứng dụng Lịch đơn giản sử dụng Javascript. Hi vọng các bạn thích bài viết này

---

Phần mã nguồn các bạn có thể tham khảo tại đây. https. //github. com/buihien0109/calendar-javascript/tree/master/calendar-final