Create table year

Question

I have my table/grid: this . This have 365 divs, 1 per day, created with js:

$(document).ready(function() {
    for (var i = 0; i < daysInThisYear(); i++) {
        $('#año').append('<div class="dia" id="div' + i +'" /> ');
    }
})

This detects if 365 or 366 days:

function daysInThisYear() {
  return isLeapYear() ? 366 : 365;
}

function isLeapYear() {
     return currentYear % 400 === 0 || (currentYear % 100 !== 0 && currentYear % 4 === 0);
}

okay, i have my grid it's ok, but i want to put days and months, like this: this . If month have 31 days, creates 31 squares, and everything together, without separations, how can i do this? And put number of the day at left and letter of month at top, idk how to to this, thanks.

Welcome to StackOverflow! Have you tried arranging the months so far? StackOverflow isn't a free code-writing service, and expects you to try to solve your own problem first. For further information, please see [how to ask good questions](http://stackoverflow.com/help/how-to-ask), and take the [tour of the site](http://stackoverflow.com/tour). — coagmano, Jan 11 '18 at 23:01
Yes i tried some shapes but the result was not good, i will try more of course, but I wanted to know if someone knew how to do it and have it optimized, since I have no experience and would like to do my best, thanks. — Jaume Sastre, Jan 11 '18 at 23:06

Jose Rojas · Answer 1 · 2018-01-12T13:09:12.600

3

One strategy could be store number of days in a array and get the total days in each one of them.

It would be something like:

var totalDaysOfMonth = [31, isLeapYear() ? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

to make a grid as you want, you could append one div per month, taking the total days of the array, here a idea:

https://jsbin.com/joficawofi/edit?html,css,js,output

Here other way to get total days of each month: What is the best way to determine the number of days in a month with javascript?

edited Jan 12 '18 at 13:09

answered Jan 11 '18 at 22:26

Jose Rojas

3,490
3
26
40

2

Why not simply `var totalDaysOfMonth = [31, isLeapYear() ? 29: 28, 31, ...]`? – Rick Hitchcock Jan 11 '18 at 22:44
With your jsbin says "error" "@siqizowoyo.js:28:19 " – Jaume Sastre Jan 12 '18 at 08:00
@JaumeSastre I fixed it up – Jose Rojas Jan 12 '18 at 13:08
1

@RickHitchcock thanks for the recommendation, I updated my answer. – Jose Rojas Jan 12 '18 at 13:09
Okay, it works @JoseRojas but, how can i get same border weight? That is, dont get this: https://gyazo.com/60734185b2bd2d1784df2250b9cd018f, all borders same width, thx. – Jaume Sastre Jan 12 '18 at 14:29
@JaumeSastre Try putting margin: -1px at the class `.dia`, here some others strategies https://stackoverflow.com/questions/27228686/double-borders-div-should-merge-css – Jose Rojas Jan 12 '18 at 15:04

score 0 · Answer 2 · answered Jan 12 '18 at 17:01

This code will create the table like you want.

I use the Date object to detect leap year since the logic is already provided. By attempting to set the date to Feb 29 for a give year it will leave it as Feb 29 if it is a leap year or change it to March 1 for non-leap years.

function isLeapYear(year) {
  var resp = new Date(year,1,29).getDate()===29;;
  return resp;
}


var daysOfMonth = [31, isLeapYear((new Date().getFullYear())) ? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var monthLetters = 'JFMAMJJASOND'.split('');


var calendarEl = document.getElementById("calendar");
var dayEl, monthEl;
var monthEl = document.createElement('div');
monthEl.className = "calendar-month";
tempEl = document.createElement('div');
tempEl.className = "calendar-month__title";
monthEl.appendChild(tempEl);

for(let i = 0; i < 31; i++) {
  dayEl = document.createElement('div');
  dayEl.className = 'calendar-day calendar-day__number';
  dayEl.textContent = i;
  monthEl.appendChild(dayEl);
}

calendarEl.appendChild(monthEl);
daysOfMonth.forEach(
  function(days, month) {
    monthEl = document.createElement('div');
    monthEl.className = "calendar-month";
    monthEl.setAttribute('data-month', month+1);
    tempEl = document.createElement('div');
    tempEl.className = "calendar-month__title";
    tempEl.textContent = monthLetters[month];
    monthEl.appendChild(tempEl);
    
    for(let i = 0; i < days; i++) {
      dayEl = document.createElement('div');
      dayEl.className = 'calendar-day';
      dayEl.setAttribute('data-date', i+1);
      monthEl.appendChild(dayEl);
    }
    calendarEl.appendChild(monthEl);
  }
);

.calendar-month {
  display: inline-block;
  vertical-align: top;
  width: 20px;
}

.calendar-day {
  border: 1px solid black;
  border-top: none;
  box-sizing: border-box;
  height: 20px;
  width: 20px;
}

.calendar-month__title {
  border-bottom: 1px solid black;
  height: 20px;
  overflow: hidden;
  text-align: center;
  width: 20px;
}

.calendar-day__number {
  border-left-color: transparent;
  text-align: right;
  margin-right: 5px;
}

<div id="calendar"></div>

With a little extra work you could get the width of the borders to work correctly, but this gets you most of the way there.

Create table year

2 Answers2