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.
84 lines
1.9 KiB
84 lines
1.9 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); |
|
|
|
|
|
return ( |
|
<div className="flex 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} |
|
/> |
|
</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; |