set width calendar full and responsive

app/component/date/datePicker/index.js

@@ -2,8 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
-import Image from "next/image";
-import { Button, Skeleton } from "@mui/material";
+import { Skeleton } from "@mui/material";
 import NextIconDatePicker from "./NextIconDatePicker";
 import PrevIconDatePicker from "./PrevIconDatePicker";
 
@@ -18,16 +17,14 @@ function DatePicker({ date, updateDate }) {
   const handleStartDateChange = (date) => {
     if (date) {
       setStartDate(date);
-      setEndDate(null); // Clear end date if start date is selected
-      // updateDate(date); // Notify parent about the selected date
+      setEndDate(null);
     }
   };
 
   const handleEndDateChange = (date) => {
     if (date) {
       setEndDate(date);
-      setStartDate(null); // Clear start date if end date is selected
-      // updateDate(date); // Notify parent about the selected date
+      setStartDate(null);
     }
   };
 
@@ -44,7 +41,7 @@ function DatePicker({ date, updateDate }) {
   }, [nextIconDatePicker]);
 
   return (
-    <div className="flex items-start justify-evenly w-full">
+    <div className="flex items-start custom-datepicker justify-evenly w-full">
       <div className="w-full md:w-1/2 lg:w-full xl:w-1/2 relative flex justify-center">
         <DatePickerJalali
           value={startDate}

app/globals.css

@@ -374,6 +374,30 @@ html {
 
 /* Date Picker Style */
 
+.custom-datepicker .panel-jalaali,
+.custom-datepicker .panel-jalaali .panel-header-inner,
+.custom-datepicker .panel-jalaali .day-label-bar,
+.custom-datepicker .panel-jalaali .days-body {
+  width: 100%;
+  max-width: 100%;
+}
+
+.custom-datepicker .panel-jalaali .day-label-bar-inner-rtl {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(7, minmax(14.28%, 38px));
+  margin: 0;
+  padding: 0;
+}
+
+.custom-datepicker .panel-jalaali .day-label-bar-inner-rtl .day-label-item {
+  width: 100%;
+}
+
+.custom-datepicker .panel-jalaali .days-body {
+  grid-template-columns: repeat(7, minmax(14.28%, 38px));
+}
+
 .panel-elevation {
   box-shadow: none !important;
   border: none;