├── .prettierignore ├── .eslintrc.json ├── public ├── google6ca107cacc699cc9.html ├── og-calendar.png ├── vercel.svg └── next.svg ├── images ├── dark_day.png ├── dark_agenda.png ├── dark_month.png ├── dark_week.png ├── light_day.png ├── light_month.png ├── light_week.png └── light_agenda.png ├── src ├── app │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── lib │ └── utils.ts └── components │ ├── shadcn-big-calendar │ ├── shadcn-big-calendar.ts │ ├── event-form.tsx │ └── shadcn-big-calendar.css │ ├── theme │ ├── theme-provider.tsx │ └── theme-select.tsx │ ├── ui │ ├── label.tsx │ ├── input.tsx │ ├── popover.tsx │ ├── button.tsx │ ├── dialog.tsx │ ├── form.tsx │ └── dropdown-menu.tsx │ └── github-star-button.tsx ├── .prettierrc ├── next.config.mjs ├── postcss.config.mjs ├── .vscode └── settings.json ├── components.json ├── .gitignore ├── tsconfig.json ├── LICENSE ├── package.json ├── tailwind.config.ts └── README.md /.prettierignore: -------------------------------------------------------------------------------- 1 | .next 2 | node_modules 3 | README.md -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/google6ca107cacc699cc9.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google6ca107cacc699cc9.html -------------------------------------------------------------------------------- /images/dark_day.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/images/dark_day.png -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /images/dark_agenda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/images/dark_agenda.png -------------------------------------------------------------------------------- /images/dark_month.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/images/dark_month.png -------------------------------------------------------------------------------- /images/dark_week.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/images/dark_week.png -------------------------------------------------------------------------------- /images/light_day.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/images/light_day.png -------------------------------------------------------------------------------- /images/light_month.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/images/light_month.png -------------------------------------------------------------------------------- /images/light_week.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/images/light_week.png -------------------------------------------------------------------------------- /public/og-calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/public/og-calendar.png -------------------------------------------------------------------------------- /images/light_agenda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/list-jonas/shadcn-ui-big-calendar/HEAD/images/light_agenda.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": false 6 | } 7 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": false, 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll": "explicit", 6 | "source.organizeImports": "explicit" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/shadcn-big-calendar/shadcn-big-calendar.ts: -------------------------------------------------------------------------------- 1 | import { Calendar } from "react-big-calendar"; 2 | import "react-big-calendar/lib/addons/dragAndDrop/styles.css"; 3 | import "./shadcn-big-calendar.css"; 4 | 5 | const ShadcnBigCalendar = Calendar; 6 | 7 | export default ShadcnBigCalendar; 8 | -------------------------------------------------------------------------------- /src/components/theme/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { ThemeProvider as NextThemesProvider } from "next-themes"; 4 | import { type ThemeProviderProps } from "next-themes/dist/types"; 5 | 6 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 7 | return {children}; 8 | } 9 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | import { cva, type VariantProps } from "class-variance-authority" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const labelVariants = cva( 10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 11 | ) 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef & 16 | VariantProps 17 | >(({ className, ...props }, ref) => ( 18 | 23 | )) 24 | Label.displayName = LabelPrimitive.Root.displayName 25 | 26 | export { Label } 27 | -------------------------------------------------------------------------------- /src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Input = React.forwardRef>( 6 | ({ className, type, ...props }, ref) => { 7 | return ( 8 | 17 | ) 18 | } 19 | ) 20 | Input.displayName = "Input" 21 | 22 | export { Input } 23 | -------------------------------------------------------------------------------- /src/components/theme/theme-select.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Moon, Sun } from "lucide-react"; 4 | import { useTheme } from "next-themes"; 5 | 6 | import { Button, ButtonProps } from "@/components/ui/button"; 7 | 8 | type ThemeSelectProps = ButtonProps; 9 | 10 | export function ThemeSelect({ ...props }: ThemeSelectProps) { 11 | const { theme, setTheme } = useTheme(); 12 | 13 | const toggleTheme = () => { 14 | setTheme(theme === "dark" ? "light" : "dark"); 15 | }; 16 | 17 | return ( 18 | 23 | ); 24 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Jonas List and others 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/ui/popover.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as PopoverPrimitive from "@radix-ui/react-popover" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const Popover = PopoverPrimitive.Root 9 | 10 | const PopoverTrigger = PopoverPrimitive.Trigger 11 | 12 | const PopoverContent = React.forwardRef< 13 | React.ElementRef, 14 | React.ComponentPropsWithoutRef 15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( 16 | 17 | 27 | 28 | )) 29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName 30 | 31 | export { Popover, PopoverTrigger, PopoverContent } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shadcn-big-calendar", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint", 10 | "prettier": "prettier --write ." 11 | }, 12 | "dependencies": { 13 | "@hookform/resolvers": "^4.1.1", 14 | "@radix-ui/react-dialog": "^1.1.15", 15 | "@radix-ui/react-dropdown-menu": "^2.1.1", 16 | "@radix-ui/react-label": "^2.1.8", 17 | "@radix-ui/react-popover": "^1.1.6", 18 | "@radix-ui/react-slot": "^1.2.4", 19 | "@radix-ui/react-tooltip": "^1.1.2", 20 | "@vercel/analytics": "^1.3.1", 21 | "class-variance-authority": "^0.7.0", 22 | "lucide-react": "^0.424.0", 23 | "moment": "^2.30.1", 24 | "next": "14.2.5", 25 | "next-themes": "^0.3.0", 26 | "react": "^18", 27 | "react-big-calendar": "^1.13.2", 28 | "react-dom": "^18", 29 | "react-hook-form": "^7.54.2", 30 | "tailwind-merge": "^2.4.0", 31 | "tailwindcss-animate": "^1.0.7", 32 | "zod": "^3.24.2" 33 | }, 34 | "devDependencies": { 35 | "@types/node": "^20", 36 | "@types/react": "^18", 37 | "@types/react-big-calendar": "^1.8.9", 38 | "@types/react-dom": "^18", 39 | "eslint": "^8", 40 | "eslint-config-next": "14.2.5", 41 | "postcss": "^8", 42 | "prettier": "^3.3.3", 43 | "tailwindcss": "^3.4.1", 44 | "typescript": "^5" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import { Slot } from "@radix-ui/react-slot" 2 | import { cva, type VariantProps } from "class-variance-authority" 3 | import * as React from "react" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-primary text-primary-foreground hover:bg-primary/90", 13 | destructive: 14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 | outline: 16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 17 | secondary: 18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 19 | ghost: "hover:bg-accent hover:text-accent-foreground", 20 | link: "text-primary underline-offset-4 hover:underline", 21 | }, 22 | size: { 23 | default: "h-10 px-4 py-2", 24 | sm: "h-9 rounded-md px-3", 25 | lg: "h-11 rounded-md px-8", 26 | icon: "h-10 w-10", 27 | }, 28 | }, 29 | defaultVariants: { 30 | variant: "default", 31 | size: "default", 32 | }, 33 | } 34 | ) 35 | 36 | export interface ButtonProps 37 | extends React.ButtonHTMLAttributes, 38 | VariantProps { 39 | asChild?: boolean 40 | } 41 | 42 | const Button = React.forwardRef( 43 | ({ className, variant, size, asChild = false, ...props }, ref) => { 44 | const Comp = asChild ? Slot : "button" 45 | return ( 46 | 51 | ) 52 | } 53 | ) 54 | Button.displayName = "Button" 55 | 56 | export { Button, buttonVariants } 57 | -------------------------------------------------------------------------------- /src/components/github-star-button.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Star } from "lucide-react"; 4 | import Link from "next/link"; 5 | import { useEffect, useState } from "react"; 6 | import { Button } from "./ui/button"; 7 | 8 | interface GitHubStarButtonProps { 9 | className?: string; 10 | } 11 | 12 | const REPO_OWNER = "list-jonas"; 13 | const REPO_NAME = "shadcn-ui-big-calendar"; 14 | 15 | export function GitHubStarButton({ className }: GitHubStarButtonProps) { 16 | const [starCount, setStarCount] = useState(null); 17 | const [isLoading, setIsLoading] = useState(true); 18 | const [error, setError] = useState(null); 19 | 20 | useEffect(() => { 21 | const fetchStarCount = async () => { 22 | try { 23 | setIsLoading(true); 24 | const response = await fetch( 25 | `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}` 26 | ); 27 | 28 | if (!response.ok) { 29 | throw new Error(`GitHub API error: ${response.status}`); 30 | } 31 | 32 | const data = await response.json(); 33 | setStarCount(data.stargazers_count); 34 | setError(null); 35 | } catch (err) { 36 | console.error("Failed to fetch star count:", err); 37 | setError("Failed to load star count"); 38 | } finally { 39 | setIsLoading(false); 40 | } 41 | }; 42 | 43 | fetchStarCount(); 44 | }, []); 45 | 46 | return ( 47 | 69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 240 10% 3.9%; 9 | --card: 0 0% 100%; 10 | --card-foreground: 240 10% 3.9%; 11 | --popover: 0 0% 100%; 12 | --popover-foreground: 240 10% 3.9%; 13 | --primary: 240 5.9% 10%; 14 | --primary-foreground: 0 0% 98%; 15 | --secondary: 240 4.8% 95.9%; 16 | --secondary-foreground: 240 5.9% 10%; 17 | --muted: 240 4.8% 95.9%; 18 | --muted-foreground: 240 3.8% 46.1%; 19 | --accent: 240 4.8% 95.9%; 20 | --accent-foreground: 240 5.9% 10%; 21 | --destructive: 0 84.2% 60.2%; 22 | --destructive-foreground: 0 0% 98%; 23 | --border: 240 5.9% 90%; 24 | --input: 240 5.9% 90%; 25 | --ring: 240 5.9% 10%; 26 | --radius: 0.5rem; 27 | --chart-1: 12 76% 61%; 28 | --chart-2: 173 58% 39%; 29 | --chart-3: 197 37% 24%; 30 | --chart-4: 43 74% 66%; 31 | --chart-5: 27 87% 67%; 32 | } 33 | 34 | .dark { 35 | --background: 240 10% 3.9%; 36 | --foreground: 0 0% 98%; 37 | --card: 240 10% 3.9%; 38 | --card-foreground: 0 0% 98%; 39 | --popover: 240 10% 3.9%; 40 | --popover-foreground: 0 0% 98%; 41 | --primary: 0 0% 98%; 42 | --primary-foreground: 240 5.9% 10%; 43 | --secondary: 240 3.7% 15.9%; 44 | --secondary-foreground: 0 0% 98%; 45 | --muted: 240 3.7% 15.9%; 46 | --muted-foreground: 240 5% 64.9%; 47 | --accent: 240 3.7% 15.9%; 48 | --accent-foreground: 0 0% 98%; 49 | --destructive: 0 62.8% 30.6%; 50 | --destructive-foreground: 0 0% 98%; 51 | --border: 240 3.7% 15.9%; 52 | --input: 240 3.7% 15.9%; 53 | --ring: 240 4.9% 83.9%; 54 | --chart-1: 220 70% 50%; 55 | --chart-2: 160 60% 45%; 56 | --chart-3: 30 80% 55%; 57 | --chart-4: 280 65% 60%; 58 | --chart-5: 340 75% 55%; 59 | } 60 | } 61 | 62 | @layer base { 63 | * { 64 | @apply border-border; 65 | } 66 | body { 67 | @apply bg-background text-foreground; 68 | } 69 | } 70 | 71 | 72 | 73 | @layer base { 74 | * { 75 | @apply border-border outline-ring/50; 76 | } 77 | body { 78 | @apply bg-background text-foreground; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | const { fontFamily } = require("tailwindcss/defaultTheme"); 2 | import type { Config } from "tailwindcss"; 3 | 4 | const config = { 5 | darkMode: ["class"], 6 | content: [ 7 | "./pages/**/*.{ts,tsx}", 8 | "./components/**/*.{ts,tsx}", 9 | "./app/**/*.{ts,tsx}", 10 | "./src/**/*.{ts,tsx}", 11 | ], 12 | prefix: "", 13 | theme: { 14 | container: { 15 | center: true, 16 | padding: "2rem", 17 | screens: { 18 | "2xl": "1400px", 19 | }, 20 | }, 21 | extend: { 22 | fontFamily: { 23 | sans: ["var(--font-sans)", ...fontFamily.sans], 24 | }, 25 | colors: { 26 | border: "hsl(var(--border))", 27 | input: "hsl(var(--input))", 28 | ring: "hsl(var(--ring))", 29 | background: "hsl(var(--background))", 30 | foreground: "hsl(var(--foreground))", 31 | primary: { 32 | DEFAULT: "hsl(var(--primary))", 33 | foreground: "hsl(var(--primary-foreground))", 34 | }, 35 | secondary: { 36 | DEFAULT: "hsl(var(--secondary))", 37 | foreground: "hsl(var(--secondary-foreground))", 38 | }, 39 | destructive: { 40 | DEFAULT: "hsl(var(--destructive))", 41 | foreground: "hsl(var(--destructive-foreground))", 42 | }, 43 | muted: { 44 | DEFAULT: "hsl(var(--muted))", 45 | foreground: "hsl(var(--muted-foreground))", 46 | }, 47 | accent: { 48 | DEFAULT: "hsl(var(--accent))", 49 | foreground: "hsl(var(--accent-foreground))", 50 | }, 51 | popover: { 52 | DEFAULT: "hsl(var(--popover))", 53 | foreground: "hsl(var(--popover-foreground))", 54 | }, 55 | card: { 56 | DEFAULT: "hsl(var(--card))", 57 | foreground: "hsl(var(--card-foreground))", 58 | }, 59 | }, 60 | borderRadius: { 61 | lg: "var(--radius)", 62 | md: "calc(var(--radius) - 2px)", 63 | sm: "calc(var(--radius) - 4px)", 64 | }, 65 | keyframes: { 66 | "accordion-down": { 67 | from: { height: "0" }, 68 | to: { height: "var(--radix-accordion-content-height)" }, 69 | }, 70 | "accordion-up": { 71 | from: { height: "var(--radix-accordion-content-height)" }, 72 | to: { height: "0" }, 73 | }, 74 | }, 75 | animation: { 76 | "accordion-down": "accordion-down 0.2s ease-out", 77 | "accordion-up": "accordion-up 0.2s ease-out", 78 | }, 79 | }, 80 | }, 81 | plugins: [require("tailwindcss-animate")], 82 | } satisfies Config; 83 | 84 | export default config; 85 | -------------------------------------------------------------------------------- /src/components/shadcn-big-calendar/event-form.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Button } from "@/components/ui/button"; 4 | import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form"; 5 | import { Input } from "@/components/ui/input"; 6 | import { zodResolver } from "@hookform/resolvers/zod"; 7 | import { useForm } from "react-hook-form"; 8 | import * as z from "zod"; 9 | 10 | const formSchema = z.object({ 11 | title: z.string().min(1, "Title is required"), 12 | start: z.string(), 13 | end: z.string(), 14 | variant: z.enum(["primary", "secondary", "outline"]), 15 | }); 16 | 17 | type EventFormProps = { 18 | start: Date; 19 | end: Date; 20 | onSubmit: (data: z.infer) => void; 21 | onCancel: () => void; 22 | }; 23 | 24 | export function EventForm({ start, end, onSubmit, onCancel }: EventFormProps) { 25 | const form = useForm>({ 26 | resolver: zodResolver(formSchema), 27 | defaultValues: { 28 | title: "", 29 | start: start.toISOString().slice(0, 16), 30 | end: end.toISOString().slice(0, 16), 31 | variant: "primary", 32 | }, 33 | }); 34 | 35 | return ( 36 |
37 | 38 | ( 42 | 43 | Event Title 44 | 45 | 46 | 47 | 48 | )} 49 | /> 50 | ( 54 | 55 | Style 56 | 57 | 65 | 66 | 67 | )} 68 | /> 69 | ( 73 | 74 | Start Time 75 | 76 | 77 | 78 | 79 | )} 80 | /> 81 | ( 85 | 86 | End Time 87 | 88 | 89 | 90 | 91 | )} 92 | /> 93 |
94 | 97 | 98 |
99 | 100 | 101 | ); 102 | } 103 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import { GitHubStarButton } from "@/components/github-star-button"; 2 | import { ThemeProvider } from "@/components/theme/theme-provider"; 3 | import { ThemeSelect } from "@/components/theme/theme-select"; 4 | import { cn } from "@/lib/utils"; 5 | import { TooltipProvider } from "@radix-ui/react-tooltip"; 6 | import { Analytics } from "@vercel/analytics/react"; 7 | import type { Metadata } from "next"; 8 | import { Inter as FontSans } from "next/font/google"; 9 | import Link from "next/link"; 10 | import "./globals.css"; 11 | 12 | const fontSans = FontSans({ 13 | subsets: ["latin"], 14 | variable: "--font-sans", 15 | }); 16 | 17 | const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000"; 18 | 19 | export const metadata: Metadata = { 20 | title: "Shadcn Big Calendar | Drag-and-drop scheduling UI", 21 | description: 22 | "Open source drag-and-drop calendar built with Next.js, shadcn/ui, and react-big-calendar. Resize events, toggle themes, and explore accessible scheduling patterns.", 23 | metadataBase: new URL(siteUrl), 24 | keywords: [ 25 | "shadcn", 26 | "react big calendar", 27 | "drag and drop calendar", 28 | "nextjs calendar", 29 | "scheduling ui", 30 | "calendar component", 31 | "accessible calendar", 32 | ], 33 | authors: [{ name: "Jonas List", url: "https://jonas-list.vercel.app/" }], 34 | creator: "Jonas List", 35 | openGraph: { 36 | title: "Shadcn Big Calendar | Drag-and-drop scheduling UI", 37 | description: 38 | "A themed React Big Calendar demo with shadcn/ui components, draggable events, and responsive layouts.", 39 | type: "website", 40 | images: ["/og-calendar.png"], 41 | }, 42 | twitter: { 43 | card: "summary_large_image", 44 | title: "Shadcn Big Calendar | Drag-and-drop scheduling UI", 45 | description: 46 | "Explore a styled React Big Calendar with drag-and-drop, event resizing, and light/dark theme support.", 47 | images: ["/og-calendar.png"], 48 | }, 49 | }; 50 | 51 | export default function RootLayout({ 52 | children, 53 | }: Readonly<{ 54 | children: React.ReactNode; 55 | }>) { 56 | return ( 57 | 58 | 64 | 65 | 66 | 72 | 83 | {children} 84 |
85 |
86 |

