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

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;