Calendar Sandbox

Generated Code

// HTML
<div id="calendar"></div>

// JavaScript
const events = [
  {
    id: 1,
    title: '📋 Meeting',
    date: new Date('2025-10-13'),
    time: '09:00',
    color: '#3b82f6',
    colorIsGradient: true
  },
  {
    id: 2,
    title: '☕ Coffee',
    date: new Date('2025-10-13'),
    time: '10:30',
    color: '#f97316',
    colorIsGradient: true
  },
  {
    id: 3,
    title: '🎯 Demo',
    startDate: new Date('2025-10-15'),
    endDate: new Date('2025-10-17'),
    time: '14:00',
    color: '#8b5cf6',
    colorIsGradient: true
  },
  {
    id: 4,
    title: '🏖️ Vacation',
    startDate: new Date('2025-10-25'),
    endDate: new Date('2025-10-28'),
    color: '#06b6d4',
    colorIsGradient: true
  },
  {
    id: 5,
    title: '🍕 Lunch',
    date: new Date('2025-10-13'),
    time: '12:00',
    color: '#f59e0b',
    colorIsGradient: true
  },
  {
    id: 6,
    title: '💻 Work',
    date: new Date('2025-10-13'),
    time: '08:00',
    color: '#10b981',
    colorIsGradient: true
  }
];

const calendar = new SimpleCalendarJs('#calendar', {
  view: 'month',
  events: events,
  fulldayMode: true,
  showMonthButton: true,
  showWeekButton: true,
  showDayButton: true,
  showNavigation: true,
  showTitle: true,
  showMonth: true,
  showYear: true,
  gridBorders: 'none',
  eventBorders: false,
  eventBorderColor: '#6c757d',
  defaultEventColor: '#4c6f94',
  showWeekdayChars: 3
});