Blog: Busiest Air Travel Days

_blog/2023-09-23/calendar.css

@@ -0,0 +1,144 @@
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+body{
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  justify-content: center;
+  min-height: 100vh;
+  background: #9B59B6;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.calendar-container {
+  display: flex;
+  white-space: nowrap;
+  min-width: 285px;
+
+  overflow-x: auto;
+  position: absolute; /* or absolute */
+  left: 0;
+  right: 0;
+}
+.calendar-container-below {
+  padding-top: 434px; /* Adjust this value to be at least the height of .container */
+}
+
+@media (max-width: 1200px) {
+  .calendar-container {
+    position: static;
+    display: block;
+    width: 100%;
+    max-width: 450px;
+    margin: 0 auto;
+  }
+  .calendar-container-below {
+    padding-top: 0px; /* Adjust this value based on the height of .container on smaller screens */
+  }
+}
+
+.wrapper{
+  flex-shrink: 0;
+  width: fit-content;
+  max-width: 450px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: inset 0 0 20px rgba(0,0,0,0.12);
+}
+.wrapper header{
+  display: flex;
+  align-items: center;
+  padding: 25px 30px 10px;
+  justify-content: space-between;
+}
+header .icons{
+  display: flex;
+}
+header .icons span{
+  height: 38px;
+  width: 38px;
+  margin: 0 1px;
+  cursor: pointer;
+  color: #878787;
+  text-align: center;
+  line-height: 38px;
+  font-size: 1.9rem;
+  user-select: none;
+  border-radius: 50%;
+}
+.icons span:last-child{
+  margin-right: -10px;
+}
+header .icons span:hover{
+  background: #f2f2f2;
+}
+header .current-date{
+  font-size: 1.45rem;
+  font-weight: 500;
+}
+.calendar{
+  padding: 20px;
+  margin-bottom: 20px;
+}
+.calendar ul{
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  text-align: center;
+}
+.calendar .weeks{
+  margin-bottom: 20px;
+}
+.calendar .days{
+  /* margin-bottom: 20px; */
+}
+.calendar li{
+  color: #333;
+  width: calc(100% / 7);
+  font-size: 1.07rem;
+}
+.calendar .weeks li{
+  font-weight: 500;
+  cursor: default;
+}
+.calendar .days li{
+  z-index: 1;
+  cursor: pointer;
+  position: relative;
+  /* margin-top: 30px; */
+  height: 50px;
+  padding: 5px;
+}
+.days li.inactive{
+  color: #aaa;
+}
+.days li.active{
+  color: #fff;
+}
+.days li::before{
+  position: absolute;
+  content: "";
+  left: 50%;
+  /* top: 50%; */
+  top: 25px;
+  height: 40px;
+  width: 40px;
+  z-index: -1;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.days li.active::before{
+  background: #9B59B6;
+}
+/* .days li:not(.active):hover::before{
+  background: #f2f2f2;
+} */

_blog/2023-09-23/calendar.js

@@ -0,0 +1,186 @@
+import { renderMegaCalendar } from './mega_calendar.js';
+import { update_calendar, fetchAndReadFile } from './traffic.js';
+
+const host = document.getElementById('shadowHost');
+const shadowRoot = host.attachShadow({ mode: 'open' });
+
+const template = document.getElementById('shadowTemplate').content.cloneNode(true);
+shadowRoot.appendChild(template);
+
+// const shadowRoot = document.getElementById("shadowHost").shadowRoot;
+
+console.log("shadow Root is ", shadowRoot);
+
+let daysTagAll = shadowRoot.querySelectorAll(".calendar-month .calendar .days"),
+  currentDateTagAll = shadowRoot.querySelectorAll(".calendar-month .current-date"),
+  prevNextIcon = shadowRoot.querySelectorAll(".icons span");
+
+// getting new date, current year and month
+let date = new Date(),
+  currYear = date.getFullYear(),
+  currMonth = date.getMonth();
+
+// storing full name of all months in array
+const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+function dateToId(date) {
+  return `_${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+}
+
+const renderCalendar_ = (year, daysTag, currentDateTag) => {
+  let firstDayofMonth = new Date(year, currMonth, 1).getDay(), // getting first day of month
+    lastDateofMonth = new Date(year, currMonth + 1, 0).getDate(), // getting last date of month
+    lastDayofMonth = new Date(year, currMonth, lastDateofMonth).getDay(), // getting last day of month
+    lastDateofLastMonth = new Date(year, currMonth, 0).getDate(); // getting last date of previous month
+  let liTag = "";
+
+  for (let i = firstDayofMonth; i > 0; i--) {
+    // creating li of previous month last days
+    const id = dateToId(
+      new Date(year, currMonth - 1, lastDateofLastMonth - i + 1)
+    );
+    liTag += `<li class="inactive" id="${id}" data-after="???">${
+      lastDateofLastMonth - i + 1
+    }</li>`;
+  }
+
+  for (let i = 1; i <= lastDateofMonth; i++) {
+    // creating li of all days of current month
+    // adding active class to li if the current day, month, and year matched
+    let isToday =
+      i === date.getDate() &&
+      currMonth === new Date().getMonth() &&
+      year === new Date().getFullYear()
+        ? "active"
+        : "";
+    const id = dateToId(new Date(year, currMonth, i));
+    liTag += `<li class="${isToday}" id="${id}" data-after="???">${i}</li>`;
+  }
+
+  for (let i = lastDayofMonth; i < 6; i++) {
+    // creating li of next month first days
+    const id = dateToId(new Date(year, currMonth + 1, i - lastDayofMonth + 1));
+    liTag += `<li class="inactive" id="${id}" data-after="???">${
+      i - lastDayofMonth + 1
+    }</li>`;
+  }
+
+  currentDateTag.innerText = `${months[currMonth]} ${year}`; // passing current mon and yr as currentDate text
+  daysTag.innerHTML = liTag;
+};
+const renderCalendar = () => {
+  for (let i = 0; i < daysTagAll.length; i++) {
+    renderCalendar_(currYear - i, daysTagAll[i], currentDateTagAll[i]);
+  }
+  update_calendar(); // See traffic.js
+};
+
+async function initialize() {
+  await fetchAndReadFile(); // Initialize calendar with tsv file
+  renderCalendar();
+  showAll();
+}
+document.addEventListener('DOMContentLoaded', () => {
+  initialize();
+});
+
+prevNextIcon.forEach((icon) => {
+  // getting prev and next icons
+  icon.addEventListener("click", () => {
+    // adding click event on both icons
+    // if clicked icon is previous icon then decrement current month by 1 else increment it by 1
+    switch (icon.id) {
+      case "prev":
+        currMonth--;
+        break;
+      case "next":
+        currMonth++;
+        break;
+      case "today":
+        currYear = date.getFullYear();
+        currMonth = date.getMonth();
+        break;
+    }
+
+    if (currMonth < 0 || currMonth > 11) {
+      // if current month is less than 0 or greater than 11
+      // creating a new date of current year & month and pass it as date value
+      date = new Date(currYear, currMonth, new Date().getDate());
+      currYear = date.getFullYear(); // updating current year with new date year
+      currMonth = date.getMonth(); // updating current month with new date month
+    } else {
+      date = new Date(); // pass the current date as date value
+    }
+
+    renderCalendar(); // calling renderCalendar function
+  });
+});
+
+function centerScroll() {
+  const root = document.getElementById("shadowHost").shadowRoot;
+  var scrollContainer = root.getElementById("calendars-container");
+  var scrollWidth = scrollContainer.scrollWidth;
+  var clientWidth = scrollContainer.clientWidth;
+
+  console.log("scrollwidth: ", scrollWidth, " clientWidth: ", clientWidth);
+
+  // Set the scroll position to the center
+  // scrollContainer.scrollLeft = (scrollWidth - clientWidth) / 2;
+  scrollContainer.scrollLeft = 300;
+}
+centerScroll();
+
+const MONTH_TO_KEEP = 1;
+function show1month1year() {
+  shadowRoot.querySelector(".mega-calendar-container").classList.add("hidden");
+  shadowRoot.querySelector(".mega-calendar-container-below").classList.add("hidden");
+  shadowRoot.querySelector(".calendar-container").classList.remove("hidden");
+  shadowRoot.querySelector(".calendar-container-below").classList.remove("hidden");
+
+  const all_months = shadowRoot.querySelectorAll(".calendar-month");
+  for (let i = 0; i < daysTagAll.length; i++) {
+    if (i == MONTH_TO_KEEP) continue;
+    all_months[i].style.display = "none";
+  }
+  all_months[MONTH_TO_KEEP].style.margin = "auto";
+}
+function show1monthAllYears() {
+  shadowRoot.querySelector(".mega-calendar-container").classList.add("hidden");
+  shadowRoot.querySelector(".mega-calendar-container-below").classList.add("hidden");
+  shadowRoot.querySelector(".calendar-container").classList.remove("hidden");
+  shadowRoot.querySelector(".calendar-container-below").classList.remove("hidden");
+
+  const all_months = shadowRoot.querySelectorAll(".calendar-month");
+  all_months[MONTH_TO_KEEP].style.margin = "0";
+  for (let i = 0; i < daysTagAll.length; i++) {
+    if (i == MONTH_TO_KEEP) continue;
+    all_months[i].style.display = "block";
+  }
+  centerScroll();
+}
+function showAll() {
+  shadowRoot.querySelector(".mega-calendar-container").classList.remove("hidden");
+  shadowRoot.querySelector(".mega-calendar-container-below").classList.remove("hidden");
+  shadowRoot.querySelector(".calendar-container").classList.add("hidden");
+  shadowRoot.querySelector(".calendar-container-below").classList.add("hidden");
+  renderMegaCalendar();
+}
+
+export { show1month1year, show1monthAllYears, showAll, renderCalendar };
+window.show1month1year = show1month1year;
+window.show1monthAllYears = show1monthAllYears;
+window.showAll = showAll;
+window.update_calendar = update_calendar;