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

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

Loading…
Cancel
Save