From d4a95ce32eca2205a65203ecfd18026305c7faab Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Thu, 26 Sep 2024 18:12:15 +0330
Subject: [PATCH] set width calendar full and responsive

---
 app/component/date/datePicker/index.js | 11 ++++-------
 app/globals.css                        | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/component/date/datePicker/index.js b/app/component/date/datePicker/index.js
index e7d5dbf..651ac79 100644
--- a/app/component/date/datePicker/index.js
+++ b/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}
diff --git a/app/globals.css b/app/globals.css
index 4e7beeb..8ed587e 100644
--- a/app/globals.css
+++ b/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;