Hướng dẫn to display the calendar using javascript code by getting the year from the user - để hiển thị lịch bằng mã javascript bằng cách lấy năm từ người dùng

Tổng quan

Trong hướng dẫn này, tôi sẽ trình bày một lịch lên một trang web với một vài dòng JavaScript. Lịch sẽ bao gồm các thả xuống trong các tháng và năm chỉ sử dụng JavaScript cũ đơn giản. Quá trình sẽ như sau:

• Kết xuất các tháng vào một thả xuống
• Kết xuất những năm vào một thả xuống
• Kết hợp các ngày cho sự kết hợp tháng/năm hiện được lựa chọn
• Vua lại lịch khi các tháng/năm được thay đổi

Thay đổi tháng và/hoặc năm sẽ vẽ lại lịch để phù hợp với ngày chính xác cho tháng và năm đã cho.

Nếu bạn là người mới bắt đầu với JavaScript, hoặc chỉ cần hiểu biết thêm, tôi đánh giá cao bí mật của Ninja JavaScript mà bạn có thể mua trên Amazon tại đây. Đó là một bài đọc vững chắc và cuốn sách đưa ra một cuộc đi sâu rất sâu sắc về nhiều khía cạnh tinh tế của JavaScript cho những người mới đối với ngôn ngữ.

Lịch kết xuất cuối cùng sẽ trông giống như sau.

Thử nghiệm

MẶT TRỜI

THỨ HAI

TUE

THỨ TƯ

Thur

Thứ Sáu

ĐÃ NGỒI

HTML

Lịch bao gồm cha mẹ & nbsp; div & nbsp; với 3 thành phần chính bên trong nó. 2 thành phần đầu tiên là thả xuống trong các tháng và một thành phần khác trong một loạt các năm nhất định.div with 3 main components inside of it. The first 2 components being the dropdowns for the months and another for a given range of years.

Và bởi vì những ngày trong tuần không có khả năng thay đổi bất cứ lúc nào sớm, tôi đã đi trước và tạo ra các tiêu đề Ngày Lịch theo cách thủ công. Khi tải trang, tập lệnh sẽ lấy vào tháng và năm của người dùng hiện tại từ trình duyệt và sẽ vẽ một lịch dựa trên ngày/giờ hiện tại.

HTML

    

        
        

    

    

        
        

    

    


    

        

            
SUN
            
MON
            
TUE
            
WED
            
THUR
            
FRI
            
SAT

            

        

        

        
    

Lịch bao gồm cha mẹ & nbsp; div & nbsp; với 3 thành phần chính bên trong nó. 2 thành phần đầu tiên là thả xuống trong các tháng và một thành phần khác trong một loạt các năm nhất định.

Và bởi vì những ngày trong tuần không có khả năng thay đổi bất cứ lúc nào sớm, tôi đã đi trước và tạo ra các tiêu đề Ngày Lịch theo cách thủ công. Khi tải trang, tập lệnh sẽ lấy vào tháng và năm của người dùng hiện tại từ trình duyệt và sẽ vẽ một lịch dựa trên ngày/giờ hiện tại.div with the id of "months".

Tạo ra các tháng

May mắn cho chúng tôi, chỉ có 12 tháng trong năm và chúng tôi có thể lưu trữ chúng như một loạt các chuỗi đơn giản. Mảng này sẽ được sử dụng để tạo ra sự thả xuống trong & nbsp; div & nbsp; với ID của "tháng".loadCalendarDays() function being called when we select a new month. This function will redraw the calendar whenever a new month is selected to reflect the new month selection.

Chạy chức năng đó, kết quả phải như sau:

Ghi chú của hàm LoadCalendardays () được gọi khi chúng tôi chọn một tháng mới. Hàm này sẽ vẽ lại lịch bất cứ khi nào một tháng mới được chọn để phản ánh lựa chọn tháng mới.

    function loadYears()
    {
        // whichever date range makes the most sense
        var startYear = 1900;
        var endYear = 2022;

        for(var i = startYear; i <= endYear; i++)
        {
            var doc = document.createElement("div");
            doc.innerHTML = i;
            doc.classList.add("dropdown-item");

            doc.onclick = (function(){
                var selectedYear = i;
                return function(){
                    year = selectedYear;
                    document.getElementById("curYear").innerHTML = year;
                    loadCalendarDays();
                    return year;
                }
            })();

            document.getElementById("years").appendChild(doc);
        }
    }

Tạo ra những năm

Chúng ta có thể theo một quy trình tương tự để kết xuất các năm thả xuống.loadCalendarDays() function will be called in order to re-render the calendar days.

