OpenSource/homepage
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Implement iCal integration for calendar, improve styling (#2376)

Browse Source 
* Feature: Implement iCal integration, improve calendar/agenda styling

* Delete calendar.jsx

* Calendar proxy handler

* code style

* Add some basic error handling

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
Denis Papecandshamoon authored and GitHub committed 2023-11-25 08:17:25 -08:00
1 parent 518ed7fc4e
commit 95d66707f5
20 files changed
+251 -115
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/widgets/calendar/agenda.jsx
+8 -43
View File
@@ -1,45 +1,11 @@
import { useContext, useState } from "react";
import { DateTime } from "luxon";
import classNames from "classnames";
import { useTranslation } from "next-i18next";
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
import { EventContext } from "../../utils/contexts/calendar";
import Event from "./event";
export function Event({ event, colorVariants, showDate = false }) {
const [hover, setHover] = useState(false);
const { i18n } = useTranslation();
return (
<div
className="flex flex-row text-theme-700 dark:text-theme-200 items-center text-xs text-left h-5 rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1"
onMouseEnter={() => setHover(!hover)}
onMouseLeave={() => setHover(!hover)}
>
<span className="ml-2 w-10">
<span>
{showDate &&
event.date.setLocale(i18n.language).startOf("day").toLocaleString({ month: "short", day: "numeric" })}
</span>
</span>
<span className="ml-2 h-2 w-2">
<span className={classNames("block w-2 h-2 rounded", colorVariants[event.color] ?? "gray")} />
</span>
<div className="ml-2 h-5 text-left relative truncate" style={{ width: "70%" }}>
<div className="absolute mt-0.5 text-xs">{hover && event.additional ? event.additional : event.title}</div>
</div>
{event.isCompleted && (
<span className="text-xs mr-1 ml-auto z-10">
<IoMdCheckmarkCircleOutline />
</span>
)}
</div>
);
}
export default function Agenda({ service, colorVariants, showDate }) {
export default function Agenda({ service, colorVariants, events, showDate }) {
const { widget } = service;
const { events } = useContext(EventContext);
const { t } = useTranslation();
if (!showDate) {
@@ -59,10 +25,8 @@ export default function Agenda({ service, colorVariants, showDate }) {
if (!eventsArray.length) {
return (
<div className="text-center">
<div className="p-2 ">
<div
className={classNames("flex flex-col pt-1 pb-1", !eventsArray.length && !events.length && "animate-pulse")}
>
<div className="pl-2 pr-2">
<div className={classNames("flex flex-col", !eventsArray.length && !events.length && "animate-pulse")}>
<Event
key="no-event"
event={{
@@ -82,16 +46,17 @@ export default function Agenda({ service, colorVariants, showDate }) {
const eventsByDay = days.map((d) => eventsArray.filter((e) => e.date.startOf("day").ts === d));
return (
<div className="p-2">
<div className={classNames("flex flex-col pt-1 pb-1", !eventsArray.length && !events.length && "animate-pulse")}>
<div className="pl-1 pr-1 pb-1">
<div className={classNames("flex flex-col", !eventsArray.length && !events.length && "animate-pulse")}>
{eventsByDay.map((eventsDay, i) => (
<div key={days[i]}>
{eventsDay.map((event, j) => (
<Event
key={`event${event.title}-${event.date}`}
key={`event-agenda-${event.title}-${event.date}-${event.additional}`}
event={event}
colorVariants={colorVariants}
showDate={j === 0}
showTime={widget?.showTime && event.date.startOf("day").ts === showDate.startOf("day").ts}
/>
))}
</div>