With this browser-based application, you can display multiple time intervals on a chart. You can enter intervals of any length and also use single-point time values. You can adjust the timeline length, print time scale marks, draw interval edges, and display interval durations. You can also customize the width and color of the time bars, change the vertical distance between intervals, and specify the background color, text color, and padding around the entire chart. Created by computer nerds from team Browserling.
With this browser-based application, you can display multiple time intervals on a chart. You can enter intervals of any length and also use single-point time values. You can adjust the timeline length, print time scale marks, draw interval edges, and display interval durations. You can also customize the width and color of the time bars, change the vertical distance between intervals, and specify the background color, text color, and padding around the entire chart. Created by computer nerds from team Browserling.
This is a quick online utility for drawing one or more clock time intervals on a timeline. The program visualizes the given periods of time in the form of a timescale chart. It can display multiple intervals on the same time diagram in multiple colors, allowing you to instantly understand when these intervals occur and if they overlap. The intervals that you want to visualize can be entered in the options, using a dash-separated time format "beginningTime - endTime". For example, an interval "9:00 - 12:00" means the time from 9am to noon. You can enter multiple intervals in the options field by separating them via the Enter key so that each interval is on a new line. You can also enter single timer values, such as "11:00:00", which means a single point at that time. Such value will be visualized as a dot on the chart. Depending on the duration of the specified intervals, the program automatically generates the timeline and adjusts the scale using tick intervals of 1 hr, 30 min, 15 min, 10 min, 5 min, 1 min, 30 sec, 15 sec, 10 sec, 5 sec, or 1 sec. If you want to display the intervals on a larger timeline, you can specify the start and end time of the timeline in the "Start of timeline" and "End of timeline" options. Multiple additional checkboxes in the options let you customize the timeline, scale, and intervals. In particular, with the "Draw Tick Values" button, you can turn the drawing the values below tick marks on or off. With the "Draw Interval Edges" button, you can drop a dotted line from both ends of an interval to the time axis. With the "Draw Interval Edge Time" button, you can display the start time value and the end time value of an interval on the timeline below the time axis. And with the "Draw Interval Duration" checkbox, you can print the duration of each interval directly above the interval bar on the image. For example, for the interval "9:00 - 12:00", the value "3 hr" will be printed above it. You can specify the thickness of the interval bar (default 20px), the radius of single-point timestamps (default 5px), and the vertical distance between time intervals (default 20px). You can also prettify the image by setting padding, which is the empty space around the graph (default 20px), choosing a color for the background (white by default), and setting a color for the interval text and timeline text (black by default). Additionally, there's an option for specifying colors for interval bars. If no colors are entered in this option, the program uses the rainbow colors for the interval bars. If you want to assign colors for the interval bars yourself, specify one color per line using the color name, its hex code, or RGB code. Timeabulous!
This is a quick online utility for drawing one or more clock time intervals on a timeline. The program visualizes the given periods of time in the form of a timescale chart. It can display multiple intervals on the same time diagram in multiple colors, allowing you to instantly understand when these intervals occur and if they overlap. The intervals that you want to visualize can be entered in the options, using a dash-separated time format "beginningTime - endTime". For example, an interval "9:00 - 12:00" means the time from 9am to noon. You can enter multiple intervals in the options field by separating them via the Enter key so that each interval is on a new line. You can also enter single timer values, such as "11:00:00", which means a single point at that time. Such value will be visualized as a dot on the chart. Depending on the duration of the specified intervals, the program automatically generates the timeline and adjusts the scale using tick intervals of 1 hr, 30 min, 15 min, 10 min, 5 min, 1 min, 30 sec, 15 sec, 10 sec, 5 sec, or 1 sec. If you want to display the intervals on a larger timeline, you can specify the start and end time of the timeline in the "Start of timeline" and "End of timeline" options. Multiple additional checkboxes in the options let you customize the timeline, scale, and intervals. In particular, with the "Draw Tick Values" button, you can turn the drawing the values below tick marks on or off. With the "Draw Interval Edges" button, you can drop a dotted line from both ends of an interval to the time axis. With the "Draw Interval Edge Time" button, you can display the start time value and the end time value of an interval on the timeline below the time axis. And with the "Draw Interval Duration" checkbox, you can print the duration of each interval directly above the interval bar on the image. For example, for the interval "9:00 - 12:00", the value "3 hr" will be printed above it. You can specify the thickness of the interval bar (default 20px), the radius of single-point timestamps (default 5px), and the vertical distance between time intervals (default 20px). You can also prettify the image by setting padding, which is the empty space around the graph (default 20px), choosing a color for the background (white by default), and setting a color for the interval text and timeline text (black by default). Additionally, there's an option for specifying colors for interval bars. If no colors are entered in this option, the program uses the rainbow colors for the interval bars. If you want to assign colors for the interval bars yourself, specify one color per line using the color name, its hex code, or RGB code. Timeabulous!
In this example, we visualize a timetable for music and dance classes. The dance classes last one hour and are held four times a day, starting at 10:30, 11:40, 12:50, and 14:00 (red, yellow, green, and blue bars). The music lessons last two hours and are held from 11:00 to 13:00 (purple bar). By glancing at this timing diagram, it's easy to see that to be able to attend both a music class and a dance session, we need to go to the music class first (11:00 - 13:00) and then go to the last dance session (14:00 - 15:00).
In this example, we load ten time intervals to see if they overlap. We enter one interval per line and set the beginning of the scale to 00:00:00 and the end of the scale to 12:00:00. The program displays all ten time bars using rainbow colors and makes them 25 pixels thick. To make sure that the intervals don't overlap, we activate the "Draw Interval Edges" button. This button drops neat dotted projections of each edge of the time bar onto the time coordinate line for a better visual overview.
This example splits a 24-hour day into six equal time slots and draws them on an image. Each time interval lasts 4 hours and each next interval immediately jumps a step above the previous one, forming a continuous staircase. To make sure that there is no unused time between the intervals, we print the start and end time of each interval on the timeline. As these values match, we can be sure that the intervals are continuous. We use the "ivory" color for the background, set the interval thickness to 50px, and color them in shades of green (specified using hex codes).
This example uses a visualization algorithm to analyze the results of a 300-meter track race. It loads the timers of race results for 15 athletes into the input and displays them as a dot chart. Each timer is drawn as a single point with a unique color and radius of 6 pixels. Also, for each point, the exact result is printed below the timeline. By finding the first dot on the left, we can instantly see that the race winner is the second athlete with the result of 00:30:10.
In this example, we visualize large time intervals that go beyond a 24-hour day. The first four intervals start in the evening of one day and end in the morning of the next day. To display such intervals, the program uses a bar that's divided into two parts. The first part starts at the end of the timescale (before 24:00) and then continues at the beginning of the line (from 00:00). Also, notice that the visualization contains intervals with values exceeding 24:00. To fit them in the chart, the program extends the timeline and draws ticks until 26:00.
In this example, we create a time chart with a transparent background. We put five intervals and an individual timer value in the options and draw the diagram on a timeline ranging from 12:00 to 15:00. To make the background of the image disappear, we enter the color "transparent" in the background option. For all other lines, text, numbers, dots, and bars, we use the color "indigo".
Draw a binary clock that shows time in base two.
Draw a clock in Salvador Dali style showing custom time.
Draw a weird-looking clock that shows a particular time.
Draw a π clock with π hours in a day.
Draw a 360° clock with 360 degrees in a day.
Create a GIF animation of an analog clock.
Create a GIF animation of a digital clock.
Create a GIF animation of a clock that's broken.
Draw a daily calendar for a single day.
Draw a weekly calendar for any week of the month.
Draw a yearly calendar for the entire year.
Draw a calendar that shows moon phases.
Draw a calendar that shows the seasons and Sun's position.
Draw a calendar that shows when the Sun rises and sets.
Draw a calendar that shows when the Moon rises and sets.
Draw an animation that counts down (or up) time.
Create a GIF animation of a sand clock.
Animate a timeless clock that goes in an infinite spiral.
Visualize the given clock time as a pie chart.
Visualize the current year as a pie chart.
Visualize the given clock time as a bar chart.
Visualize the current year as a bar chart.
Visualize the given clock time as a pixel wall (1px = 1sec).
Visualize the current year as a pixel wall (1px = 1day).
Visualize the given clock time as bubbles.
Visualize the current year as bubbles.
Visualize the given clock time as an arrow.
Quickly calculate time passed and left in the current day as pct.
Quickly calculate time passed and left in the current year as pct.
Convert regular clock time to binary clock time (bintime).
Quickly regular calendar date to binary date (bindate).
Convert regular clock time to decimal clock time (dectime).
Quickly regular calendar date to decimal date (decdate).
Convert regular clock time to hexadecimal time (hextime).
Quickly regular calendar date to hexadecimal date (hexdate).
Create a GIF animation of the Moon for a particular month.
Create an animation of the Moon orbiting the Earth.
Create a 88 day animation of the Mercury orbiting the Sun.
Create a 225 day animation of the Venus orbiting the Sun.
Create a 365 day animation of the Earth orbiting the Sun.
Create a 687 day animation of the Mars orbiting the Sun.
Create a 4,330 day animation of the Jupiter orbiting the Sun.
Create a 10,756 day animation of the Saturn orbiting the Sun.
Create a 30,687 day animation of the Uranus orbiting the Sun.
Create a 60,190 day animation of the Neptune orbiting the Sun.
Create a 90,560 day animation of the Pluto orbiting the Sun.
Create an animation of all planets in the Solar System.
Create an animation of Phobos and Deimos orbiting Mars.
Animate Io, Europa, Ganymede, Callisto orbiting Jupiter.
Animate Titan, Rhea, Iapetus, Enceladus orbiting Saturn.
Animate Titania, Oberon, Umbriel, Ariel, Miranda orbiting Uranus.
Animate Triton, Nereid, and Proteus orbiting Neptune.
Animate Charon, Nix, Hydra, Kerberos, Styx orbiting Pluto.
Find dates when two or more planets align in a straight line.
Find dates when the solar eclipse happens.
Find dates when the lunar eclipse happens.
Calculate your age based on the orbital period of other planets.
Represent a clock time as a matrix.
Represent a calendar date as a matrix.
Represent a clock time as a vector.
Represent a calendar date as a vector.
Draw a time series chart.
Given a bunch of time intervals, find overlapping intervals.
Generate a bunch of overlapping time intervals.
Generate a bunch of non-overlapping time intervals.
Generate random clock time intervals.
Given a bunch of date intervals, find overlapping intervals.
Generate a bunch of overlapping date intervals.
Generate a bunch of non-overlapping date intervals.
Generate random calendar date intervals.
Swap a clock's hour hand with minute hand.
Find the reverse of the given clock time.
Find the inverse of the given clock time.
Shift the given clock time by any time interval.
Change the clock scale from 24 hours to any other hours.
Generate a list of valid clock times (for testing).
Generate a list of invalid clock times (for testing).
Generate a list of valid calendar dates (for testing).
Generate a list of invalid calendar dates (for testing).
Create errors in the given clock times (for testing).
Create errors in the given calendar dates (for testing).
Convert a calendar date to seconds.
Convert seconds to a calendar date.
Create a crontab expression from human language.
Rewrite a crontab entry into human language.
Quickly find the week of the month of a calendar date.
Quickly find how many days have passed since start of the year.
Quickly find how many days are left till the end of the year.
Quickly find how many days are left till a specific date.
Find how many minutes are in the given seconds.
Find how many hours are in the given seconds.
Find how many days are in the given seconds.
Find how many weeks are in the given seconds.
Find how many months are in the given seconds.
Find how many years are in the given seconds.
Find how many seconds are in the given minutes.
Find how many hours are in the given minutes.
Find how many days are in the given minutes.
Find how many weeks are in the given minutes.
Find how many months are in the given minutes.
Find how many years are in the given minutes.
Find how many seconds are in the given hours.
Find how many minutes are in the given hours.
Find how many weeks are in the given hours.
Find how many months are in the given hours.
Find how many years are in the given hours.
Find how many seconds are in the given days.
Find how many minutes are in the given days.
Find how many weeks are in the given days.
Find how many months are in the given days.
Find how many years are in the given days.
Find how many seconds are in the given weeks.
Find how many minutes are in the given weeks.
Find how many hours are in the given weeks.
Find how many days are in the given weeks.
Find how many months are in the given weeks.
Find how many years are in the given weeks.
Find how many seconds are in the given months.
Find how many minutes are in the given months.
Find how many hours are in the given months.
Find how many days are in the given months.
Find how many weeks are in the given months.
Find how many years are in the given months.
Find how many seconds are in the given years.
Find how many minutes are in the given years.
Find how many hours are in the given years.
Find how many days are in the given years.
Find how many weeks are in the given years.
Find how many months are in the given years.
Find how old a human would be if he/she was a bird.
Find how old a bird would be if it was a human.
Convert clock time on Earth to clock time on Mars.
Convert clock time on Mars to clock time on Earth.
Convert Earth time to Star Trek's stardate.
Convert Star Trek's stardate to Earth time.
Print a list of clock times with hours equal mins equal secs.
Print a list of calendar dates with years equal months equal days.
Print a list of all clock times when hands are in a straight line.
Given clock times in various formats, convert them to one format.
Given calendar dates in various formats, make them the same format.
Cyclically shift HH, MM, SS time parts to the left or right.
Cyclically shift YYYY, MM, DD date parts to the left or right.
Perform freeform clock time arithmetics.
Perform freeform calendar date arithmetics.
Find the sum of hours plus minutes plus seconds.
Find the sum of years plus months plus days.
Find clock hand position so that hr + min + sec equals your value.
Find calendar date so that year + months + day equals your value.
Print all clock icons from 00:00 to 24:00.
Generate date and time that only Zalgo can understand.
Subscribe to our updates. We'll let you know when we release new tools, features, and organize online workshops.
Enter your email here
We're Browserling — a friendly and fun cross-browser testing company powered by alien technology. At Browserling our mission is to make people's lives easier, so we created this collection of time and date tools. All our tools share the same user interface, so as soon as you learn how to use one of the tools, you'll be a master of all tools. Behind the scenes, our time and date tools are actually powered by our web developer tools that we created over the last couple of years. Check them out!