Lưu ý rằng tôi đã bắt đầu các năm thả xuống vào năm 1900 và kết thúc nó vào năm 2022. Tất nhiên bạn có thể cập nhật các biến đó để phù hợp với nhu cầu của riêng bạn.

Quá trình về cơ bản là giống như với các tháng kết xuất. Nếu bất kỳ năm nào được chọn, hàm LoadCalendardays () sẽ được gọi để hiển thị lại các ngày theo lịch.div> for each one of the days calculated.

Tạo ra những ngày

Bây giờ chúng ta là trung tâm của lịch. Kết xuất ngày có phần giống với các chức năng thế hệ tháng và năm trước. Về cơ bản, chúng tôi sẽ tính toán số ngày trong một khoảng thời gian năm/tháng được chỉ định và sau đó tạo một cho mỗi ngày được tính toán.: I created a helper function called daysInMonth() that will return the number of days in a month/year period selected. We'll essentially loop through these days and create a 'day' element onto our calendar for each one found.

Cũng lưu ý rằng chức năng này được gọi bất cứ khi nào lịch yêu cầu vẽ lại, chẳng hạn như khi chúng tôi chọn một tháng mới hoặc một năm mới từ một trong hai lần thả xuống đó.: The JavaScript Date object provides us with the getDay() method which will return the day of the week for any given date. In our case, we want to know when the very first day of the month will lie on. And we'll ignore the previous days leaving up to that by creating empty 'day' elements with no particular meaning.

    function daysInMonth(month, year)
    {
        let d = new Date(year, month+1, 0);
        return d.getDate();
    }

    function loadCalendarDays()
    {
        document.getElementById("calendarDays").innerHTML = "";

        var tmpDate = new Date(year, month, 0);
        var num = daysInMonth(month, year);
        var dayofweek = tmpDate.getDay();       // find where to start calendar day of week

daysinmonth (): Tôi đã tạo một hàm trợ giúp gọi là & nbsp; daysinmonth () sẽ trả về số ngày trong khoảng thời gian một tháng/năm được chọn. Về cơ bản, chúng ta sẽ lặp qua những ngày này và tạo ra một yếu tố 'ngày' trên lịch của chúng ta cho mỗi người được tìm thấy.

        // create day prefixes
        for(var i = 0; i <= dayofweek; i++)
        {
            var d = document.createElement("div");
            d.classList.add("day");
            d.classList.add("blank");
            document.getElementById("calendarDays").appendChild(d);
        }

GetDay (): Đối tượng Ngày JavaScript cung cấp cho chúng tôi phương thức GetDay () sẽ trả về ngày trong tuần cho bất kỳ ngày nào. Trong trường hợp của chúng tôi, chúng tôi muốn biết khi nào ngày đầu tiên của tháng sẽ nằm. Và chúng tôi sẽ bỏ qua những ngày trước để lại cho đến đó bằng cách tạo các yếu tố 'ngày' trống mà không có ý nghĩa cụ thể.

        // render the rest of the days
        for(var i = 0; i < num; i++)
        {
            var tmp = i + 1;
            var d = document.createElement("div");
            d.id = "calendarday_" + i;
            d.className = "day";
            d.innerHTML = tmp;
            document.getElementById("calendarDays").appendChild(d);
        }

        var clear = document.createElement("div");
        clear.className = "clear";
        document.getElementById("calendarDays").appendChild(clear);
    }

Ở đây tôi đang dọn sạch "vải", như đã từng, và tính toán tổng số ngày trong tháng và ngày trong tuần mà chúng tôi sẽ bắt đầu tháng.

Chúng tôi sẽ muốn bỏ qua bất kỳ ngày nào dẫn đến ngày đầu tiên của lịch. Vòng lặp trên về cơ bản sẽ thêm các yếu tố ngày trống vào lịch. Và chức năng sau đây sẽ hiển thị các ngày theo lịch thực tế trên thùng chứa Div chính.

Trong Phần 2: Part 2 can be found right over here.

Tại thời điểm này, bạn nên có một lịch để hiển thị có thể hiển thị ngày cho bất kỳ kết hợp tháng và năm nào. Trong Phần 2, tôi sẽ xem qua các lựa chọn ngày một lần, lựa chọn phạm vi ngày và các sự kiện tùy chỉnh cho mỗi ngày. Trong thời gian chờ đợi, hãy thoải mái tải xuống các tệp tài nguyên bên dưới và cập nhật, sửa đổi, cải thiện và thưởng thức mã.

Làm thế nào để bạn mã hóa một lịch trong JavaScript?