update src/components/Datepicker/CalenderList/index.js and src/components/Datepicker/index.js

master
mahdi andalib 2 years ago
parent cf505f0377
commit 7940eebde5
  1. 38
      src/components/Datepicker/Calender/index.js
  2. 42
      src/components/Datepicker/CalenderList/index.js
  3. 6
      src/components/Datepicker/index.js

@ -0,0 +1,38 @@
import React from "react";
import { Calendar } from "react-multi-date-picker";
import persian from "react-date-object/calendars/persian";
import persian_fa from "react-date-object/locales/persian_fa";
const weekDays = [
"شنبه",
"یکشنبه",
"دوشنبه",
"سشنبه",
"چهارشنبه",
"پنجشنبه",
"جمعه",
];
const Calender = () => {
return (
<div className="calender-list">
<Calendar
mapDays={({ date }) => {
let props = {};
let isWeekend = date.weekDay.index === 6;
if (isWeekend) props.className = "highlight highlight-red";
return props;
}}
weekDays={weekDays}
arrow={false}
calendar={persian}
locale={persian_fa}
/>
</div>
);
};
export default Calender;

@ -1,36 +1,22 @@
import React from "react";
import { Calendar } from "react-multi-date-picker";
import persian from "react-date-object/calendars/persian";
import persian_fa from "react-date-object/locales/persian_fa";
const weekDays = [
"شنبه",
"یکشنبه",
"دوشنبه",
"سشنبه",
"چهارشنبه",
"پنجشنبه",
"جمعه",
];
import Calender from "../Calender";
const CalenderList = () => {
return (
<div className="calender-list">
<Calendar
mapDays={({ date }) => {
let props = {};
let isWeekend = date.weekDay.index === 6;
if (isWeekend) props.className = "highlight highlight-red";
return props;
}}
weekDays={weekDays}
arrow={false}
calendar={persian}
locale={persian_fa}
/>
<div className="bg-surface rounded p-4 w-full flex flex-wrap space-between gap-5">
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
<Calender />
</div>
);
};

@ -5,14 +5,16 @@ import RangeDatePicker from "./RangeDatePicker";
import SimpleCalendar from "./SimpleCalendar";
import SimpleDatePicker from "./SimpleDatePicker";
import CalenderList from "./CalenderList";
import Calender from "./Calender";
function Calender() {
function Datepicker() {
const list = {
1: <DateRangePicker />,
2: <RangeDatePicker />,
3: <SimpleCalendar />,
4: <SimpleDatePicker />,
5: <CalenderList />,
6: <Calender />,
};
const [type, setType] = useState(1);
return (
@ -30,4 +32,4 @@ function Calender() {
);
}
export default Calender;
export default Datepicker;

Loading…
Cancel
Save