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