|
|
|
@ -1,37 +1,48 @@ |
|
|
|
|
import React, { useState } from "react"; |
|
|
|
|
import './index.css'; |
|
|
|
|
import "./index.css"; |
|
|
|
|
import Calendar from "./CalendarComponents/Calendar"; |
|
|
|
|
import { utils } from "./CalendarComponents"; |
|
|
|
|
|
|
|
|
|
import './index.css'; |
|
|
|
|
import "./index.css"; |
|
|
|
|
|
|
|
|
|
const SimpleCalendar = () => { |
|
|
|
|
const [selectedDay, setSelectedDay] = useState(null); |
|
|
|
|
const [type, setType] = useState('dashboard'); |
|
|
|
|
const [type, setType] = useState("dashboard"); |
|
|
|
|
const list = { |
|
|
|
|
'default': <Calendar |
|
|
|
|
default: ( |
|
|
|
|
<Calendar |
|
|
|
|
value={selectedDay} |
|
|
|
|
onChange={setSelectedDay} |
|
|
|
|
shouldHighlightWeekends |
|
|
|
|
renderFooter={() => <center><button className="GoToTodayButton" onClick={() => setSelectedDay(utils('fa').getToday())}> امروز </button></center>} |
|
|
|
|
renderFooter={() => ( |
|
|
|
|
<center> |
|
|
|
|
<button |
|
|
|
|
className="GoToTodayButton" |
|
|
|
|
onClick={() => setSelectedDay(utils("fa").getToday())} |
|
|
|
|
> |
|
|
|
|
{" "} |
|
|
|
|
امروز{" "} |
|
|
|
|
</button> |
|
|
|
|
</center> |
|
|
|
|
)} |
|
|
|
|
locale="fa" |
|
|
|
|
events={eventsList} |
|
|
|
|
|
|
|
|
|
/>, |
|
|
|
|
'dashboard': <Calendar |
|
|
|
|
/> |
|
|
|
|
), |
|
|
|
|
dashboard: ( |
|
|
|
|
<Calendar |
|
|
|
|
value={selectedDay} |
|
|
|
|
onChange={setSelectedDay} |
|
|
|
|
shouldHighlightWeekends |
|
|
|
|
|
|
|
|
|
locale="fa" |
|
|
|
|
events={eventsList} |
|
|
|
|
type='dashboard' |
|
|
|
|
/>, |
|
|
|
|
} |
|
|
|
|
type="dashboard" |
|
|
|
|
/> |
|
|
|
|
), |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="flex flex-col items-center justify-center w-full my-2"> |
|
|
|
|
|
|
|
|
|
{/* <Calendar |
|
|
|
|
value={selectedDay} |
|
|
|
|
onChange={setSelectedDay} |
|
|
|
@ -42,14 +53,15 @@ const SimpleCalendar = () => { |
|
|
|
|
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 |
|
|
|
|
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] |
|
|
|
|
} |
|
|
|
|
{list[type]} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
@ -63,7 +75,7 @@ const eventsList = [ |
|
|
|
|
date: "2022-01-04T00:00:00.000Z", |
|
|
|
|
year: 1400, |
|
|
|
|
month: 10, |
|
|
|
|
day: 2 |
|
|
|
|
day: 2, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 4, |
|
|
|
@ -73,7 +85,7 @@ const eventsList = [ |
|
|
|
|
date: "2022-01-12T00:00:00.000Z", |
|
|
|
|
year: 1400, |
|
|
|
|
month: 10, |
|
|
|
|
day: 1 |
|
|
|
|
day: 1, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
@ -85,7 +97,7 @@ const eventsList = [ |
|
|
|
|
year: 1400, |
|
|
|
|
month: 10, |
|
|
|
|
day: 3, |
|
|
|
|
color: 'blue' |
|
|
|
|
color: "blue", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 4, |
|
|
|
@ -96,7 +108,7 @@ const eventsList = [ |
|
|
|
|
categoryId: 3, |
|
|
|
|
year: 1400, |
|
|
|
|
month: 11, |
|
|
|
|
day: 6 |
|
|
|
|
day: 6, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 5, |
|
|
|
@ -107,8 +119,8 @@ const eventsList = [ |
|
|
|
|
categoryId: 1, |
|
|
|
|
year: 1400, |
|
|
|
|
month: 10, |
|
|
|
|
day: 3 |
|
|
|
|
} |
|
|
|
|
day: 3, |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
export default SimpleCalendar; |