Calendar

by Raul Bojalil

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.0.1/luxon.min.js"></script>
<div id="calendar"></div>

CSS

body {
   font-family: "Arial";
 }
 
 .calendar-headers {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
 }
 
 .calendar-days {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
 }

.calendar-title-container {
  text-align: center;
  margin-bottom: 9px;
}

.calendar-title {
  min-width: 250px;
  display: inline-block;
  font-size: 25px;
}

.calendar-header {
  flex: 1 0 120px;
  border: 1px solid #ddd;
  text-align: center;
}

.calendar-day {
  flex: 1 0 120px;
  border: 1px solid #ddd;
  height: 100px;
  text-align: right;
  padding: 4px;
}

.calendar-day-disabled {
  opacity: 0.3;
}

.calendar-event {
  color: white;
  background-color: #3788d8;
  padding: 3px;
  border-radius: 3px;
  margin: 2px;
  text-align: left;
  
}

JavaScript

function renderCalendar(element, year, month, events) {
	  
  element.innerHTML = '';
    
  var renderDay = function(date, events) {
  	const dayContainer = document.createElement("div");
    dayContainer.classList.add('calendar-day');
    
    if (date.month != month) {
    	dayContainer.classList.add('calendar-day-disabled');
    }
    
    const dayNumberContainer = document.createElement("div");
    dayNumberContainer.innerHTML = date.day;
    dayContainer.append(dayNumberContainer);
    
    for (var i=0; i < events.length; i++) {
    
    	if (events[i]._date.year === date.year 
      	&& events[i]._date.month === date.month
        && events[i]._date.day === date.day) 
    	{
      	const eventContainer = document.createElement("div");
        eventContainer.innerHTML = events[i]._date.toFormat("HH:mm") + " " + events[i].name;
        eventContainer.classList.add('calendar-event');
        dayContainer.append(eventContainer);
      }
    }
    
    return dayContainer;
  }
  
  events = events.map((e) => ({ ...e, _date: luxon.DateTime.fromISO(e.date) }));
  
  const titleContainer = document.createElement("div");
  titleContainer.classList.add("calendar-title-container");
  
  const headersContainer = document.createElement("div");
  headersContainer.classList.add("calendar-headers");
  const daysContainers = [];
  
  for(let i=0; i < 6; i++) {
    daysContainers.push(document.createElement("div"));
    daysContainers[i].classList.add("calendar-days");
  }
  
  //const days = luxon.Info.weekdays('short');
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  
  for(let i=0; i < days.length; i++) {
  	const day = days[i];
    const dayContainer = document.createElement("div");
    dayContainer.classList.add("calendar-header");
    dayContainer.innerHTML = day;
    headersContainer.append(dayContainer);
  }
  
  var iso = `${year}-${month.toString().padStart(2, '0')}-01`;
	var date = luxon.DateTime.fromISO(iso);
  
  const prevButton =...