WIDGETS

Calendar Widget

Preview

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.26KB

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:

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 Informations:

Here are the ID and Class definitions of 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.

Default CSS Definements

Here are the default CSS properties of elements that already defined in your widget file. (You don't have to define them in your own CSS file for second time.)

: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;
}

HTML Structure

The HTML code that automatically generated by 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

12 November 2025, Wednesday

Removed previous and next month buttons.
Gap sizes are set to 2px.

9 November 2025, Sunday

Most of the coloring is removed.

14 August 2025, Thursday

Edited script source.

13 August 2025, Wednesday

Decreased font-size from 16px to 14px.
Decreased widget size from 300x300 to 260x260.

10 August 2025, Sunday

Widget is ready to use!

Click To Go Back To The Widgets Page