Hướng dẫn how do i create a dynamic calendar in html? - làm cách nào để tạo lịch động trong html?

Mã mã:	Lịch JavaScript thuần túy
Loại tệp:	ZIP (HTML, CSS, JavaScript)
Tác giả:	Adi Jaya
Chỉnh sửa mã trực tuyến:	Xem trên Codepen

Chia sẻ cái này:

Được phát hành:	7 tháng trước
Cập nhật mới nhất:	7 tháng trước
Cập nhật mới nhất:	6,056

Tải xuống:

Ví dụ mã JavaScript này giúp bạn tạo tiện ích lịch động. Nó làm cho ngày, tháng và năm động trở thành một yếu 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 vào tháng tiếp theo và tháng trước. Bên cạnh đó, người dùng cũng có thể nhảy sang một tháng hoặc năm cụ thể bằng cách chọn thông qua việc thả xuống 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 đa năng. Tương tự, bạn có thể tùy chỉnh sự xuất hiện của lịch với CSS bổ sung.

Hơn nữa, tiện ích lịch hỗ trợ các ngôn ngữ Pháp và tiếng Indonesia. Về cơ bản, tiện ích lịch này chỉ hiển thị ngày với điều hướng. Nếu bạn muốn tạo một lịch năng độ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

         

    

        

        

            ‹
            ›
        
        
        

Jump To: 
      
                 Jan
                 Feb
                 Mar
                 Apr
                 May
                 Jun
                 Jul
                 Aug
                 Sep
                 Oct
                 Nov
                 Dec
             
                    
        
    

1. Trước hết, hãy tạo cấu trúc HTML cho giao diện cơ bản của lịch như sau:

• Bạn có thể đặt HTML ở trên bất cứ nơi nào trên trang web của bạn 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 dữ liệu. Các ngôn ngữ có sẵn như sau:
• en cho tiếng Anh (mặc định)
• ID cho người Indonesia

fr cho tiếng Pháp

.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;
}

2. Sau đó, kiểu lịch sử dụng các kiểu CSS sau. Bạn có thể đặt các giá trị CSS tùy chỉnh để thay đổi giao diện của lịch theo chủ đề của bạn.

function generate_year_range(start, end) {
    var years = "";
    for (var year = start; year <= end; year++) {
        years += "" + year + "";
    }
    return years;
}

today = new Date();
currentMonth = today.getMonth();
currentYear = today.getFullYear();
selectYear = document.getElementById("year");
selectMonth = document.getElementById("month");


createYear = generate_year_range(1970, 2050);
/** or
 * createYear = generate_year_range( 1970, currentYear );
 */

document.getElementById("year").innerHTML = createYear;

var calendar = document.getElementById("calendar");
var lang = calendar.getAttribute('data-lang');

var months = "";
var days = "";

var monthDefault = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var dayDefault = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

if (lang == "en") {
    months = monthDefault;
    days = dayDefault;
} else if (lang == "id") {
    months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
    days = ["Ming", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
} else if (lang == "fr") {
    months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
    days = ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"];
} else {
    months = monthDefault;
    days = dayDefault;
}


var $dataHead = "