How to create a calendar with JavaScript

Only armed with the programming language HTML5 and JavaScript can we easily display the calendar on the website. Not only that, we can add month and year skip functionality. How to do … Let’s just open your computer and follow the simple steps below.

1. Open the XAMPP control panel and activate Apache.

2. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

        Membuat Kalender dengan JavaScript            

Sun Mon Tue Wed Thu Fri Sat

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named Calendar – save the code above with the name index.html.

3. To see the results of the script code above, you can open your browser and type http: // localhost / calendar.

4. The above picture only shows the day with no date. Enter the following JavaScript code to display the date on the calendar.

let today = new Date();let currentMonth = today.getMonth();let currentYear = today.getFullYear();let selectYear = document.getElementById("year");let selectMonth = document.getElementById("month");let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];let monthAndYear = document.getElementById("monthAndYear");showCalendar(currentMonth, currentYear);function next() {    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;    currentMonth = (currentMonth + 1) % 12;    showCalendar(currentMonth, currentYear);}function previous() {    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;    showCalendar(currentMonth, currentYear);}function jump() {    currentYear = parseInt(selectYear.value);    currentMonth = parseInt(selectMonth.value);    showCalendar(currentMonth, currentYear);}function showCalendar(month, year) {    let firstDay = (new Date(year, month)).getDay();    let daysInMonth = 32 - new Date(year, month, 32).getDate();    let tbl = document.getElementById("calendar-body"); // body of the calendar    // clearing all previous cells    tbl.innerHTML = "";    // filing data about month and in the page via DOM.    monthAndYear.innerHTML = months[month] + " " + year;    selectYear.value = year;    selectMonth.value = month;    // creating all cells    let date = 1;    for (let i = 0; i < 6; i++) {        // creates a table row        let row = document.createElement("tr");        //creating individual cells, filing them up with data.        for (let j = 0; j < 7; j++) {            if (i === 0 && j < firstDay) {                let cell = document.createElement("td");                let cellText = document.createTextNode("");                cell.appendChild(cellText);                row.appendChild(cell);            }            else if (date > daysInMonth) {                break;            }            else {                let cell = document.createElement("td");                let cellText = document.createTextNode(date);                if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {                    cell.classList.add("bg-info");                } // color today's date                cell.appendChild(cellText);                row.appendChild(cell);                date++;            }        }        tbl.appendChild(row); // appending each row into calendar body.    }}

Save the JavaScript code in the xampplite folder – htdocs – create a new folder named calendar – save the CSS3 code with the name script.js.

5. Reload the URL: http: // localhost / calendar and see the results.

If you click the previous button, the calendar will show the previous month.

When you click the Next button, the calendar will show the next month.

Select the month and year to jump.

6. Done.

Hence the explanation of the tutorial ‘How to create a calendar with JavaScript’. Much luck.






Leave a Reply

Your email address will not be published.