JavaScript Calendar Without jQuery — Modern Alternatives

jQuery still powers roughly 66.5% of all websites according to W3Techs (August 2026). But that number reflects legacy — not momentum. If you are starting a new project or modernising an existing one, adding jQuery just for a JavaScript calendar component no longer makes sense. Modern calendar libraries deliver more functionality at a fraction of the bundle size, with zero dependencies.

This post compares the best ways to add a calendar to a JavaScript project without jQuery — from full event calendars to lightweight datepickers — with real bundle sizes, code examples, and migration paths.

Why jQuery calendars became the default

Between 2008 and 2016, jQuery was the standard abstraction over inconsistent browser APIs. Building a calendar meant dealing with DOM manipulation, event delegation, CSS class toggling, and AJAX — all of which jQuery simplified into a single, well-documented API.

jQuery UI Datepicker became the default date selection widget. Thousands of WordPress themes, Drupal modules, and enterprise applications embedded it. At its peak, you could not build a web form without encountering $('#date').datepicker().

The problem is what came along for the ride:

That is over a third of Google's recommended 300 KB total JavaScript budget for good Core Web Vitals — spent before your application code even loads.

What changed: browsers caught up

The reason jQuery existed was browser inconsistency. That problem is largely solved. Every modern browser now supports:

• document.querySelector() and querySelectorAll() — replaces $()
• element.classList — replaces $.addClass(), $.removeClass(), $.toggleClass()
• addEventListener() with delegation — replaces $.on()
• fetch() — replaces $.ajax()
• IntersectionObserver, MutationObserver — replaces jQuery plugins for scroll and DOM change detection
• CSS custom properties — replaces jQuery UI ThemeRoller
• Intl.DateTimeFormat and the upcoming Temporal API — replaces Moment.js, which many jQuery calendar plugins depended on

The entire jQuery utility layer is now built into the platform. Calendar libraries that target modern browsers can use these APIs directly, producing smaller, faster code with no intermediary.

Even FullCalendar dropped jQuery

The most telling signal came in 2019 when FullCalendar — the most popular JavaScript calendar library — removed jQuery as a dependency in version 4. The migration was significant enough to warrant a major version bump.

Before v4:

// FullCalendar v3 — required jQuery
$('#calendar').fullCalendar({
  events: '/api/events',
});

After v4:

// FullCalendar v4+ — no jQuery
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const calendar = new Calendar(document.getElementById('calendar'), {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  events: '/api/events',
});
calendar.render();

FullCalendar also dropped Moment.js in the same release, replacing it with native Date objects. The combined effect: a minimal FullCalendar setup went from ~150 KB gzipped (with jQuery + Moment) to ~43 KB gzipped.

Drupal followed a similar path, removing jQuery UI Datepicker from core entirely due to maintenance concerns and accessibility limitations.

Modern jQuery-free calendar libraries compared

Here is how today's leading calendar libraries stack up — all of them work without jQuery:

The divide is clear: Flatpickr, Cally, Air Datepicker, and Vanilla Calendar Pro are datepickers — they let users select dates. FullCalendar, Calendar.js, and SimpleCalendarJS are event calendars — they display, manage, and interact with events across multiple views.

SimpleCalendarJS: full calendar, zero dependencies

If your project needs a full event calendar without jQuery, SimpleCalendarJS delivers all of it in 14 KB gzipped — lighter than most jQuery-free datepickers, let alone full calendars.

npm install simple-calendar-js

import SimpleCalendarJs from 'simple-calendar-js';
import 'simple-calendar-js/simple-calendar-js.css';

const calendar = new SimpleCalendarJs('#calendar', {
  defaultView: 'month',
  fetchEvents: async (start, end) => {
    const res = await fetch(
      `/api/events?from=${start.toISOString()}&to=${end.toISOString()}`
    );
    return res.json();
  },
  onEventClick: (event) => console.log('Event:', event.title),
  onSlotClick: (date) => console.log('Date:', date),
  enableDragAndDrop: true,
  enableResize: true,
});

One package. One CSS import. No plugins to coordinate, no jQuery, no Moment.js. Month, week, day, and list views are included out of the box — not sold as separate add-ons.

Theming without jQuery UI ThemeRoller