87 | © {new Date().getFullYear()}{" "} 88 | Jonas List 89 |

90 |

91 | 95 | Original Big Calendar 96 | 97 | | 98 | 99 | Shadcn/ui 100 | 101 |

102 |
103 |
104 | 105 | 106 | 107 | 108 | ); 109 | } 110 | -------------------------------------------------------------------------------- /src/components/ui/dialog.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as DialogPrimitive from "@radix-ui/react-dialog" 5 | import { X } from "lucide-react" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const Dialog = DialogPrimitive.Root 10 | 11 | const DialogTrigger = DialogPrimitive.Trigger 12 | 13 | const DialogPortal = DialogPrimitive.Portal 14 | 15 | const DialogClose = DialogPrimitive.Close 16 | 17 | const DialogOverlay = React.forwardRef< 18 | React.ElementRef, 19 | React.ComponentPropsWithoutRef 20 | >(({ className, ...props }, ref) => ( 21 | 29 | )) 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName 31 | 32 | const DialogContent = React.forwardRef< 33 | React.ElementRef, 34 | React.ComponentPropsWithoutRef 35 | >(({ className, children, ...props }, ref) => ( 36 | 37 | 38 | 46 | {children} 47 | 48 | 49 | Close 50 | 51 | 52 | 53 | )) 54 | DialogContent.displayName = DialogPrimitive.Content.displayName 55 | 56 | const DialogHeader = ({ 57 | className, 58 | ...props 59 | }: React.HTMLAttributes) => ( 60 |
67 | ) 68 | DialogHeader.displayName = "DialogHeader" 69 | 70 | const DialogFooter = ({ 71 | className, 72 | ...props 73 | }: React.HTMLAttributes) => ( 74 |
81 | ) 82 | DialogFooter.displayName = "DialogFooter" 83 | 84 | const DialogTitle = React.forwardRef< 85 | React.ElementRef, 86 | React.ComponentPropsWithoutRef 87 | >(({ className, ...props }, ref) => ( 88 | 96 | )) 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName 98 | 99 | const DialogDescription = React.forwardRef< 100 | React.ElementRef, 101 | React.ComponentPropsWithoutRef 102 | >(({ className, ...props }, ref) => ( 103 | 108 | )) 109 | DialogDescription.displayName = DialogPrimitive.Description.displayName 110 | 111 | export { 112 | Dialog, 113 | DialogPortal, 114 | DialogOverlay, 115 | DialogClose, 116 | DialogTrigger, 117 | DialogContent, 118 | DialogHeader, 119 | DialogFooter, 120 | DialogTitle, 121 | DialogDescription, 122 | } 123 | -------------------------------------------------------------------------------- /src/components/ui/form.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | import { Slot } from "@radix-ui/react-slot" 6 | import { 7 | Controller, 8 | ControllerProps, 9 | FieldPath, 10 | FieldValues, 11 | FormProvider, 12 | useFormContext, 13 | } from "react-hook-form" 14 | 15 | import { cn } from "@/lib/utils" 16 | import { Label } from "@/components/ui/label" 17 | 18 | const Form = FormProvider 19 | 20 | type FormFieldContextValue< 21 | TFieldValues extends FieldValues = FieldValues, 22 | TName extends FieldPath = FieldPath 23 | > = { 24 | name: TName 25 | } 26 | 27 | const FormFieldContext = React.createContext( 28 | {} as FormFieldContextValue 29 | ) 30 | 31 | const FormField = < 32 | TFieldValues extends FieldValues = FieldValues, 33 | TName extends FieldPath = FieldPath 34 | >({ 35 | ...props 36 | }: ControllerProps) => { 37 | return ( 38 | 39 | 40 | 41 | ) 42 | } 43 | 44 | const useFormField = () => { 45 | const fieldContext = React.useContext(FormFieldContext) 46 | const itemContext = React.useContext(FormItemContext) 47 | const { getFieldState, formState } = useFormContext() 48 | 49 | const fieldState = getFieldState(fieldContext.name, formState) 50 | 51 | if (!fieldContext) { 52 | throw new Error("useFormField should be used within ") 53 | } 54 | 55 | const { id } = itemContext 56 | 57 | return { 58 | id, 59 | name: fieldContext.name, 60 | formItemId: `${id}-form-item`, 61 | formDescriptionId: `${id}-form-item-description`, 62 | formMessageId: `${id}-form-item-message`, 63 | ...fieldState, 64 | } 65 | } 66 | 67 | type FormItemContextValue = { 68 | id: string 69 | } 70 | 71 | const FormItemContext = React.createContext( 72 | {} as FormItemContextValue 73 | ) 74 | 75 | const FormItem = React.forwardRef< 76 | HTMLDivElement, 77 | React.HTMLAttributes 78 | >(({ className, ...props }, ref) => { 79 | const id = React.useId() 80 | 81 | return ( 82 | 83 |
84 | 85 | ) 86 | }) 87 | FormItem.displayName = "FormItem" 88 | 89 | const FormLabel = React.forwardRef< 90 | React.ElementRef, 91 | React.ComponentPropsWithoutRef 92 | >(({ className, ...props }, ref) => { 93 | const { error, formItemId } = useFormField() 94 | 95 | return ( 96 |