How to automatically generate dynamic moment.js?

Question

The idea would be to make one page a monthly table and each line would have week numbers and edit selection. For this I need moment.js and javascript to generate tables. Define the exact year and generate one table per month, week numbers, and the first day of the week.

I appreciate if you can help me with this.

Here we go jsfiddle and example.

• https://jsfiddle.net/n1039cme/1/

Example:

 .table-bordered { border: 1px solid #dee2e6; } .table-bordered thead td, .table-bordered thead th { border-bottom-width: 2px; } .table thead th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; } .table-bordered td, .table-bordered th { border: 1px solid #dee2e6; } table.table thead th { border-top: none; } table.table td, table.table th { padding-top: 1.1rem; padding-bottom: 1rem; } .table td, .table th { padding: .75rem; vertical-align: top; border-top: 1px solid #dee2e6; } table td { font-size: .9rem; font-weight: 300; }

 Generate 2019 (target) year months, week number and first day automatically with moment.js. I'm gonna use php to make tables dynamically.</p> <table id="tablePreview" class="table table-hover table-bordered"> <!--Table head--> <thead> <tr> <th>January</th> <th>Week first day</th> <th>Last Name</th> <th>Username</th> <th>Edit</th> </tr> </thead> <!--Table head--> <!--Table body--> <tbody> <tr> <th scope="row">Week number 1</th> <td>2019-01-01</td> <td>Otto</td> <td>@mdo</td> <td><a href="/edit-link.php">Edit</a></td> </tr> <tr> <th scope="row">Week number 2</th> <td>2019-01-01</td> <td>Thornton</td> <td>-</td> <td><a href="/edit-link.php">Edit</a></td> </tr> <tr> <th scope="row">Week number 3</th> <td>2019-01-01</td> <td>the Bird</td> <td>@twitter</td> <td><a href="/edit-link.php">Edit</a></td> </tr> </tbody> </table> <br><br> <table id="tablePreview" class="table table-hover table-bordered"> <!--Table head--> <thead> <tr> <th>February</th> <th>Week first day</th> <th>Last Name</th> <th>Username</th> <th>Edit</th> </tr> </thead> <!--Table head--> <!--Table body--> <tbody> <tr> <th scope="row">Week number 5</th> <td>2019-02-01</td> <td>Otto</td> <td>@mdo</td> <td><a href="/edit-link.php">Edit</a></td> </tr> <tr> <th scope="row">Week number 6</th> <td>2019-02-01</td> <td>Thornton</td> <td>-</td> <td><a href="/edit-link.php">Edit</a></td> </tr> <tr> <th scope="row">Week number 7</th> <td>2019-02-01</td> <td>the Bird</td> <td>@twitter</td> <td><a href="/edit-link.php">Edit</a></td> </tr> </tbody> </table> <p> etc... </p> </p>

With moment.js this is all I have done..

var months = [];

for( var i = 0; i < 12; i++ ){
months.push( new Date(0,i).toLocaleString({},{month:'long'}) ); 
}

console.log(months);

Answer 1

I've quickly scribbled something together for you. This should be enough to get you going:

    var thisYear = 2018;
    var start = new Date("1/1/" + thisYear);
    var defaultStart = moment(start.valueOf());
    var weekNumber = 1;
    this.months = [];
    for (var i = 0; i < 12; i++) {
        var weeks = [];

        var currentMonth = defaultStart.month();

        var monthLimit = i + 1;

        if (defaultStart.month() == 11) {
            monthLimit = 0;
        }

        while (defaultStart.month() != monthLimit) {
            weeks.push(
                {
                    weekNumber: weekNumber,
                    firstDayOfWeek: defaultStart.format("MMM Do YYYY")
                }
            )
            weekNumber++;

            defaultStart.add(7, 'days')
        }
        this.months.push(
            {
                weeks: weeks,
                month: moment().month(currentMonth).format("MMMM")
            });
    }

This will create an array (the months array) for you of 12 objects; this object will contain the name of the month and an array of week objects, which consists of the week number and the first date of the week.

Take a look at this SlackBlitz example, where the table is displayed using the data generated in the code above using the KnockOutJS library.