nathanreyes/v-calendar

★ 4,520HTMLAudience · vibe coderComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((v-calendar))
    Calendar Display
      Single month view
      Multi month view
      Date annotations
    Date Markers
      Highlights
      Dots and bars
      Popovers
    Date Picker
      Single date
      Multiple dates
      Date range
    Customization
      Theme colors
      Dark mode
      Custom cell slots
    Setup
      npm install
      vcalendar.io docs

mindmap root((v-calendar)) Calendar Display Single month view Multi month view Date annotations Date Markers Highlights Dots and bars Popovers Date Picker Single date Multiple dates Date range Customization Theme colors Dark mode Custom cell slots Setup npm install vcalendar.io docs

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a booking or scheduling form to your web app where users pick a start and end date for a trip or reservation.

USE CASE 2

Show a monthly event calendar with color-coded markers for deadlines, availability, or important dates.

USE CASE 3

Let users filter a list or dashboard by selecting a specific date or date range.

USE CASE 4

Display multiple months side by side with custom popover details when a user clicks on a date.

Tech stack

Vue.jsJavaScriptHTMLCSS

Getting it running

Difficulty · easy Time to first run · 30min

Install via npm with one command. Full docs and examples at vcalendar.io. Works as a standard Vue plugin, register it and use the components directly in templates.

License type not mentioned in the explanation.

In plain English

v-calendar is a calendar and date-picker plugin for Vue.js, a JavaScript framework commonly used to build interactive web applications. If you are building a web app and need users to browse months, select dates, or pick date ranges, this plugin gives you those UI components ready to drop in, without writing the calendar logic yourself. The calendar display lets you show one or multiple months side by side and annotate dates with visual markers. The README shows four types of markers: highlights, which put a colored block behind a date, dots and bars, which add small indicators below dates, and popovers, which show a small bubble with additional information when a user hovers or clicks. These are useful for marking events, deadlines, availability windows, or any other date-specific data in your application. The date-picker portion supports three selection modes: choosing a single date, choosing multiple individual dates at once, and choosing a date range with a start and end point. This covers the standard patterns you would find in forms for booking, scheduling, or filtering by time period. The plugin includes built-in support for theme colors and dark mode, with several color options shown in the README screenshots. Developers who need more control can use Vue's scoped slot mechanism to supply their own HTML for individual calendar cells, which allows custom layouts beyond what the default styles provide. Full documentation, installation instructions, and usage examples live on the external site vcalendar.io. The README in this repository is mostly screenshots and a single install command.

Copy-paste prompts

Prompt 1

I'm using v-calendar in my Vue.js app. Show me how to add a date range picker that stores the selected start and end dates in my component's data.

Prompt 2

Using v-calendar, how do I add colored dot markers to specific dates to indicate events from an array of objects?

Prompt 3

How do I enable dark mode in v-calendar and let users toggle between light and dark themes?

Prompt 4

Show me how to use v-calendar's scoped slots to put custom HTML inside each calendar day cell, for example showing an event count badge.

Prompt 5

I need a multi-date picker with v-calendar where users can click to select or deselect individual dates. How do I set that up and read the selected dates?

Open on GitHub → Explain another repo

← nathanreyes on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.