A Clean Date and Time Picker Without Heavy Dependencies

Every time a project needs a date picker, the same story unfolds. The native <input type="date"> looks different in every browser, customization is painful, and it behaves unpredictably on mobile platforms. Pulling in monstrous UI libraries or outdated wrappers with dozens of transitive packages just for a simple calendar feels wrong.

Recently I stumbled upon the vanilla-calendar-pro repository. It's a clean TypeScript component for date and time selection with zero external dependencies. It works in plain JavaScript as well as inside React, Vue, or Svelte.

What's Inside and Why It's Convenient

The library is built to cover basic interface needs without bloating the bundle. The calendar weighs just a few kilobytes, yet it can do almost everything designers and product managers typically require.

Here are the main things that stand out:

• Zero dependencies. No third-party date parsing utilities like moment or date-fns, it uses native Intl under the hood.
• Flexible display modes. The calendar can be embedded directly into the page markup or opened in a popup when clicking an input.
• Range selection and multiple months at once. Great for hotel bookings, ticket purchases, or analytics dashboards.
• Built-in time picker. Time can be configured in both 24-hour format and AM/PM.
• Themes. There are ready-made light and dark themes, and customization is done through standard CSS variables.

Quick Start

Installation is standard via any package manager:

npm install vanilla-calendar-pro

If you don't have a bundler, you can include the script and styles directly via CDN.

In the markup, you just need to create an empty container:

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

Initialization in code looks clean:

import { VanillaCalendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

const calendar = new VanillaCalendar('#calendar', {
  settings: {
    lang: 'ru-RU',
    iso8601: true,
    selection: {
      day: 'multiple-ranged',
    },
  },
  actions: {
    clickDay(event, self) {
      console.log('Выбранные даты:', self.selectedDates);
    },
  },
});

calendar.init();

Just a couple of config lines, and we have a working calendar with range selection support and Russian localization.

Customizing for Specific Tasks

One common problem with ready-made components is that stepping left or right from the standard design becomes a nightmare. In vanilla-calendar-pro, the DOM structure can be rebuilt to fit your needs using custom layouts.

For example, if you need to disable past dates and block weekends, settings are passed directly into the config object:

const calendar = new VanillaCalendar('#calendar', {
  settings: {
    range: {
      min: 'today',
      disabled: ['2026-05-01', '2026-05-09'],
    },
    selection: {
      time: 24,
    },
  },
  actions: {
    changeTime(event, self) {
      console.log('Установленное время:', self.selectedTime);
    },
  },
});

calendar.init();

The component handles dynamic parameter updates gracefully. If the user switches the language in the app, you simply call the update() method with new options without a full page redraw or memory leaks.

Framework Integration

Although vanilla is in the name, the author made sure it's convenient to work with reactive libraries.

In React, the calendar easily wraps into a hook useEffect:

import { useEffect, useRef } from 'react';
import { VanillaCalendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

export function DatePicker({ onSelect }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const calendar = new VanillaCalendar(containerRef.current, {
      actions: {
        clickDay(event, self) {
          onSelect(self.selectedDates);
        },
      },
    });

    calendar.init();

    return () => {
      calendar.destroy();
    };
  }, [onSelect]);

  return <div ref={containerRef} />;
}

The destroy() method properly cleans up event handlers, so the component doesn't leave garbage in memory on unmount.

Who Will Find It Useful

The project fills the gap between heavyweight UI giants and primitive native inputs. If you're writing a pet project, building a landing page, or making an admin panel where you don't want to pull in bulky components, this is a great candidate.

The codebase is fully typed, the sources are open, and the documentation on the official site thoroughly covers all API methods and styling examples. Worth bookmarking for the next sprint.