Vue calendar blocks.

100 calendar sections: month, week and year views, agendas and timelines, booking pages, availability, deadlines, team schedules and the pickers around a calendar. The gallery sorts them into 13 groups: Month, week and year, Agendas and timelines, Book a person, Book a place, Projects and phases, Content and releases, Teams and time off, Health and training, Home and care, Study and goals, Events and occasions, Money and deadlines, Pickers and settings.

For a month grid use Monthly View Calendar, and for a week Weekly Planner Calendar or Compact Week Calendar. For booking a time use Booking Slots Calendar, for the host's opening hours Availability Picker Calendar, and for a list of upcoming events Agenda List Calendar. For reports use Date Range Picker Calendar, and for recurring events Recurring Events Calendar.

No library handles your events. A few blocks use the catalog Calendar component, which is built on react-day-picker, and the others are hand-built tables and lists. Sync Settings Calendar draws the settings for Google Calendar, Outlook and iCloud, but it connects to nothing and says so.

No. None reads the clock or the device's time zone: each works from fixed dates written in its file, often a 'now' such as 14 October 2026, so the preview never goes stale and the server and browser agree. In your app replace those constants with the real date.

Monthly View Calendar reads an EVENTS array of objects with a date (ISO), a start time or empty for all-day, a title, a place and a mark. Map your database rows into that shape and set FIRST_MONTH and LAST_MONTH to the range you load. The pills, the "+2 more" overflow and the day panel are built from the array.

The blocks do not use the Intl time zone database. Time Zone Converter Calendar gives each city one fixed offset from UTC in minutes for a window of days and refuses dates outside it, and Event Details Calendar restates an event from typed offsets without daylight saving rules. In your app store events in UTC and convert with Intl.DateTimeFormat and a timeZone option, or a date library.

Booking Slots Calendar offers a start only when it fits the opening hours, is at least four hours away, avoids every busy entry and keeps a 15-minute buffer, using constants such as NOTICE_MIN, BUFFER_MIN and a BUSY list. Replace those with your hours and your booked times from the database, and call your server in the Confirm step to create the booking, since the block books nothing.

Event Details Calendar has an Add to calendar button that builds and saves a real one-event .ics file, and a Copy link button. Fill the event's start, end, title and place from your record and the file follows. Google, Outlook and Apple calendars all open an .ics file.

Drag Schedule Calendar does: drag a block by its grip with a pointer, or lift it with Space, move it in 30-minute steps with the arrow keys, and drop it with Space or cancel with Escape. A move that would overlap another block is refused and says which one, and every move is announced. Save the new time from its move handler.

This page lists 100 of the category's 100 calendar blocks for Vue. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Vue calendar blocks are the React ones ported to Vue, on Ark UI's Vue primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-vue (/r/vue/calendar-agenda-list.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Vue needs vue @ark-ui/vue lucide-vue-next installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-vue@latest add` with the block's registry URL, such as /r/vue/calendar-agenda-list.json for Agenda List Calendar. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 13 kinds of calendar block, led by events and occasions (12), teams and time off (11), home and care (10) and book a person (9), and sort by popular or name. A good first look: Agenda List Calendar, Appointment Queue Calendar and Availability Picker Calendar. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a calendar block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the views, booking and scheduling and work and projects kinds.

Open its page and use the full-screen viewer (/view/calendar/vue/agenda-list) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each calendar block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the calendar blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 calendar blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a calendar block, read it with get_block and install it on your Vue stack.

Pass `category: "calendar"` to search_blocks to search only the 100 calendar blocks, or to list_blocks for the 13 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "calendar", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.