npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vanilla-calendar-pro

v3.0.0

Published

The Vanilla Calendar Pro is a versatile JavaScript date and time picker component with TypeScript support, making it compatible with any JavaScript frameworks and libraries. It is designed to be lightweight, easy to use, and feature-rich, without relying

Downloads

16,731

Readme

Vanilla Calendar Pro - Lightweight and Functional JavaScript Plugin for Date and Time Selection

vanilla-calendar preview

version tests downloads

This is a versatile JavaScript date and time picker component with TypeScript support, compatible with any JavaScript frameworks and libraries. It is designed to be lightweight, easy to use, and feature-rich, without relying on external dependencies.

Key Features

  • Lightweight: The final JavaScript file is minified and optimized for fast loading.
  • No Dependencies: Completely self-contained, ensuring you don't need to include additional libraries.
  • Simple Localization: Supports simple localization for any language.
  • Customizable: Can be easily configured using CSS and HTML markup.
  • Multiple Instances: Allows for an unlimited number of calendar instances on a single page.
  • Theme Support: Supports automatic theme switching between light and dark modes, as well as custom user-defined themes.
  • Week Start Customization: Supports any day of the week as the starting day.
  • Custom Weekends: Define custom weekend days for each week as needed.
  • Week Number Display: Can display week numbers throughout the year.
  • Not Tied to Input Tags: Unlike many date pickers, it's not limited to the <input> tag.
  • Accessible: Includes ARIA labels, tabindex, and full keyboard navigation, enhancing accessibility.
  • Date and Time Range Selection: Supports selecting ranges for both dates and times, with maximum and minimum limits.
  • Popups and Tooltips: Allows setting custom popups with user-defined information, and in date range selection mode, provides tooltips on hover.

Browser Support

VanillaCalendar is compatible with a wide range of browsers:

Chrome | Firefox | Edge | Opera | Safari --- | --- | --- | --- | --- | 57+ ✔ | 52+ ✔ | 80+ ✔ | 44+ ✔ | 10.1+ ✔ |

Support and Feedback

Vanilla Calendar Pro is free to use for everyone, but maintaining it comes with costs. I personally cover expenses like hosting, domain, and development resources to keep the project running smoothly. Your donations help me continue improving the tool while keeping it accessible for the community. Any contribution, big or small, makes a difference!

If you’d like to support the project, please consider making a donation or giving it a 🌟 star on GitHub.

Feel free to report any issues or share your ideas—your feedback is invaluable!

Getting Started

Installation

You can install it using npm or yarn:

npm install vanilla-calendar-pro
# or
yarn add vanilla-calendar-pro

Usage

Here's a simple example of using it in your HTML:

<html>
  <head>
  </head>
  <body>
    <div id="calendar"></div>
    <!-- or -->
    <!-- <input type="text" id="calendar-input"> -->
  </body>
</html>

To add the necessary styles and scripts, you can use the following code:

import { Calendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css';

// Initialize the calendar
const calendar = new Calendar('#calendar');
calendar.init();
// or
// const calendarWithInput = new Calendar('#calendar-input', { inputMode: true });
// calendarWithInput.init();

CSS Styles

// Only layout calendar
import 'vanilla-calendar-pro/styles/layout.css';

// Themes
import 'vanilla-calendar-pro/styles/themes/light.css';
import 'vanilla-calendar-pro/styles/themes/dark.css';
// ...and others

The calendar can automatically switch between a light or dark theme depending on the user's system settings, or track a custom HTML attribute that specifies the desired theme.

  • The index.css file contains all the styles from the layout.css file, as well as the light and dark theme styles.
  • The layout.css file contains the essential structural styles for the calendar.
  • The themes/light.min.css theme provides a light color scheme.
  • The themes/dark.min.css theme offers a dark color scheme.
  • ...and others

If you want to apply a specific theme, it is recommended to import layout.css along with your preferred theme instead of index.css.

Layouts

VanillaCalendar features customizable DOM templates that allow you to modify the structure of the calendar to fit your needs. The templates are identified by tags containing the # character, and they should include a trailing slash at the end.

The calendar contains custom layouts for each calendar type, which allow you to change the calendar structure to suit your needs. Each layout contains its own set of components that can be moved or removed from it if necessary. By default, a layout contains all the components available to it. Components are identified by tags containing the # character, and they must contain a slash at the end of the tag.

Here is an example of the default layout:

new Calendar('#calendar', {
  layouts: {
    default: `
      <div class="vc-header" data-vc="header" role="toolbar" aria-label="Calendar Navigation">
        <#ArrowPrev [month] />
        <div class="vc-header__content" data-vc-header="content">
          <#Month />
          <#Year />
        </div>
        <#ArrowNext [month] />
      </div>
      <div class="vc-wrapper" data-vc="wrapper">
        <#WeekNumbers />
        <div class="vc-content" data-vc="content">
          <#Week />
          <#Dates />
          <#DateRangeTooltip />
        </div>
      </div>
      <#ControlTime />
    `
  }
});

Library components

For detailed instructions on how to use the calendar as a component for various libraries, please visit the website with detailed documentation and examples.

API Reference

For detailed information on the available parameters and settings, please refer to the API reference.

Sponsor

This project is tested with BrowserStack.

License

MIT License

Author

Yury Uvarov ([email protected])