About
This is a simple web calendar, which shows your system date in day, week, month and year format.
Version: 1.4, File Size: 7.2KB
WIDGETS
Calendar Widget
Click To Go Back To The Widgets PagePreview
How To Add?
By hotlinking:
Put this script on your HTML document.
<script src="https://404city.neocities.org/widget/calendar.js"></script>
By uploading on your site (Recommended):
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>
- Make sure the script is located after <body> but before </body>.
- The calendar will instantly pop-up where you put the script.
ID and Class Information:
Here are the ID and Class selectors of the calendar's elements. You can use them on your own 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. |
Bonus:
You can also set the day names longer using this CSS code:
.calendarDayOfTheWeek:nth-of-type(1)::after {content: "un";}
.calendarDayOfTheWeek:nth-of-type(2)::after {content: "on";}
.calendarDayOfTheWeek:nth-of-type(3)::after {content: "ue";}
.calendarDayOfTheWeek:nth-of-type(4)::after {content: "ed";}
.calendarDayOfTheWeek:nth-of-type(5)::after {content: "hu";}
.calendarDayOfTheWeek:nth-of-type(6)::after {content: "ri";}
.calendarDayOfTheWeek:nth-of-type(7)::after {content: "at";}
Default CSS Rules
These are the default CSS properties that are automatically generated and applied by the script:
:where(#calendarHeader, .calendarDayOfTheWeek, .calendarCell) {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
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;
font-family: Arial, Helvetica, sans-serif;
}
: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;
}
HTML Structure
The HTML code that is automatically generated by the script:
<div id='calendar'>
<div id='calendarHeader'>Loading...</div>
<div id='calendarGrid'>
<div class='calendarDayOfTheWeek'>S</div>
<div class='calendarDayOfTheWeek'>M</div>
<div class='calendarDayOfTheWeek'>T</div>
<div class='calendarDayOfTheWeek'>W</div>
<div class='calendarDayOfTheWeek'>T</div>
<div class='calendarDayOfTheWeek'>F</div>
<div class='calendarDayOfTheWeek'>S</div>
<div class='calendarCell' id='calendarCell0'>-</div>
<div class='calendarCell' id='calendarCell1'>-</div>
<div class='calendarCell' id='calendarCell2'>-</div>
<div class='calendarCell' id='calendarCell3'>-</div>
<div class='calendarCell' id='calendarCell4'>-</div>
<div class='calendarCell' id='calendarCell5'>-</div>
<div class='calendarCell' id='calendarCell6'>-</div>
<div class='calendarCell' id='calendarCell7'>-</div>
<div class='calendarCell' id='calendarCell8'>-</div>
<div class='calendarCell' id='calendarCell9'>-</div>
<div class='calendarCell' id='calendarCell10'>-</div>
<div class='calendarCell' id='calendarCell11'>-</div>
<div class='calendarCell' id='calendarCell12'>-</div>
<div class='calendarCell' id='calendarCell13'>-</div>
<div class='calendarCell' id='calendarCell14'>-</div>
<div class='calendarCell' id='calendarCell15'>-</div>
<div class='calendarCell' id='calendarCell16'>-</div>
<div class='calendarCell' id='calendarCell17'>-</div>
<div class='calendarCell' id='calendarCell18'>-</div>
<div class='calendarCell' id='calendarCell19'>-</div>
<div class='calendarCell' id='calendarCell20'>-</div>
<div class='calendarCell' id='calendarCell21'>-</div>
<div class='calendarCell' id='calendarCell22'>-</div>
<div class='calendarCell' id='calendarCell23'>-</div>
<div class='calendarCell' id='calendarCell24'>-</div>
<div class='calendarCell' id='calendarCell25'>-</div>
<div class='calendarCell' id='calendarCell26'>-</div>
<div class='calendarCell' id='calendarCell27'>-</div>
<div class='calendarCell' id='calendarCell28'>-</div>
<div class='calendarCell' id='calendarCell29'>-</div>
<div class='calendarCell' id='calendarCell30'>-</div>
<div class='calendarCell' id='calendarCell31'>-</div>
<div class='calendarCell' id='calendarCell32'>-</div>
<div class='calendarCell' id='calendarCell33'>-</div>
<div class='calendarCell' id='calendarCell34'>-</div>
<div class='calendarCell' id='calendarCell35'>-</div>
<div class='calendarCell' id='calendarCell36'>-</div>
<div class='calendarCell' id='calendarCell37'>-</div>
<div class='calendarCell' id='calendarCell38'>-</div>
<div class='calendarCell' id='calendarCell39'>-</div>
<div class='calendarCell' id='calendarCell40'>-</div>
<div class='calendarCell' id='calendarCell41'>-</div>
</div>
</div>
Update Log
[v1.4] - 12 November 2025, Wednesday
- Removed previous and next month buttons.
- Gap sizes are set to 2px.
[v1.3] - 9 November 2025, Sunday
- Most of the coloring is removed.
[v1.2] - 14 August 2025, Thursday
- Edited script source.
[v1.1] - 13 August 2025, Wednesday
- Decreased font-size from 16px to 14px.
- Decreased widget size from 300x300 to 260x260.
[v1.0] - 10 August 2025, Sunday
- Widget is ready to use!
Click To Go Back To The Widgets Page