style: format code

src/components/calendar.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import { Calendar, momentLocalizer } from 'react-big-calendar';
 import moment from 'moment';
@@ -13,26 +13,25 @@ moment.updateLocale('en', {
   },
 });
 
-const localizer = momentLocalizer(moment)
+const localizer = momentLocalizer(moment);
 
 const MyCalendar = (props) => (
   <div>
     <Calendar
       localizer={localizer}
       //events={myEventsList}
-      startAccessor="start"
+      startAccessor='start'
-      endAccessor="end"
+      endAccessor='end'
       style={{ height: 500 }}
-      culture="de-DE"
+      culture='de-DE'
       defaultView='week'
-
       /*CustomToolbar*/
       components={{
-        toolbar: CustomToolbar
+        toolbar: CustomToolbar,
       }}
       /*CustomToolbar*/
     />
   </div>
-)
+);
 
 export default MyCalendar;

src/components/custom-toolbar.css

@@ -75,11 +75,11 @@
 }
 
 .custom-toolbar .navigation-controls button:hover {
-  background-color: #1976D2;
+  background-color: #1976d2;
 }
 
 .custom-toolbar .navigation-controls button:active {
-  background-color: #1565C0;
+  background-color: #1565c0;
 }
 
 /* Dropdown-Bereich für Woche und Jahr */

src/components/custom-toolbar.tsx

@@ -16,15 +16,21 @@ interface CustomToolbarProps {
   onView: (newView: 'month' | 'week' | 'day' | 'agenda') => void;
 }
 
