WIDGETS

Calendar Widget

About

This is a simple web calendar, which shows your system date in day, week, month and year format.

Version: 1.5, File Size: 4.35KB

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 the 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'>-</div>
        . . .
        (42 calendarCell boxes in total.)
        . . .
        <div class='calendarCell'>-</div>
    </div>
</div>

Update Log

[v1.5] - 14 August 2026, Friday

Calendar cells are created dynamically by the script.
Calendar cell IDs are removed.

[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