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.
126 lines
2.8 KiB
126 lines
2.8 KiB
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;
|
|
|