This is a simple web calendar, which shows your system date in day, week, month and year format.
Put this script on your HTML document.
<script src="https://404city.neocities.org/widget/calendar.js"></script>
Click here to download script! Then, upload it on your site and put this line on your HTML document.
<script src="YOUR_SCRIPT_PATH_HERE"></script>
Here are the ID and Class definitions of calendar's elements. You can use them on your CSS file to customize your calendar!
| ID/Class | Element Type | Description |
|---|---|---|
| #calendar | div | Main body of the calendar. |
| #calendarHeader | div | Displays month and year. |
| #calendarGrid | div | Container grid of calendar cells and days of the week. |
| .calendarDayOfTheWeek | div | Cells which represents the days of the week. |
| .calendarCell | div | Default cells which are the day numbers of the calendar.. |
| .calendarNonMonthDay | div | Marks the days outside the current month. Make sure to put it after the .calendarCell class. |
| .calendarToday | div | Marks the current day. Make sure to put it after the .calendarCell class. |
:where(#calendarHeader, .calendarDayOfTheWeek, .calendarCell) {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;
color: black;
cursor: default;
user-select: none;
}
:where(#calendar) {
box-sizing: border-box;
display: grid;
grid-template-rows: 1.25fr 7fr;
height: 260px;
width: 260px;
border: 1px solid black;
padding: 2px;
gap: 2px;
font-size: 14px;
}
:where(#calendarGrid) {
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
:where(#calendarHeader) {
font-weight: bold;
font-size: 1.5em;
white-space: nowrap;
}
:where(.calendarDayOfTheWeek) {
font-weight: bold;
}
:where(.calendarNonMonthDay) {
color: gray;
}
:where(.calendarToday) {
background-color: black;
color: white;
}