Merge pull request #350 from openscript-ch/342-hard-to-create-overlapping-events-directly-by-selecting-the-slots-on-tablet

342 hard to create overlapping events directly by selecting the slots on tablet

Author: openscript

.changeset/thick-trainers-brake.md

@@ -0,0 +1,5 @@
+---
+"@quassel/frontend": patch
+---
+
+Allow to drag select new events next to existing events

apps/frontend/src/components/questionnaire/calendar/EntryCalendar.module.css

@@ -1,3 +1,9 @@
+.spaciousCalendar {
+    :global(.fc-timegrid-col-events) {
+        margin-right: 14%;
+    }
+}
+
 .eventSleepIndicator {
     background-image: url("/public/star.svg") !important;
     background-repeat: repeat !important;

apps/frontend/src/components/questionnaire/calendar/EntryCalendar.tsx

@@ -12,6 +12,7 @@ import { format, i18n } from "../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { EventImpl } from "@fullcalendar/core/internal";
 import styles from "./EntryCalendar.module.css";
+import { $layout } from "../../../stores/layout";
 
 const calendarBaseConfig: FullCalendar["props"] = {
   allDaySlot: false,
@@ -68,6 +69,8 @@ export function EntryCalendar({
   const t = useStore(messages);
   const { time } = useStore(format);
 
+  const { fullscreen, admin } = useStore($layout);
+
   const [opened, { open, close }] = useDisclosure();
 
   const [entryUpdatingId, setEntryUpdadingId] = useState<number>();
@@ -179,6 +182,7 @@ export function EntryCalendar({
         {...calendarBaseConfig}
         plugins={[timeGridPlugin, interactionPlugin]}
         events={events}
+        viewClassNames={fullscreen || admin ? styles.spaciousCalendar : undefined}
         dayHeaderContent={({ date }) => (
           <Button
             variant="subtle"