Breaking News: Grepper is joining You.com. Read the official announcement!

how to make a calendar using html and css and javascript

Ugliest Unicorn answered on May 12, 2022 Popularity 10/10 Helpfulness 3/10

answer how to make a calendar using html and css and javascript

related html css calendar

how to make a calendar using html and css and javascript

Comment

<div class="wrap">

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

  </div>
</div>
<script>
  _("#calendar").innerHTML = calendar();
let c = _("#calevent");
// short queySelector
function _(elm) {
  return document.querySelector(elm);
}
function start() {
  let days = [];
  return days;
}

function calendar() {
  let day_of_week = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"),
    month_of_year = new Array(
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ),
    Calendar = new Date(),
    year = Calendar.getYear(),
    month = Calendar.getMonth(),
    today = Calendar.getDate(),
    weekday = Calendar.getDay(),
    html = "";
  days = day_of_week;
  // start in 1 and this month
  Calendar.setDate(1);
  Calendar.setMonth(month);
  function tblpart(t) {
    return document.createElement(t);
  }
  console.log(tblpart());
  // template calendar
  html = "<table>";
  // head
  html += "<thead>";
  html += `<tr class="head_cal"><th colspan="7"> 
    ${month_of_year[month]} 
    </th></tr>`;
  html += `<tr class="subhead_cal"><th colspan="7">
    ${Calendar.getFullYear()} 
    </th></tr>`;
  html += '<tr class="week_cal">';
  for (index = 0; index < 7; index++) {
    if (weekday == index) {
      days.push(day_of_week[index]);
      html += '<th class="week_event">' + day_of_week[index] + "</th>";
    } else {
      html += "<th>" + day_of_week[index] + "</th>";
    }
  }
  html += "</tr>";
  html += "</thead>";

  // body
  html += '<tbody class="days_cal">';
  html += "</tr>";
  // white zone
  for (index = 0; index < Calendar.getDay(); index++) {
    html += '<td class="white_cal"> </td>';
  }

  for (index = 0; index < 31; index++) {
    if (Calendar.getDate() > index) {
      week_day = Calendar.getDay();

      if (week_day === 0) {
        html += "</tr>";
      }
      if (week_day !== 7) {
        // this day
        let day = Calendar.getDate();
        let info =
          Calendar.getMonth() + 1 + "/" + day + "/" + Calendar.getFullYear();

        if (today === Calendar.getDate()) {
          html +=
            '<td><span class="span today_cal" href="#" data-id="' +
            info +
            '" onclick="showInfo(\'' +
            info +
            "')\">" +
            day +
            "</span></td>";
        } else {
          html +=
            '<td><span class="span" href="#" data-day="' +
            day_of_week[week_day] +
            '" data-id="' +
            info +
            '" onclick="showInfo(\'' +
            info +
            "')\">" +
            day +
            "</span></td>";
        }
      }
      if (week_day == 7) {
        html += "</tr>";
      }
    }
    Calendar.setDate(Calendar.getDate() + 1);
  } // end for loop
  return html;
}
function close(elm) {
  elm = event.target;
  console.log("elm", elm);
  c.classList.remove("cals");
  c.innerHTML = "";
  return c;
}
function showInfo() {
  console.log("hello");
  c.classList.add("cals");
  let Calendar = new Date();
  let cl = days[Calendar.getDay()];
  let reult = (c.innerHTML = " ");
  let data = event.target.dataset.id;
  let dy = event.target.dataset.day;
  let span = `<span>${dy}</span><div id="xx"> <h1>Days Events</h1><p><h3>On ${dy} <span>${data}</span></h3>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem placeat modi similique numquam odio, nemo eum ad, ducimus consectetur aperiam laborum, sint possimus totam? Perferendis magni facere nihil? Sed, possimus. Laborum odit ratione doloribus modi. Consequatur laboriosam libero magnam amet, aspernatur non labore itaque sint nam doloribus similique molestias veritatis unde repellendus repudiandae at repellat quam quos. Recusandae esse illo veniam rem asperiores, praesentium perferendis quod perspiciatis aut. Omnis voluptatibus dolor magni ullam i 
  </p> </div><br/>
  `;
  console.log(_("th"));
  c.innerHTML += span;
  c.addEventListener("click", close);
  return c;
}

</script>

Popularity 10/10 Helpfulness 3/10 Language html

Source: Grepper

Tags: calendar css html javascript using

Link to this answer
Share Copy Link

Contributed on May 12 2022

Ugliest Unicorn

0 Answers Avg Quality 2/10

Closely Related Answers

html css calendar

Comment

//use divs and css styling to position them, eg:
//NOTE bootstrap is a better way to do this so I will update this example soon
<style>
	.month1{
      margin:10px;
    }
    
    .month2{
     margin:10px;
     transform: translate(50px; 0px); //translate moves an element by x and y directions
     								  //eg: transform: translate(x, y);
    }
</style>

<div class="month1">
	<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
  <tr>
    <td>Cell 7</td>
    <td>Cell 8</td>
    <td>Cell 9</td>
  </tr>
</table>

</div>

<div class="month2">
	<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
  <tr>
    <td>Cell 7</td>
    <td>Cell 8</td>
    <td>Cell 9</td>
  </tr>
</table>

</div>

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: calendar calenda

Link to this answer
Share Copy Link

Contributed on Aug 04 2022

Wiley Wombat

0 Answers Avg Quality 2/10

how to make a calendar using html and css and javascript

Contents

More Related Answers

how to make a calendar using html and css and javascript

Closely Related Answers

html css calendar

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.