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

* 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 Papec
2023-11-25 16:17:25 +00:00
committed by GitHub
parent 518ed7fc4e
commit 95d66707f5
20 changed files with 251 additions and 115 deletions

View File

@@ -40,6 +40,7 @@ export default function Component({ service }) {
const { widget } = service;
const { i18n } = useTranslation();
const [showDate, setShowDate] = useState(null);
const [events, setEvents] = useState({});
const currentDate = DateTime.now().setLocale(i18n.language).startOf("day");
const { settings } = useContext(SettingsContext);
@@ -69,9 +70,9 @@ export default function Component({ service }) {
?.filter((integration) => integration?.type)
.map((integration) => ({
service: dynamic(() => import(`./integrations/${integration.type}`)),
widget: integration,
widget: { ...widget, ...integration },
})) ?? [],
[widget.integrations],
[widget],
);
return (
@@ -80,13 +81,14 @@ export default function Component({ service }) {
<div className="sticky top-0">
{integrations.map((integration) => {
const Integration = integration.service;
const key = integration.widget.type + integration.widget.service_name + integration.widget.service_group;
const key = `integration-${integration.widget.type}-${integration.widget.service_name}-${integration.widget.service_group}-${integration.widget.name}`;
return (
<Integration
key={key}
config={integration.widget}
params={params}
setEvents={setEvents}
hideErrors={settings.hideErrors}
className="fixed bottom-0 left-0 bg-red-500 w-screen h-12"
/>
@@ -95,8 +97,10 @@ export default function Component({ service }) {
</div>
{(!widget?.view || widget?.view === "monthly") && (
<Monthly
key={`monthly-${showDate?.toFormat("yyyy-MM-dd")}`}
service={service}
colorVariants={colorVariants}
events={events}
showDate={showDate}
setShowDate={setShowDate}
className="flex"
@@ -104,8 +108,10 @@ export default function Component({ service }) {
)}
{widget?.view === "agenda" && (
<Agenda
key={`agenda-${showDate?.toFormat("yyyy-MM-dd")}`}
service={service}
colorVariants={colorVariants}
events={events}
showDate={showDate}
setShowDate={setShowDate}
className="flex"