<div class="wrap">
<div id="calendar"></div>
<div id="calevent">
</div>
</div>
<script>
_("#calendar").innerHTML = calendar();
let c = _("#calevent");
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;
Calendar.setDate(1);
Calendar.setMonth(month);
function tblpart(t) {
return document.createElement(t);
}
console.log(tblpart());
html = "<table>";
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>";
html += '<tbody class="days_cal">';
html += "</tr>";
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) {
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);
}
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>