n-calendar

Provides a reusable Naive UI calendar component with timestamp-based date selection and month navigation.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-calendar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: n-calendar
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-calendar
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-calendar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Calendar component for displaying and selecting dates within Naive UI-based applications, enabling date-driven interfaces without building from scratch.

Core Features & Use Cases

  • Date Selection: Bind to a timestamp value and select dates with smooth interactions.
  • Custom Content & Navigation: Render custom content per date and navigate between months/years.
  • Use Cases: Build scheduling views, event calendars, and date-based dashboards that require header customization and date disablement.

Quick Start

Instantiate an n-calendar bound to a reactive timestamp and customize the header and cells to fit your UI.

Frequently Asked Questions about n-calendar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a date picker to a Vue application using Naive UI?

To add a date picker in a Vue application, use a reusable calendar component designed for Naive UI. It binds to a timestamp value for date selection and supports panel navigation, allowing you to integrate date-driven UI flows without building from scratch.

Can I render custom content inside individual date cells for an event calendar?

Yes, you can render custom content inside individual date cells for an event calendar. The component supports custom per-date content via slots, enabling you to display event details or scheduling information directly within the calendar interface.

How do I disable specific dates in a Vue calendar component?

You can disable specific dates in a Vue calendar component using its built-in date disablement feature. This allows you to prevent users from selecting restricted dates, ensuring valid inputs for scheduling dashboards and event planning workflows.

Does the Naive UI calendar component support timestamp-based values for date selection?

Yes, the Naive UI calendar component supports timestamp-based values for date selection. You bind the component to a reactive timestamp, and it handles the date display and update callbacks automatically for accurate data binding.

What is the best way to customize the header of a scheduling dashboard calendar?

The best way to customize a scheduling dashboard calendar header is using the component's header customization capabilities. This feature allows you to tailor the navigation interface to fit your specific UI requirements and application design.

Can I use this calendar component to build month navigation panels in Vue?

Yes, you can use this calendar component to build month navigation panels in Vue. It supports panel navigation and month navigation, allowing users to smoothly switch between months and years within your application's scheduling views.