How to build basic and dynamic calendar with NodeJS
Tags: node, javascript
Published: 2020-07-03 14:15:58

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