Drag-and-Drop Event Planner – Simple Week Calendar

Simple Week Calendar is a dependency-free JavaScript scheduler with day, workweek, and seven-day views.

It allows you to create, move, and resize appointments directly in a time grid and arranges overlapping events side by side.

Features

• A built-in dialog creates, edits, and deletes events.
• Configurable visible hours, time-slot intervals, and first weekday.
• Business-hour highlighting and a current-time indicator.
• Localized time labels with 12-hour and 24-hour formats.
• Read-only mode and independent controls for creating, moving, and resizing events.
• CSS custom properties for colors, typography, and sizing.
• Callbacks for event clicks, creation, changes, and deletion.

How to Use It

Basic Usage

Download & load week-calendar.css and week-calendar.js files in the document.

<link rel="stylesheet" href="week-calendar.css">
<div id="week-calendar" style="height: 600px;"></div>

Set the container height for the calendar grid.

<script src="week-calendar.js"></script>

Generate a basic weekly calendar. You can click an event to edit it in the built-in dialog.

const start = new Date();
start.setHours(10, 0, 0, 0);
const end = new Date(start);
end.setHours(11, 0, 0, 0);
const calendar = new WeekCalendar('#week-calendar', {
  daysToShow: 7,
  startHour: 8,
  endHour: 19,
  events: [
    {
      id: 'meeting-1',
      title: 'Design Review',
      start,
      end,
      color: '#0d9488'
    }
  ],
  onEventCreate: event => console.log('Created:', event),
  onEventChange: (event, action) => console.log(action, event),
  onEventDelete: id => console.log('Deleted:', id)
});

Event Data

Event times accept JavaScript Date objects or strings parsed by new Date(). Keep the start and end on the same date. The grid places events under their start date.

Update the Schedule

Copy the events.json beside your HTML file and serve the page over HTTP.

calendar.setView(5);
calendar.updateEvent('meeting-1', {
  title: 'Design Review: Revised'
});
fetch('./events.json')
  .then(response => response.json())
  .then(events => {
    calendar.setEvents(events);
    if (events.length) calendar.gotoDate(events[0].start);
  });

Configuration Options

Pass these options as the second argument to new WeekCalendar(container, options).

Public Methods

Event Callbacks

Styling and CSS Variables

Load your CSS overrides after week-calendar.css and set the variables on .modern-week-calendar.

.modern-week-calendar {
  --wc-primary: #0d9488;
  --wc-primary-hover: #0f766e;
  --wc-primary-light: #ccfbf1;
  --wc-event-bg: #0d9488;
  --wc-current-time: #dc2626;
}

Alternatives and Related Resources

• Vanilla Calendar JS Library for Date Picking, Scheduling, and Timelines
• Full-Featured Drag-and-Drop JavaScript Event Calendar with Resource & Timeline Views
• Feature-rich Event Calendar In JavaScript – Calendar.js