×

Free, customizable clock widget for your own web site

Want an exact clock on your own web site? Or today's date, sunrise time, sunset time or day length? Just choose from the options below and copy the code! It's free!

Options

Location
California City, California, United States
For other locations, please use the search box in the top right corner.
What to display




Time format



Date format




 
Day:
daynameWednesday
dnameWed
daynum01-31
dnum1-31
day_in_yday 1-366
Week:
weekweek 46
Month:
monthnameNovember
monthnum01-12
mnum1-12
Year:
year2024
yy24
Color and size
px
What it will look like
Time in California City:
The final result may be different, depending on style sheets on your web page.
You can style the widget any way you want with CSS.

This is the code for your own web clock widget:

Terms of use

Advanced usage

There are two widget scripts: A simplified version, t.js, which displays only time, and the main widget script, en.js, which can display time, date, sunrise time, sunset time and day length. The main widget script is available in several languages. For other languages, replace en in the script name with the code for the desired language. (For instance pl.js for Polish, or tr.js for Turkish.)

Parameters for the init function:

ParameterValid keywordsDefault value
templateTIME, DATE, SUNTIME
time_formathours, minutes, seconds, 12hours, AMPMhours:minutes:seconds
date_formatdayname, dname, daynum, dnum, day_in_y, week, monthname, monthnum, mnum, yy, yearyear-monthnum-daynum
sun_formatsrhour, srminute, sr12hour, srAMPM, sshour, ssminute, ss12hour, ssAMPM, dlhours, dlminutessrhour:srminute-sshour:ssminute
coordsThe location's latitude and longitude. Required for displaying sun times and day length.
idFor identifying the location and the time zone on the server side. Required if the location name contains non-ascii letters, and if you change the HTML element id.
callbackThe name of a function that will be called every second, with rendered template as parameter. (Optional)

Parameter names and keywords are case sensitive. You can use HTML and other content in the template, time_format, date_format and sun_format parameters.

Multiple clocks can be created like this:

UTC time: <span id="UTC_za00"></span><br/>
New York sunrise time: <span id="New_York_z161"></span><br/>
Tokyo sunrise time: <span id="Tokyo_z444"></span><br/>
Find the <a href="https://time.is/" id="time_is_link" rel="nofollow">current time for any location or time zone on Time.is!</a>
<script src="//widget.time.is/en.js"></script>
<script>
time_is_widget.init({
	UTC_za00 : {},
	New_York_z161 : {
		template: "SUN",
		sun_format: "srhour:srminute",
		coords: "40.71427,-74.00597"
		},
	Tokyo_z444 : {
		coords: "59.33258,18.06490"
		}
	});
</script>

Result:

UTC time:
New York sunrise time:
Tokyo sunrise time:
Find the current time for any location or time zone on Time.is!

The values of the time_format, date_format, sun_format and template parameters are inherited, so you don't need to repeat them if the value is the same as for the previously defined widget.

 
 
Wednesday, November 13, 2024
Sun: ↑ 06:24AM ↓ 04:49PM (10h 24m) - More info - Make California City time default - Add to favorite locations