質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

Q&A

解決済

1回答

446閲覧

shadcn/uiのCalendarコンポーネントの表示がおかしい

hibiki1023k

総合スコア1

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

0グッド

0クリップ

投稿2024/04/23 14:31

実現したいこと

shadcn/uiでCalendarコンポーネントを想定通りに表示する

前提

JavaScript+Next.jsで勤怠管理アプリを作成しています。
shadcn/uiのDate Pickerを実装途中にCalendarが思ったように表示されていないことに気づきました。
↓実際の様子
イメージ説明

該当のソースコード

jsx

1import { Button } from "@/components/ui/button"; 2import { Input } from "@/components/ui/input"; 3import { 4 Card, 5 CardContent, 6 CardFooter, 7 CardHeader, 8 CardTitle, 9 CardDescription 10} from "@/components/ui/card"; 11import { Calendar } from "@/components/ui/calendar"; 12import { Calendar as CalendarIcon } from "lucide-react"; 13import { format } from "date-fns"; 14import { Label } from "@/components/ui/label"; 15import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; 16import { cn } from "@/lib/utils"; 17import { useRouter } from "next/router"; 18import React, { useState, useEffect } from "react"; 19import LoadingProgress from "./../../components/Progress"; 20import ja from 'date-fns/locale/ja'; 21 22export default function Register() { 23 // 関数部分 24 return ( 25 <div className="flex flex-col justify-center items-center min-h-screen bg-gray-100"> 26 <Card className="w-[320px] bg-white p-4 rounded-lg shadow-md"> 27 <CardHeader className="pb-2"> 28 <CardTitle className="justify-center"> 29 {user?.name} 30 </CardTitle> 31 <CardDescription> 32 開始時刻、終了時刻を指定してください 33 </CardDescription> 34 </CardHeader> 35 <CardContent> 36 {/* TODO: Calendarから日付を取得する */} 37 <div className="flex flex-col space-y-1.5"> 38 <Label htmlFor="date">日付</Label> 39 <Popover> 40 <PopoverTrigger asChild> 41 <Button variant="outline" className={cn("w-[280px] justify-start text-left font-normal", !date && "text-muted-foreground")}> 42 <CalendarIcon className="mr-2 h-4 w-4" /> 43 {date ? format(date, "PPP(E)", { locale:ja }) : "日付を選択して下さい"} 44 </Button> 45 </PopoverTrigger> 46 <PopoverContent className="w-[300px] p-0"> 47 <Calendar 48 className="rounded-md border" 49 mode="single" 50 selected={date} 51 onSelect={handleDateChange} 52 initialFocus 53 /> 54 </PopoverContent> 55 </Popover> 56 </div> 57 <div className="flex flex-col space-y-1.5"> 58 <Label htmlFor="start">開始時刻</Label> 59 <Input 60 type="time" 61 value={start} 62 onChange={(e) => setStart(e.target.value)} 63 /> 64 </div> 65 <div className="flex flex-col space-y-1.5"> 66 <Label htmlFor="end">終了時刻</Label> 67 <Input 68 type="time" 69 value={end} 70 onChange={(e) => setEnd(e.target.value)} 71 /> 72 </div> 73 {/* TODO: toastを使った登録完了通知、punchOut使用しない */} 74 <CardFooter className="justify-center pt-4 pb-2"> 75 <Button className="mr-4 pr-4" onClick={handleSubmit}>登録</Button> 76 <Button className="ml-4 pl-4" 77 onClick={() => 78 router.push('./../attendChoice') 79 } 80 > 81 戻る 82 </Button> 83 </CardFooter> 84 </CardContent> 85 </Card> 86 </div> 87 ); 88} 89

試したこと

新規プロジェクトで同じコードを実装したところ、公式ページ通りの表示になりました。
また、依存関係が原因である可能性があったのでnode_modulesとpackage-lock.jsonの再インストールを行いました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

shadcn/uiのComponentsを入れていたディレクトリがtailwind.config.jsで含まれていませんでした。
Componentsを追加するときにエイリアス等の設定がうまく行っておらず~/@/components/uiと~/src/componentsがの両方が存在していたことが原因だと思われます。

投稿2024/04/24 15:29

hibiki1023k

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問