jQuery UI's theming required downloading pre-built theme packages or using the ThemeRoller web tool. SimpleCalendarJS uses CSS custom properties:

.uc-calendar {
  --cal-primary: #2563eb;
  --cal-primary-dark: #1d4ed8;
  --cal-today-bg: #eff6ff;
  --cal-font-size: 14px;
}

Dark mode is a few variable overrides. No build step. No extra stylesheet downloads.

Migrating away from jQuery calendar plugins

If your project currently uses a jQuery-based calendar, here is a practical migration path.

Step 1: Audit your jQuery usage

Before replacing the calendar, check whether jQuery is used elsewhere in your project:

grep -r "\\$(" src/ --include="*.js" --include="*.ts" | wc -l

If the calendar plugin is your last jQuery dependency, removing it eliminates 30 KB gzipped of jQuery core from every page load — on top of whatever the plugin itself weighs.

Step 2: Choose the right replacement

If you only need date selection, replace $('#date').datepicker() with:

<!-- Native HTML — zero JavaScript, zero bundle cost -->
<input type="date" name="event-date" />

// Or Flatpickr — 16 KB gzipped, full customisation
import flatpickr from 'flatpickr';
flatpickr('#date', { dateFormat: 'Y-m-d', minDate: 'today' });

If you need a full calendar with events, replace the jQuery plugin with SimpleCalendarJS:

// Before: jQuery plugin (100+ KB gzipped with jQuery)
$('#calendar').fullCalendar({
  events: '/api/events',
});

// After: SimpleCalendarJS (14 KB gzipped, no jQuery)
const calendar = new SimpleCalendarJs('#calendar', {
  defaultView: 'month',
  fetchEvents: async (start, end) => {
    return fetch(`/api/events?from=${start.toISOString()}&to=${end.toISOString()}`)
      .then(r => r.json());
  },
  enableDragAndDrop: true,
});

Step 3: Remove jQuery

Once no code references $ or jQuery, uninstall it:

npm uninstall jquery jquery-ui

Verify with a production build that nothing breaks. Check your bundle analysis tool — you should see an immediate size reduction.

When jQuery still makes sense

Some scenarios justify keeping jQuery-based calendar plugins:

• Legacy applications in maintenance mode where the cost of migration exceeds the benefit
• Enterprise systems with locked dependency trees and strict change-control processes
• Projects that use jQuery extensively across dozens of files — removing just the calendar plugin would not eliminate the jQuery dependency anyway

For everything else — new projects, actively developed applications, or any codebase where performance and bundle size matter — a jQuery-free calendar library is the better choice.

Summary

• jQuery remains on 66.5% of websites (W3Techs, August 2026), but that reflects legacy — modern browsers provide everything jQuery offered through native APIs.
• Adding jQuery for a calendar adds ~30 KB gzipped of runtime before the calendar code itself. jQuery UI pushes that past 100 KB gzipped.
• FullCalendar dropped jQuery in v4 (2019). Drupal removed jQuery UI Datepicker from core. The ecosystem has moved on.
• For date selection only, Flatpickr (~16 KB), Cally (~8.5 KB), or the native <input type="date"> element replace jQuery datepickers at a fraction of the size.
• For a full event calendar, SimpleCalendarJS delivers month, week, day, and list views with drag-and-drop in ~14 KB gzipped — zero dependencies, one package, no jQuery required.

---

Sources & Further Reading

Research & References

• Usage Statistics of jQuery for Websites, August 2026 — W3Techs
• Alpha Release: jQuery Removal — FullCalendar Blog
• V4 Release Notes and Upgrade Guide — FullCalendar Docs
• Replace jQuery with vanilla Javascript in core — Drupal.org
• Remove jQuery dependency from date.js — Drupal.org
• Is jQuery still relevant in 2026? Vanilla JS migration guide — WPPoland
• Air Datepicker — Lightweight, dependency-free datepicker — GitHub
• Cally: Small, Feature-Rich Calendar Components — GitHub
• Vanilla Calendar Pro — Official Site
• The Best JavaScript Calendar Components — Bryntum Blog

Image Credits

• Cover: Computer Program on the Monitor — Pexels

All images free to use under the Pexels License.