Php - Show seven day calendar

SurfDiamer
February 11, 2024
188 views
1 vote
2 Answers

I want a calendar with only 7 days visible.
The days ['Ma', 'Di', 'Woe', 'Do', 'Vrij', 'Za', 'Zo']
must stay in the same position. Only the numbers may change.

My JS code doesn’t work.

<div class="calendar">
   <p class="month" id="month"></p>
     <div class="d-flex justify-content-around" id="daysContainer">
                        
     </div>
</div>

function generateWeekDays() {
    var daysOfWeek    = ['Ma', 'Di', 'Woe', 'Do', 'Vrij', 'Za', 'Zo']; 
    var today         = new Date();
    var currentDay    = today.getDay();
    var daysContainer = document.getElementById('daysContainer');
    
    daysContainer.innerHTML = '';
    
    for (var i = 0; i < 5; i++) {
        var dayIndex   = (currentDay + i) % 7;
        var dayName    = daysOfWeek[dayIndex];
        var dayNumber  = today.getDate() + i;
        var dayElement = document.createElement('div'); 

        var classes = 'flex-direction-row ' + dayName.toLowerCase(); 
        if (i === 0) classes += ' active'; 
        dayElement.className = classes;

        dayElement.innerHTML = '<div class="number">' + dayNumber + '</div>' 
                             + '<div class="day">' + dayName + '</div>';

        daysContainer.appendChild(dayElement);
    }

    var monthElement         = document.getElementById('month');
    var monthNames           = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'];
    var currentMonth         = today.getMonth();
    monthElement.textContent = monthNames[currentMonth];
}

window.onload = generateWeekDays;

If I use console.log then I see nothing in my console..
I don’t know what I doing wrong??

Answers

You’re looping only 5 times instead of 7, which means you’re not generating all days of the week.

Try this

function generateWeekDays() {
const daysOfWeek = ['Zo', 'Ma', 'Di', 'Woe', 'Do', 'Vrij', 'Za']; // Start with 'Zo' for Sunday
const today = new Date();
const daysContainer = document.getElementById('daysContainer');

daysContainer.innerHTML = '';

// Determine the current day of the week (0-6, where 0 is Sunday)
const currentDayOfWeek = today.getDay();

for (let i = 0; i < 7; i++) {
    // Calculate the date for each day of the week
    let dayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - currentDayOfWeek + i);
    const dayName = daysOfWeek[dayDate.getDay()]; // Get the day name based on the day of the week
    const dayNumber = dayDate.getDate(); // Get the date number
    const dayElement = document.createElement('div');
    dayElement.className = 'day-item';
    dayElement.innerHTML = `<div class="number">${dayNumber}</div><div class="day">${dayName}</div>`;
    daysContainer.appendChild(dayElement);
}

// Set the month name
const monthElement = document.getElementById('month');
const monthNames = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'];
monthElement.textContent = monthNames[today.getMonth()];
}

window.onload = generateWeekDays;

<div class="calendar">
  <p class="month" id="month"></p>
  <div class="d-flex justify-content-around" id="daysContainer"></div>
</div>

I hope this helps

Something like that ?

const
    daysOfWeek    = 'Ma-Di-Woe-Do-Vrij-Za-Zo'.split('-')
  , monthNames    = ('Januari-Februari-Maart-April-Mei-Juni-Juli-Augustus'
                    +'-September-Oktober-November-December').split('-')
  , daysContainer = document.querySelector('#calendar > div')
  , monthElement  = document.querySelector('#calendar > p')
    ;
generateWeekDays();

function generateWeekDays()
  {
  let dateOn  = new Date() 
    , c_Day   = dateOn.getDate()
    , cWkDay  = dateOn.getDay()
    , c_Month = dateOn.getMonth()
    , c_Year  = dateOn.getFullYear()
    ;
  monthElement.textContent = `${monthNames[c_Month]} - ${c_Year}`;
  
  // set date on first week day 'Ma'
  dateOn.setDate(dateOn.getDate() - ((cWkDay+6 )% 7) );
 
  // clear daysContainer
  while( daysContainer.firstChild ) 
    { daysContainer.removeChild(daysContainer.lastChild); }

  for( let dayName of daysOfWeek )
    {
    let dayNum = ((dateOn.getMonth()) !== c_Month) ? '-' : dateOn.getDate()
      , dayCls = (dayNum ===  c_Day) ? ' class="active"': ''
      ;
    dateOn.setDate(dateOn.getDate() +1 ); // next day

    fragHTML = new Range().createContextualFragment(` 
    <div>
      <div>${dayName}</div>
      <div${dayCls}>${dayNum}</div>
    </div>`);
      
    daysContainer.append(fragHTML);
    }
  }

#calendar  {
  max-width: 24em;
  }
#calendar > p {
  font-weight    : bold;
  letter-spacing : .2ic;
  padding-left   : 1em;
  }
#calendar > div {
  display         : flex;
  flex-direction  : row;
  justify-content : space-around;
  }
#calendar > div > div {
  background-color : lightblue;
  text-align       : center;
  width            : 3rem;
  } 
#calendar > div > div > div {
  padding    : .4em 0 .2em 0;
  } 
#calendar > div > div > div:first-of-type {
  font-style    : oblique;
  border-bottom : 1px black solid;
  }
.active {
  background-color: hotpink;
  }

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

Please signup or login to give your own answer.

Click here to cancel reply.

Php – Show seven day calendar

Answers