JSPM

@atiqisrak/shadcn-weekly-calendar

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q24332F
  • License MIT

A beautiful weekly calendar component for shadcn/ui with zoom functionality and event management

Package Exports

  • @atiqisrak/shadcn-weekly-calendar
  • @atiqisrak/shadcn-weekly-calendar/public/weekly-calendar.json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@atiqisrak/shadcn-weekly-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Weekly Calendar Component for shadcn/ui

A beautiful, responsive weekly calendar component with zoom functionality, event management, and hover cards for detailed event information.

Features

  • 📅 Weekly and Daily Views: Switch between weekly overview and detailed daily view
  • 🔍 Zoom Functionality: Click on any day to zoom into a detailed daily view
  • 📱 Mobile Responsive: Optimized for all screen sizes
  • 🎯 Event Hover Cards: Detailed event information on hover
  • 👥 Participant Avatars: Display event participants with avatars
  • 🏷️ Tags Support: Organize events with custom tags
  • ⏰ 12-hour Time Format: User-friendly time display
  • 🎨 Beautiful Design: Modern UI with smooth transitions

Installation

First, ensure you have a shadcn/ui project set up. Then install the component:

npx shadcn add https://raw.githubusercontent.com/atiqisrak/shadcn-weekly-calendar/main/public/weekly-calendar.json

Or if the package is published to NPM:

npx shadcn add https://unpkg.com/@atiqisrak/shadcn-weekly-calendar@latest/public/weekly-calendar.json

Option 2: Manual Installation

If you want to install manually:

  1. Install required dependencies:

    npm install lucide-react
npx shadcn add avatar button hover-card scroll-area

  2. Copy the component file to your project:

    # Create the component file
mkdir -p components/ui
# Copy weekly-calendar.tsx to components/ui/weekly-calendar.tsx

Option 3: Direct GitHub Installation

npx shadcn add https://raw.githubusercontent.com/atiqisrak/shadcn-weekly-calendar/main/public/weekly-calendar.json

This will automatically install the component and its dependencies:

  • @/components/ui/avatar
  • @/components/ui/button
  • @/components/ui/hover-card
  • @/components/ui/scroll-area
  • lucide-react icons

Usage

import {
  WeeklyCalendar,
  type WeeklyEvent,
} from "@/components/ui/weekly-calendar";

const events: WeeklyEvent[] = [
  {
    id: "1",
    title: "Weekly Team Meeting",
    description: "Discuss project progress and upcoming milestones",
    start: "2024-01-15T10:00:00",
    end: "2024-01-15T11:00:00",
    status: "confirmed",
    participants: [
      { id: "1", name: "John Doe", image: "/avatars/john.jpg" },
      { id: "2", name: "Jane Smith", image: "/avatars/jane.jpg" },
    ],
    tags: ["meeting", "team", "weekly"],
  },
];

export default function Calendar() {
  return <WeeklyCalendar events={events} height="600px" />;
}

Props

WeeklyCalendar

Prop Type Description
events WeeklyEvent[] Array of events to display
height string Height of the calendar container

WeeklyEvent

Property Type Required Description
id string ✅ Unique identifier
title string ✅ Event title
start string ✅ Start time (ISO string)
end string ✅ End time (ISO string)
description string ❌ Event description
participants Participant[] ❌ Event participants
status string ❌ Event status
tags string[] ❌ Event tags

Participant

Property Type Required Description
id string ✅ Unique identifier
name string ✅ Participant name
image string ❌ Avatar image URL

Features

  • Month Navigation: Navigate between months
  • Week Navigation: Navigate between weeks
  • Day Navigation: When zoomed in, navigate between days

Zoom Functionality

  • Click on any day header to zoom into detailed daily view
  • Click the zoom out button to return to weekly view
  • Automatic scrolling to 8 AM on zoom

Event Display

  • Events spanning multiple days are properly displayed
  • Hover cards show detailed event information
  • Participant avatars with fallback initials
  • Color-coded events based on type

Styling

The component uses Tailwind CSS and follows shadcn/ui design patterns. It includes:

  • Light/dark mode support
  • Responsive design
  • Smooth transitions and hover effects
  • Modern card-based layout

License

MIT