Hướng dẫn javascript month calendar - lịch tháng javascript
Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn tạo một ứng dụng Calendar nho nhỏ bằng Javascript Show
Đây là giao diện ứng dụng ban đầu của chúng ta
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 :
Bây giờ thì cùng bắt đầu triển thôi nào 😁 Hiển thị tháng và nămHiển thị số ngày trong tháng Vị trí bắt đầu của ngày đầu tiên (ngày mùng 1 nằm ở thứ mấy trong tuần)
Ngày hiện tại theo thời gian thực (được active với background)monthEle và yearEle. Để 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ị lên trên giao diện Chức năng next month, prev month, 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 tại đang có giá trị từ 0 -> 11 (sử dụng getMonth()) nhưng điều mình mong muốn là hiển thị tháng theo tên tiếng anh (ví dụ : January, February, ...)
Bây giờ thì cùng bắt đầu triển thôi nào 😁displayInfo() mình sẽ hiển thị tháng và năm hiện tại ra ngoài giao diện 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 ^^toLocaleString() để giúp chúng ta có thể làm điều này Mặc định thì khi vào vừa trang thì mình sẽ hiển thị tháng và năm tại thời điển hiện tạitoLocaleString(), thì có thể sử dụng switch - case để thay thế
Ở trên mình có 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 monthEle và yearEle. Để 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ị lên trên giao diệndisplayInfo(). Ở đây mình lắng nghe sự kiện onload() để gọi function này 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 tại đang có giá trị từ 0 -> 11 (sử dụng getMonth()) nhưng điều mình mong muốn là hiển thị tháng theo tên tiếng anh (ví dụ : January, February, ...) Hiển thị số ngày trong tháng
Vị trí bắt đầu của ngày đầu tiên (ngày mùng 1 nằm ở thứ mấy trong tuần)getDaysInMonth() giúp chúng ta có thể lấy được số ngày trong tháng currentMonth Ngày hiện tại theo thời gian thực (được active với background)renderDate(), function này có tác dụng hiển thị danh sách ngày lên trên giao diện Chức năng next month, prev monthBây giờ thì cùng bắt đầu triển thôi nào 😁getDaysInMonth() vừa định nghĩa ở trên và lưu giá trị và biến daysInMonth
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 ^^currentMonth), nên trước khi render, chúng ta cần clear hết nội dung html fix cứng trước đó để chuẩn bị render nội dung mới
|