×

Single-page, full-year JavaScript calendar

Features:

• Today's date is highlighted with a blue border
• Weekends are shaded
• Use the Share button to create a shareable URL
• Customize cells via the JavaScript API in the console

Example:

// Set a label and color for a date
calendar.setCell(12, 25, {
  color: '#fecaca',
  label: '<b>Christmas</b>',  // HTML supported
  borderLeftColor: '#dc2626',
  borderLeftWidth: '3px',
  borderBottomColor: '#dc2626'});

// Highlight a date range
calendar.setRange(7, 1, 7, 7, {
  color: '#bbf7d0',
  label: 'Vacation'});

// Highlight All Fridays (0=Sun, 6=Sat)
calendar.getDayOfWeekDates(5)
    .forEach(d => calendar.setCell(d.month, d.day, { color: '#ffd0d0' }));

For more information, visit:
github.com/brentp/single-page-js-calendar