i was trying to figure out how to integrate your calendar widget more simply to meet my tinybits needs, as i personally do not intend to add notes or dates to the calendar. I ran the code for the widget through CoPilot and ended up with this widget which works for my needs, with exception to the current day highlighter.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Calendar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.calendar-container {
background: #fff;
width: 320px;
border-radius: 10px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
padding: 20px;
margin: 0 auto; /* Centers the calendar */
}
.calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.calendar-navigation {
display: flex;
}
.calendar-navigation span {
height: 30px;
width: 30px;
margin: 0 5px;
cursor: pointer;
text-align: center;
line-height: 30px;
border-radius: 50%;
user-select: none;
color: #aeabab;
font-size: 1.5rem;
}
.calendar-navigation span:hover {
background: #f2f2f2;
}
.calendar-current-date {
font-weight: 500;
font-size: 1.25rem;
}
.calendar-body {
margin-top: 20px;
}
.calendar-weekdays, .calendar-dates {
list-style: none;
display: flex;
flex-wrap: wrap;
text-align: center;
}
.calendar-weekdays li, .calendar-dates li {
width: calc(100% / 7);
font-size: 1rem;
color: #414141;
margin-bottom: 10px;
}
.calendar-dates li {
cursor: pointer;
position: relative;
}
.calendar-dates li.inactive {
color: #aaa;
}
.calendar-dates li.active {
color: #fff;
}
.calendar-dates li::before {
position: absolute;
content: "";
z-index: -1;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.calendar-dates li.active::before {
background: #6332c5;
}
.calendar-dates li:not(.active):hover::before {
background: #e4e1e1;
}
</style>
</head>
<body>
<div class="calendar-container">
<header class="calendar-header">
<p class="calendar-current-date"></p>
<div class="calendar-navigation">
<span id="calendar-prev" class="material-symbols-rounded"><</span>
<span id="calendar-next" class="material-symbols-rounded">></span>
</div>
</header>
<div class="calendar-body">
<ul class="calendar-weekdays">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="calendar-dates"></ul>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
const day = document.querySelector(".calendar-dates");
const currdate = document.querySelector(".calendar-current-date");
const prenexIcons = document.querySelectorAll(".calendar-navigation span");
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const manipulate = () => {
let dayone = new Date(year, month, 1).getDay();
let lastdate = new Date(year, month + 1, 0).getDate();
let dayend = new Date(year, month, lastdate).getDay();
let monthlastdate = new Date(year, month, 0).getDate();
let lit = "";
for (let i = dayone; i > 0; i--) {
lit += `<li class="inactive">${monthlastdate - i + 1}</li>`;
}
for (let i = 1; i <= lastdate; i++) {
let isToday = i === date.getDate() && month === new Date().getMonth() && year === new Date().getFullYear() ? "active" : "";
lit += `<li class="${isToday}">${i}</li>`;
}
for (let i = dayend; i < 6; i++) {
lit += `<li class="inactive">${i - dayend + 1}</li>`
}
currdate.innerText = `${months[month]} ${year}`;
day.innerHTML = lit;
}
manipulate();
prenexIcons.forEach(icon => {
icon.addEventListener("click", () => {
month = icon.id === "calendar-prev" ? month - 1 : month + 1;
if (month < 0 || month > 11) {
date = new Date(year, month, new Date().getDate());
year = date.getFullYear();
month = date.getMonth();
} else {
date = new Date();
}
manipulate();
});
});
});
</script>
</body>
</html>
i fixed the chevron loading error by using the hexadecimal characters for the less than and greater than symbols, which loads a slight bit faster as a result! yay.
<span id="calendar-prev" class="material-symbols-rounded"><</span>
<span id="calendar-next" class="material-symbols-rounded">></span>
If it is relevant at all, i would probably use all of your widgets if they had a “super small and simple” option!
If its useful to you, you may salvage the codes as needed!
-Jedi
