Widgets

Calendar

About

This is a simple web calendar, which shows your system date in day, week, month and year format. There are arrow keys on the widget which views previous or next months when you press them.

How to add?

Put this script on your HTML document. Make sure it's located after <body> but before </body>:

<script src="https://404city.neocities.org/widget/calendar.js"></script>

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 CSS file to customize your calendar!

ID/Class	Element Type	Description
#calendar	div	Main body of the calendar.
#calendarHeader	div	Contains month+year display and calendar buttons.
#calendarMonth	span	Displays current month and year.
.calendarMonthBtn	span	Next and previous month buttons.
#calendarGrid	div	Container of calendar cells.
.calendarDayOfTheWeek	div	Cells which represents the days of the week.
.calendarCell	div	Default cells which are the days 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 .calendarNonMonthDay class.

Update Log

14 August 2025, Thursday

Edited script source.

13 August 2025, Wednesday

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

10 August 2025, Sunday

Widget is ready to use!