How can I make my calendar occupy the half of my website? using Shadcn

Question

I'm trying to create a scheduling appointment system, I'm trying to make the calendar occupy the half of my page, but even though I tried to increase it's height and width, it doesn't change anything.

Home.tsx

import { Calendar } from '@/components/ui/calendar'
import React from 'react'

export default function Home() {
  return (
    <div className='w-full  px-8'>
      <div className='flex gap-x-2'>
          <div className='flex-1 h-[650px] w-full  bg-blue-200'>
            <Calendar className='h-full w-full' />
          </div>
          <div className='flex-1'>2</div>
      </div>
    </div>
  )
}

Answer 1

You need to modify your Home.tsx as per bellow:

import { Calendar } from "@/components/ui/calendar";
import React from "react";

export default function Home() {
  return (
    <div className="w-full  px-8">
      <div className="flex gap-x-2">
        <div className="flex-1 h-[650px] w-full  bg-blue-200">
          <Calendar
            className="h-full w-full flex"
            classNames={{
              months:
                "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
              month: "space-y-4 w-full flex flex-col",
              table: "w-full h-full border-collapse space-y-1",
              head_row: "",
              row: "w-full mt-2",
            }}
          />
        </div>
        <div className="flex-1">2</div>
      </div>
    </div>
  );
}

For more details your can refer the docs here

Answer 2

If you want to keep the margin between the calendar week rows, use the following code:

import { buttonVariants } from '@/components/ui/button';
import { Calendar } from "@/components/ui/calendar";
import React from "react";

export default function Home() {
  return (
    <div className="w-full px-8">
      <div className="flex gap-x-2">
        <div className="flex-1 h-[650px] w-full bg-blue-200">
          <Calendar
            className="h-full w-full flex"
            classNames={{
                months: 'flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1',
                month: 'space-y-4 w-full flex flex-col',
                table: 'w-full h-full border-collapse space-y-1',
                head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem] w-full',
                cell: cn(
                    '[&:has([aria-selected])]:bg-accent relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected].day-range-end)]:rounded-r-md',
                    '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md',
                    'w-full',
                ),
                day: cn(
                    buttonVariants({ variant: 'ghost' }),
                    'size-8 w-full p-0 font-normal aria-selected:opacity-100',
                ),
            }}
          />
        </div>
        <div className="flex-1">2</div>
      </div>
    </div>
  );
}