midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add dynamic background color support for event items in CalenderGoogle

This commit is contained in:
faisolavolut 2025-02-25 09:24:20 +07:00
parent 2f46d31080
commit ed1e309a35
1 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/ui/CalenderGoogle.tsx
View File

@ -29,6 +29,7 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
end: new Date(), end: new Date(),
allDay: true, allDay: true,
color: "#2196f3", color: "#2196f3",
backgroundColor: "#2196f3",
extendedProps: { extendedProps: {
id: 1, id: 1,
pic: [ pic: [
@ -104,7 +105,16 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
<div className="w-full flex flex-col flex-grow bg-white overflow-hidden "> <div className="w-full flex flex-col flex-grow bg-white overflow-hidden ">
<div className=" py-4 px-0 rounded-lg max-w-sm"> <div className=" py-4 px-0 rounded-lg max-w-sm">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-[15px] h-[15px] bg-red-500 rounded-md"></div> <div
className={cx(
"w-[15px] h-[15px] rounded-md",
detailDialog?.backgroundColor
? css`
background-color: ${detailDialog?.backgroundColor};
`
: "bg-primary"
)}
></div>
<h2 className="text-lg font-semibold"> <h2 className="text-lg font-semibold">
{detailDialog.title || "No title"} {detailDialog.title || "No title"}
</h2> </h2>
@ -249,19 +259,29 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-col gap-y-1"> <div className="flex flex-col gap-y-1">
{listMore.map((evt, idx) => ( {listMore.map((evt, idx) => {
<div console.log(evt);
key={idx} return (
className="bg-red-500 text-sm px-2 rounded-md text-white cursor-pointer" <div
onClick={() => { key={idx}
setDetailDialog(evt); className={cx(
setShowDialog(true); ` text-sm px-2 rounded-md text-white cursor-pointer`,
setCanClose(false); evt?.backgroundColor
}} ? css`
> background-color: ${evt?.backgroundColor};
{evt?.title} `
</div> : "bg-primary"
))} )}
onClick={() => {
setDetailDialog(evt);
setShowDialog(true);
setCanClose(false);
}}
>
{evt?.title}
</div>
);
})}
</div> </div>
</div> </div>