Ví dụ mã JavaScript này giúp bạn tạo tiện ích lịch động. Nó hiển thị ngày, tháng và năm một cách linh hoạt thành một phần tử div. Tiện ích lịch đi kèm với giao diện thân thiện với người dùng để điều hướng tháng tiếp theo và tháng trước. Bên cạnh đó, người dùng cũng có thể chuyển đến một tháng hoặc năm cụ thể bằng cách chọn thông qua danh sách thả xuống được chọn
Bạn có thể dễ dàng tích hợp tiện ích lịch này vào dự án trang web/ứng dụng của mình để hiển thị lịch cho mục đích chung. Tương tự, bạn có thể tùy chỉnh giao diện của lịch bằng CSS bổ sung
Hơn nữa, tiện ích lịch hỗ trợ tiếng Pháp và tiếng Indonesia. Về cơ bản, tiện ích lịch này chỉ hiển thị ngày có điều hướng. Nếu bạn muốn tạo lịch động với các sự kiện hàng ngày, hãy kiểm tra tiện ích lịch này
Cách tạo Lịch động trong JavaScript
1. Trước hết tạo cấu trúc HTML cho giao diện cơ bản của lịch như sau
‹ ›
Jump To: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Bạn có thể đặt đoạn HTML trên ở bất kỳ đâu trên trang web của mình, nơi bạn muốn hiển thị lịch. Nếu bạn muốn thay đổi ngôn ngữ, hãy đặt nó thông qua thuộc tính data-lang. Các ngôn ngữ có sẵn như sau
- en cho tiếng Anh [mặc định]
- id cho tiếng Indonesia
- fr cho tiếng Pháp
2. Sau đó, tạo kiểu cho lịch bằng cách sử dụng các kiểu CSS sau. Bạn có thể thiết lập các giá trị CSS tùy chỉnh để thay đổi giao diện lịch theo chủ đề của mình
.wrapper {
margin: 15px auto;
max-width: 1100px;
}
.container-calendar {
background: #ffffff;
padding: 15px;
max-width: 475px;
margin: 0 auto;
overflow: auto;
}
.button-container-calendar button {
cursor: pointer;
display: inline-block;
zoom: 1;
background: #00a2b7;
color: #fff;
border: 1px solid #0aa2b5;
border-radius: 4px;
padding: 5px 10px;
}
.table-calendar {
border-collapse: collapse;
width: 100%;
}
.table-calendar td, .table-calendar th {
padding: 5px;
border: 1px solid #e2e2e2;
text-align: center;
vertical-align: top;
}
.date-picker.selected {
font-weight: bold;
outline: 1px dashed #00BCD4;
}
.date-picker.selected span {
border-bottom: 2px solid currentColor;
}
/* sunday */
.date-picker:nth-child[1] {
color: red;
}
/* friday */
.date-picker:nth-child[6] {
color: green;
}
#monthAndYear {
text-align: center;
margin-top: 0;
}
.button-container-calendar {
position: relative;
margin-bottom: 1em;
overflow: hidden;
clear: both;
}
#previous {
float: left;
}
#next {
float: right;
}
.footer-container-calendar {
margin-top: 1em;
border-top: 1px solid #dadada;
padding: 10px 0;
}
.footer-container-calendar select {
cursor: pointer;
display: inline-block;
zoom: 1;
background: #ffffff;
color: #585858;
border: 1px solid #bfc5c5;
border-radius: 3px;
padding: 5px 1em;
}
3. Cuối cùng, thêm mã JavaScript sau để chức năng hóa lịch
function generate_year_range[start, end] {
var years = "";
for [var year = start; year daysInMonth[month, year]] {
break;
} else {
cell = document.createElement["td"];
cell.setAttribute["data-date", date];
cell.setAttribute["data-month", month + 1];
cell.setAttribute["data-year", year];
cell.setAttribute["data-month_name", months[month]];
cell.className = "date-picker";
cell.innerHTML = "" + date + "";
if [ date === today.getDate[] && year === today.getFullYear[] && month === today.getMonth[] ] {
cell.className = "date-picker selected";
}
row.appendChild[cell];
date++;
}
}
tbl.appendChild[row];
}
}
function daysInMonth[iMonth, iYear] {
return 32 - new Date[iYear, iMonth, 32].getDate[];
}
Đó là tất cả. hy vọng bạn đã tích hợp thành công ví dụ về lịch động JavaScript này vào dự án của mình. Nếu bạn có bất kỳ câu hỏi hoặc gặp phải bất kỳ vấn đề nào, vui lòng bình luận bên dưới