You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.8 KiB
127 lines
2.8 KiB
3 years ago
|
import React, { useState } from "react";
|
||
|
import "./index.css";
|
||
|
import Calendar from "./CalendarComponents/Calendar";
|
||
|
import { utils } from "./CalendarComponents";
|
||
|
|
||
|
import "./index.css";
|
||
|
|
||
|
const SimpleCalendar = () => {
|
||
|
const [selectedDay, setSelectedDay] = useState(null);
|
||
|
const [type, setType] = useState("dashboard");
|
||
|
const list = {
|
||
|
default: (
|
||
|
<Calendar
|
||
|
value={selectedDay}
|
||
|
onChange={setSelectedDay}
|
||
|
shouldHighlightWeekends
|
||
|
renderFooter={() => (
|
||
|
<center>
|
||
|
<button
|
||
|
className="GoToTodayButton"
|
||
|
onClick={() => setSelectedDay(utils("fa").getToday())}
|
||
|
>
|
||
|
{" "}
|
||
|
امروز{" "}
|
||
|
</button>
|
||
|
</center>
|
||
|
)}
|
||
|
locale="fa"
|
||
|
events={eventsList}
|
||
|
/>
|
||
|
),
|
||
|
dashboard: (
|
||
|
<Calendar
|
||
|
value={selectedDay}
|
||
|
onChange={setSelectedDay}
|
||
|
shouldHighlightWeekends
|
||
|
locale="fa"
|
||
|
events={eventsList}
|
||
|
type="dashboard"
|
||
|
/>
|
||
|
),
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<div className="flex flex-col items-center justify-center w-full my-2">
|
||
|
{/* <Calendar
|
||
|
value={selectedDay}
|
||
|
onChange={setSelectedDay}
|
||
|
shouldHighlightWeekends
|
||
|
renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>}
|
||
|
locale="fa"
|
||
|
events={eventsList}
|
||
|
type='dashboard'
|
||
|
/> */}
|
||
|
|
||
|
<select
|
||
|
className="mb-10 w-32 bg-gray-200"
|
||
|
onChange={(e) => setType(e.target.value)}
|
||
|
>
|
||
|
{Object.keys(list).map((option, index) => (
|
||
|
<option key={index}>{option}</option>
|
||
|
))}
|
||
|
</select>
|
||
|
{list[type]}
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
const eventsList = [
|
||
|
{
|
||
|
id: 2,
|
||
|
description: "تست 2",
|
||
|
type: "global",
|
||
|
isHoliday: true,
|
||
|
date: "2022-01-04T00:00:00.000Z",
|
||
|
year: 1400,
|
||
|
month: 10,
|
||
|
day: 2,
|
||
|
},
|
||
|
{
|
||
|
id: 4,
|
||
|
description: "تست 4",
|
||
|
type: "global",
|
||
|
isHoliday: true,
|
||
|
date: "2022-01-12T00:00:00.000Z",
|
||
|
year: 1400,
|
||
|
month: 10,
|
||
|
day: 1,
|
||
|
},
|
||
|
{
|
||
|
id: 1,
|
||
|
description: "تست کاربر 1",
|
||
|
type: "userDefined",
|
||
|
userId: "5",
|
||
|
date: "2022-01-12T00:00:00.000Z",
|
||
|
categoryId: 1,
|
||
|
year: 1400,
|
||
|
month: 10,
|
||
|
day: 3,
|
||
|
color: "blue",
|
||
|
},
|
||
|
{
|
||
|
id: 4,
|
||
|
description: "تست کاربر 4",
|
||
|
type: "userDefined",
|
||
|
userId: "5",
|
||
|
date: "2022-01-08T00:00:00.000Z",
|
||
|
categoryId: 3,
|
||
|
year: 1400,
|
||
|
month: 11,
|
||
|
day: 6,
|
||
|
},
|
||
|
{
|
||
|
id: 5,
|
||
|
description: "تست کاربر 5",
|
||
|
type: "userDefined",
|
||
|
userId: "5",
|
||
|
date: "2022-01-12T00:00:00.000Z",
|
||
|
categoryId: 1,
|
||
|
year: 1400,
|
||
|
month: 10,
|
||
|
day: 3,
|
||
|
},
|
||
|
];
|
||
|
|
||
|
export default SimpleCalendar;
|