Cron job visualiser

A JavaScript tool that allows you to specify a set of cron jobs, and then plot them on a timeline. This is very useful when trying to schedule new jobs or figure out where jobs are overlappying.

My tool will allow you to easily plot a set of cron jobs on a timeline across a day. It ignores the second, day of week and year settings from the cron expression, but that can always be coded in at a later date.

Note this tool was originally built for Quartz style cron expressions, but will work for non-Quartz expressions.

This online tool can help understand either cron expression format, Cronhub.

Download

cron-job-visualiser.js »

See it running

Cron Job Visualiser »

Sample

You will require some basic JavaScript and CSS:

var myTimeline = new CronJobVisualiser();

myTimeline.add("Every hour on the hour", "0 0 * * * ?");
myTimeline.add("At 12:10AM", "0 10 0 * * ?");
myTimeline.add("Once a minute in during the 10th to 20th minutes from 9am to 5:20pm", "0 10-20 9-17 * * ?");
myTimeline.add("Every 10 minutes from 12am to 6:59am", "0 0/10 0-6 * * ?");
myTimeline.add("Every 5 minutes for the first half of every hour", "0 0-30/5 * * * ?");
myTimeline.add("Tom's job", "53 9,13,17 * * 1-5 ?");
myTimeline.add("Tom's job (non Quartz syntax)", "53 9,13,17 * * 1-5");
myTimeline.add("Every 20 mins (non Quartz syntax)", "*/20 * * * *");
myTimeline.build();

</script>

.CronJobVisualiser {font-size:10px;}
.CronJobVisualiser td {height:25px;}
.CronJobVisualiser td div {width:15px; text-align:center;}
.CronJobVisualiser .name {font-size:12px; white-space:nowrap; padding:0 2px; border-right:1px solid black;}

.CronJobVisualiser td {border-bottom:1px solid black;}
.CronJobVisualiser td:nth-child(2n) {background-color:#eeeeee;}
.CronJobVisualiser td.hour {background-color:white; height:30px;font-size:20px;text-align:center; border-right:1px solid black;}
.CronJobVisualiser td:nth-child(60n+1) {border-right:1px solid black;}

.CronJobVisualiser tr:not(:first-child):not(:nth-child(2)):hover td {background-color:#0066FF; color:white;}
.CronJobVisualiser tr.selected td {background-color:#1975FF; color:white;}
.CronJobVisualiser tr td.running {background-color:red !important;}

.CronJobVisualiser.printable:not(:first-child) {page-break-before:always;margin-top:30px;}

</style>

Printing

If you hit the Print button, it will rebuild the visualisation one hour at a time so make it more friendly for printing.
Some browsers do not include background colours automatically, there is usually an option in the print preview settings to switch this on, this page should help Using Background Graphics When Printing »