How to build basic and dynamic calendar with NodeJS

In this article, I will show you how to write a dynamic calendar from scratch with node-js & ejs. So let's get started.

First we want to install the next dependencies, in terminal type

npm install --save express ejs

Next, we want to create an app.js file and start the server in it

const express = require("express");
const app = express();
const port = 3000;


app.listen(port,()=>{
    console.log("app is listening on port", port);
});

Now we want to create a separate configuration file for our calendar. create a new file and call it "calendar-config.js",
and in there we can write a function that would calculate our calendar for a specific year for any time we want to fetch it.

this function will generate 3d Array and calc the values for
specific one year

function calcTable(year) {

generate new 3d Array for the months days and year.

    let arr = new Array(12);
    for (let x = 0; x < arr.length; x++) {
        arr[x] = new Array(6);

    }

    for (let x = 0; x < arr.length; x++) {
        for (let y = 0; y < arr[x].length; y++) {
            arr[x][y] = new Array(7);
        }
    }

    for (let month = 0; month < arr.length; month++) {

calc which day in a week does a specific month start

        let startDayInWeek = new Date(year, month, 0).getDay() + 1;

calc the month-long

        let monthLong = new Date(year, month + 1,0).getDate() + 1;

        let beforCount = 0;

the counter represent any month that starts at day one

        let counter = 1;

this will figure which day in the week to start counting days

        let startCount = false;

        for (let x = 0; x < arr[month].length; x++) {
            for (let y = 0; y < arr[month][x].length; y++) {



                if (beforCount == startDayInWeek) {
                    startCount = true;
                } else {
                    beforCount++;
                }


                if (startCount == true) {

                    arr[month][x][y] = counter;
                    counter++;

                } else {
                    arr[month][x][y] = "";
                }

                if (counter > monthLong) {
                    arr[month][x][y] = "";

                }




            }

        }
    }

    return arr;
}

module.exports = calcTable;

After we finished to configure our calendar function, we can now
go back to our server and set our server to actually return the calendar to the web page.

here we set our node app view-engine to ejs and notice that I already created a folder called "views" and I stored there my index.ejs file

app.set("view-engine", "ejs");
const path = require('path');
__dirname = path.resolve();
app.use(express.static((path.join(__dirname, 'views'))));

Now lets create a GET method to actually return our calendar to the client

app.get("/",(req,res)=>{
    const year = req.query.year || 2020;
    const months = ["January", "February", "March", "April", "May", "June", "July",
    "August", "September", "October", "November", "December"];

    res.render("index.ejs",{calendar: calendar(year),months,year});
});  

you can see that we set the "year" value to 2020 by default.
every time the user requests some year, The calendar config function will calculate the new values and return to the web page.

The body of the index.ejs looks something like this:

    <header>
        <h1>welcome to my calendar</h1>

        <form action="/" method="get">
            <input type="text" placeholder="search year" name="year">
            <button type="submit">search</button>
        </form>

        <h2>year <%= year %></h2>
    </header>


    <div class="calendar-container">
        <% for(let month = 0;month < calendar.length;month++) { %>

        <div class="month-container" id="<%= months[month] %>">
            <h3 style="text-align: center;"> <%= months[month] %> </h3>


            <div class="day-of-week">
                <span>Sun</span><span>Mon</span><span>Tue</span><span>
                    Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
            </div>
            <% for(let x = 0;x < calendar[month].length;x++) { %>
            <div class="days">
                <% for(let y = 0;y < calendar[month][x].length;y++) { %>

                <div class="date">
                    <div id="<%=calendar[month][x][y] %>">
                        <%= calendar[month][x][y] %>
                    </div>
                </div>

                <% } %>
            </div>
            <% } %>
        </div>

        <% } %>
    </div>

if you are familiar with ejs you probably know that in this template we are looping the calendar Array and presenting the values to the client. There is so many things you can do with this kind of code but my purpose is to give you the basics so you can build your own amazing calendar app.

The link to my full example in gitHub: Link https://github.com/536uriel/nodejs-calendar.git