-const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, onView }) => {
+const CustomToolbar: React.FC<CustomToolbarProps> = ({
-  
+  date,
+  view,
+  onNavigate,
+  onView,
+}) => {
   //ISO-Wochennummer eines Datums ermitteln
   const getISOWeek = (date: Date): number => {
     const tmp = new Date(date.getTime());
     //Datum so verschieben, dass der nächste Donnerstag erreicht wird (ISO: Woche beginnt am Montag)
     tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
     const yearStart = new Date(tmp.getFullYear(), 0, 1);
-    const weekNo = Math.ceil((((tmp.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+    const weekNo = Math.ceil(
+      ((tmp.getTime() - yearStart.getTime()) / 86400000 + 1) / 7,
+    );
     return weekNo;
   };
 
@@ -60,7 +66,9 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, o
 
   //Lokaler State für Woche und ISO-Wochenjahr (statt des reinen Kalenderjahrs)
   const [selectedWeek, setSelectedWeek] = useState<number>(getISOWeek(date));
-  const [selectedYear, setSelectedYear] = useState<number>(getISOWeekYear(date));
+  const [selectedYear, setSelectedYear] = useState<number>(
+    getISOWeekYear(date),
+  );
 
   //Auswahl aktualisieren, wenn sich die Prop "date" ändert
   useEffect(() => {
@@ -73,7 +81,10 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, o
   const weekOptions = Array.from({ length: totalWeeks }, (_, i) => i + 1);
 
   //Jahresliste
-  const yearOptions = Array.from({ length: 21 }, (_, i) => selectedYear - 10 + i);
+  const yearOptions = Array.from(
+    { length: 21 },
+    (_, i) => selectedYear - 10 + i,
+  );
 
   //Start (Montag) und Ende (Sonntag) der aktuell angezeigten Woche berechnen
   const weekStartDate = getDateOfISOWeek(selectedWeek, selectedYear);
@@ -175,11 +186,13 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, o
     }
   };
 
-
   return (
-    <div className="custom-toolbar" style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}>
+    <div
+      className='custom-toolbar'
+      style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}
+    >
       <div className='view-change'>
-        <div className="view-switcher" style={{ display: 'flex', gap: '8px' }}>
+        <div className='view-switcher' style={{ display: 'flex', gap: '8px' }}>
           <Button
             //className='hover:bg-orange-600 hover:text-white'
             type='submit'
@@ -219,13 +232,19 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ date, view, onNavigate, o
         </div>
       </div>
 
-      <div className="right-section" style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}>
+      <div
-        <div className="navigation-controls" style={{ display: 'flex', gap: '8px' }}>
+        className='right-section'
-          <div className="handleWeek">
+        style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}
+      >
+        <div
+          className='navigation-controls'
+          style={{ display: 'flex', gap: '8px' }}
+        >
+          <div className='handleWeek'>
             <button onClick={handlePrev}>&lt;</button>
             <button onClick={handleNext}>&gt;</button>
           </div>
-          <div className="today">
+          <div className='today'>
             <Button
               //className='hover:bg-orange-600 hover:text-white'
               type='submit'

src/components/react-big-calendar.css

@@ -54,7 +54,8 @@ button.rbc-input::-moz-focus-inner {
   box-sizing: inherit;
 }
 
-.rbc-abs-full, .rbc-row-bg {
+.rbc-abs-full,
+.rbc-row-bg {
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -63,7 +64,10 @@ button.rbc-input::-moz-focus-inner {
   bottom: 0;
 }
 
-.rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
+.rbc-ellipsis,
+.rbc-show-more,
+.rbc-row-segment .rbc-event-content,
+.rbc-event-label {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -104,7 +108,9 @@ button.rbc-input::-moz-focus-inner {
   border-left-width: 0;
   border-right: 1px solid #ddd;
 }
-.rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited {
+.rbc-header > a,
+.rbc-header > a:active,
+.rbc-header > a:visited {
   color: inherit;
   text-decoration: none;
 }
@@ -150,7 +156,8 @@ button.rbc-input::-moz-focus-inner {
   scrollbar-width: none; /* Firefox */
   /* Hide scrollbar for Chrome, Safari and Opera */
 }
-.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar {
+.rbc-row-content-scrollable
+  .rbc-row-content-scroll-container::-webkit-scrollbar {
   display: none;
 }
 
@@ -215,14 +222,18 @@ button.rbc-input::-moz-focus-inner {
   line-height: normal;
   white-space: nowrap;
 }
-.rbc-toolbar button:active, .rbc-toolbar button.rbc-active {
+.rbc-toolbar button:active,
+.rbc-toolbar button.rbc-active {
   background-image: none;
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   background-color: #e6e6e6;
   border-color: #adadad;
 }
-.rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus {
+.rbc-toolbar button:active:hover,
+.rbc-toolbar button:active:focus,
+.rbc-toolbar button.rbc-active:hover,
+.rbc-toolbar button.rbc-active:focus {
   color: #373a3c;
   background-color: #d4d4d4;
   border-color: #8c8c8c;
@@ -286,7 +297,8 @@ button.rbc-input::-moz-focus-inner {
   margin-left: 0;
   margin-right: -1px;
 }
-.rbc-btn-group + .rbc-btn-group, .rbc-btn-group + button {
+.rbc-btn-group + .rbc-btn-group,
+.rbc-btn-group + button {
   margin-left: 10px;
 }
 
@@ -298,7 +310,8 @@ button.rbc-input::-moz-focus-inner {
     flex-direction: column;
   }
 }
-.rbc-event, .rbc-day-slot .rbc-background-event {
+.rbc-event,
+.rbc-day-slot .rbc-background-event {
   border: none;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -313,14 +326,18 @@ button.rbc-input::-moz-focus-inner {
   width: 100%;
   text-align: left;
 }
-.rbc-slot-selecting .rbc-event, .rbc-slot-selecting .rbc-day-slot .rbc-background-event, .rbc-day-slot .rbc-slot-selecting .rbc-background-event {
+.rbc-slot-selecting .rbc-event,
+.rbc-slot-selecting .rbc-day-slot .rbc-background-event,
+.rbc-day-slot .rbc-slot-selecting .rbc-background-event {
   cursor: inherit;
   pointer-events: none;
 }
-.rbc-event.rbc-selected, .rbc-day-slot .rbc-selected.rbc-background-event {
+.rbc-event.rbc-selected,
+.rbc-day-slot .rbc-selected.rbc-background-event {
   background-color: #265985;
 }
-.rbc-event:focus, .rbc-day-slot .rbc-background-event:focus {
+.rbc-event:focus,
+.rbc-day-slot .rbc-background-event:focus {
   outline: 5px auto #3b99fc;
 }
 
@@ -379,7 +396,8 @@ button.rbc-input::-moz-focus-inner {
   line-height: normal;
   color: #3174ad;
 }
-.rbc-show-more:hover, .rbc-show-more:focus {
+.rbc-show-more:hover,
+.rbc-show-more:focus {
   color: #265985;
 }
 
@@ -446,7 +464,9 @@ button.rbc-input::-moz-focus-inner {
 .rbc-date-cell.rbc-now {
   font-weight: bold;
 }
-.rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited {
+.rbc-date-cell > a,
+.rbc-date-cell > a:active,
+.rbc-date-cell > a:visited {
   color: inherit;
   text-decoration: none;
 }
@@ -549,10 +569,10 @@ button.rbc-input::-moz-focus-inner {
   text-transform: lowercase;
 }
 .rbc-agenda-time-cell .rbc-continues-after:after {
-  content: " »";
+  content: ' »';
 }
 .rbc-agenda-time-cell .rbc-continues-prior:before {
-  content: "« ";
+  content: '« ';
 }
 
 .rbc-agenda-date-cell,
@@ -626,7 +646,8 @@ button.rbc-input::-moz-focus-inner {
   left: 10px;
   right: 0;
 }
-.rbc-day-slot .rbc-event, .rbc-day-slot .rbc-background-event {
+.rbc-day-slot .rbc-event,
+.rbc-day-slot .rbc-background-event {
   border: 1px solid #265985;
   display: -webkit-box;
   display: -ms-flexbox;