style: format code

Add Custom Calendar Toolbar

package.json

@@ -36,11 +36,14 @@
     "bcryptjs": "^3.0.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.511.0",
     "next": "15.3.3",
     "next-auth": "^5.0.0-beta.25",
     "next-themes": "^0.4.6",
-    "react": "^19.0.0",
+    "react": "^19.1.0",
+    "react-big-calendar": "^1.18.0",
+    "react-datepicker": "^8.4.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.4",
     "tailwind-merge": "^3.2.0",
@@ -51,6 +54,7 @@
     "@tailwindcss/postcss": "4.1.10",
     "@types/node": "22.15.32",
     "@types/react": "19.1.8",
+    "@types/react-big-calendar": "^1",
     "@types/react-dom": "19.1.6",
     "dotenv-cli": "8.0.0",
     "eslint": "9.29.0",

src/app/home/page.tsx

@@ -1,15 +1,5 @@
-import { RedirectButton } from '@/components/user/redirect-button';
+import Calendar from '@/components/calendar';
-import { ThemePicker } from '@/components/user/theme-picker';
 
-export default function Home() {
+export default function home() {
-  return (
+  return <Calendar />;
-    <div className='flex flex-col items-center justify-center h-screen'>
-      <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
-      <div>
-        <h1>Home</h1>
-        <RedirectButton redirectUrl='/logout' buttonText='Logout' />
-        <RedirectButton redirectUrl='/settings' buttonText='Settings' />
-      </div>
-    </div>
-  );
 }

src/components/calendar.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { Calendar, momentLocalizer } from 'react-big-calendar';
+import moment from 'moment';
+import '@/components/react-big-calendar.css';
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
+import CustomToolbar from '@/components/custom-toolbar';
+
+moment.updateLocale('en', {
+  week: {
+    dow: 1,
+    doy: 4,
+  },
+});
+
+const localizer = momentLocalizer(moment);
+
+const MyCalendar = (props) => (
+  <div>
+    <Calendar
+      localizer={localizer}
+      //events={myEventsList}
+      startAccessor='start'
+      endAccessor='end'
+      style={{ height: 500 }}
+      culture='de-DE'
+      defaultView='week'
+      /*CustomToolbar*/
+      components={{
+        toolbar: CustomToolbar,
+      }}
+      /*CustomToolbar*/
+    />
+  </div>
+);
+
+export default MyCalendar;

src/components/custom-toolbar.css

@@ -0,0 +1,161 @@
+/* custom-toolbar.css */
+
+/* Container der Toolbar */
+.custom-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  /*border-radius: 8px;*/
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/*.custom-toolbar .view-change .view-switcher {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.custom-toolbar .view-change .view-switcher button {
+  padding: 8px 16px;
+  background-color: #c1830d;
+  /*border: 1px solid #ccc;*/
+/*  border-radius: 11px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+  height: 30px;
+  margin-top: 3.5px;
+  color: #ffffff;
+}
+
+.custom-toolbar .view-change .view-switcher button:hover:not(:disabled) {
+  background-color: #e0e0e0;
+  border-color: #999;
+}
+
+.custom-toolbar .view-change .view-switcher button:disabled {
+  background-color: #d0d0d0;
+  border-color: #aaa;
+  cursor: default;
+}*/
+
+/* Anzeige des aktuellen Datums (Monat und Jahr) */
+.custom-toolbar .current-date {
+  font-weight: bold;
+  font-size: 12px;
+  text-align: center;
+  color: #ffffff;
+  /*margin: 4px 0;*/
+  background-color: #717171;
+  width: 178px;
+  height: 37px;
+  border-radius: 11px;
+}
+
+/* Navigationsbereich (Today, Prev, Next) */
+.custom-toolbar .navigation-controls {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.custom-toolbar .navigation-controls button {
+  padding: 8px 12px;
+  /*background-color: #2196F3;*/
+  color: #ffffff;
+  border: none;
+  border-radius: 11px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.custom-toolbar .navigation-controls button:hover {
+  background-color: #1976d2;
+}
+
+.custom-toolbar .navigation-controls button:active {
+  background-color: #1565c0;
+}
+
+/* Dropdown-Bereich für Woche und Jahr */
+.custom-toolbar .dropdowns {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  height: 30px;
+  font-size: 10px;
+  margin-top: 3.5px;
+  border-radius: 11px;
+}
+
+.custom-toolbar .dropdowns select {
+  padding: 8px 12px;
+  /*border: 1px solid #ccc;*/
+  border-radius: 11px;
+  font-size: 10px;
+  background-color: #555555;
+  color: #ffffff;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.custom-toolbar .dropdowns select:hover {
+  border-color: #999;
+}
+
+.right-section {
+  background-color: #717171;
+  width: 393px;
+  height: 48px;
+  border-radius: 11px;
+  justify-items: center;
+  align-items: center;
+}
+
+.custom-toolbar .navigation-controls .handleWeek button {
+  background-color: #717171;
+  height: 30px;
+  width: 30px;
+  margin-bottom: 3.5px;
+}
+
+/*.custom-toolbar .navigation-controls .today button {
+  background-color: #c6c6c6;
+  height: 30px;
+  width: 100px;
+  color: #000000;
+  margin-top: 3.5px;
+}*/
+
+.view-change {
+  background-color: #717171;
+  height: 48px;
+  width: 323px;
+  border-radius: 11px;
+  justify-items: center;
+}
+
+.right-section .datepicker-box {
+  color: #000000;
+  background-color: #c6c6c6;
+  height: 36px;
+  width: 85px;
+  border-radius: 11px;
+  font-size: 12px;
+  align-self: center;
+}
+
+.datepicker {
+  text-align: center;
+  width: 85px;
+  height: 30px;
+}
+
+.datepicker-box {
+  z-index: 9999;
+}

src/components/custom-toolbar.tsx

@@ -0,0 +1,276 @@
+import React, { useState, useEffect } from 'react';
+import { format } from 'date-fns';
+import './custom-toolbar.css';
+import { Button } from '@/components/custom-ui/button';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+interface CustomToolbarProps {
+  //Aktuell angezeigtes Datum
+  date: Date;
+  //Aktuelle Ansicht
+  view: 'month' | 'week' | 'day' | 'agenda';
+
+  onNavigate: (action: string, newDate?: Date) => void;
+  //Ansichtwechsel
+  onView: (newView: 'month' | 'week' | 'day' | 'agenda') => void;
+}
+
+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,
+    );
+    return weekNo;
+  };
+
+  //ISO-Wochenjahr eines Datums ermitteln
+  const getISOWeekYear = (date: Date): number => {
+    const tmp = new Date(date.getTime());
+    tmp.setDate(tmp.getDate() + 4 - (tmp.getDay() || 7));
+    return tmp.getFullYear();
+  };
+
+  //Ermittlung der Anzahl der Wochen im Jahr
+  const getISOWeeksInYear = (year: number): number => {
+    const d = new Date(year, 11, 31);
+    const week = getISOWeek(d);
+    return week === 1 ? getISOWeek(new Date(year, 11, 24)) : week;
+  };
+
+  const getDateOfISOWeek = (week: number, year: number): Date => {
+    const jan1 = new Date(year, 0, 1);
+    const dayOfWeek = jan1.getDay();
+    const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
+    let firstMonday: Date;
+    if (isoDayOfWeek <= 4) {
+      //1. Januar gehört zur ersten ISO-Woche (Montag dieser Woche bestimmen)
+      firstMonday = new Date(year, 0, 1 - isoDayOfWeek + 1);
+    } else {
+      //Ansonsten liegt der erste Montag in der darauffolgenden Woche
+      firstMonday = new Date(year, 0, 1 + (8 - isoDayOfWeek));
+    }
+    firstMonday.setDate(firstMonday.getDate() + (week - 1) * 7);
+    return firstMonday;
+  };
+
+  //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),
+  );
+
+  //Auswahl aktualisieren, wenn sich die Prop "date" ändert
+  useEffect(() => {
+    setSelectedWeek(getISOWeek(date));
+    setSelectedYear(getISOWeekYear(date));
+  }, [date]);
+
+  //Dropdown-Liste der Wochen
+  const totalWeeks = getISOWeeksInYear(selectedYear);
+  const weekOptions = Array.from({ length: totalWeeks }, (_, i) => i + 1);
+
+  //Jahresliste
+  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);
+  const weekEndDate = new Date(weekStartDate);
+  weekEndDate.setDate(weekStartDate.getDate() + 6);
+
+  //Monat und Jahr von Start- und Enddatum ermitteln
+  const monthStart = format(weekStartDate, 'MMMM');
+  const monthEnd = format(weekEndDate, 'MMMM');
+  const yearAtStart = format(weekStartDate, 'yyyy');
+  const yearAtEnd = format(weekEndDate, 'yyyy');
+
+  //Ansichtwechsel
+  const handleViewChange = (newView: 'month' | 'week' | 'day' | 'agenda') => {
+    onView(newView);
+  };
+
+  //Today-Button aktualisiert das Datum im DatePicker auf das heutige
+  const handleToday = () => {
+    const today = new Date();
+    setSelectedDate(today);
+    setSelectedWeek(getISOWeek(today));
+    setSelectedYear(getISOWeekYear(today));
+    onNavigate('TODAY', today);
+  };
+
+  //Pfeiltaste nach Vorne
+  const handleNext = () => {
+    let newDate: Date;
+    if (view === 'day' || view === 'agenda') {
+      newDate = new Date(date);
+      newDate.setDate(newDate.getDate() + 1);
+    } else if (view === 'week') {
+      let newWeek = selectedWeek + 1;
+      let newYear = selectedYear;
+      if (newWeek > getISOWeeksInYear(selectedYear)) {
+        newYear = selectedYear + 1;
+        newWeek = 1;
+      }
+      setSelectedWeek(newWeek);
+      setSelectedYear(newYear);
+      newDate = getDateOfISOWeek(newWeek, newYear);
+    } else if (view === 'month') {
+      newDate = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+    } else {
+      newDate = new Date(date);
+    }
+    //Datum im DatePicker aktualisieren
+    setSelectedDate(newDate);
+    onNavigate('SET_DATE', newDate);
+  };
+
+  //Pfeiltaste nach Hinten
+  const handlePrev = () => {
+    let newDate: Date;
+    if (view === 'day' || view === 'agenda') {
+      newDate = new Date(date);
+      newDate.setDate(newDate.getDate() - 1);
+    } else if (view === 'week') {
+      let newWeek = selectedWeek - 1;
+      let newYear = selectedYear;
+      if (newWeek < 1) {
+        newYear = selectedYear - 1;
+        newWeek = getISOWeeksInYear(newYear);
+      }
+      setSelectedWeek(newWeek);
+      setSelectedYear(newYear);
+      newDate = getDateOfISOWeek(newWeek, newYear);
+    } else if (view === 'month') {
+      newDate = new Date(date.getFullYear(), date.getMonth() - 1, 1);
+    } else {
+      newDate = new Date(date);
+    }
+    //Datum im DatePicker aktualisieren
+    setSelectedDate(newDate);
+    onNavigate('SET_DATE', newDate);
+  };
+
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+
+  const handleDateChange = (date: Date | null) => {
+    setSelectedDate(date);
+    if (date) {
+      if (view === 'week') {
+        const newWeek = getISOWeek(date);
+        const newYear = getISOWeekYear(date);
+        setSelectedWeek(newWeek);
+        setSelectedYear(newYear);
+        const newDate = getDateOfISOWeek(newWeek, newYear);
+        onNavigate('SET_DATE', newDate);
+      } else if (view === 'day') {
+        onNavigate('SET_DATE', date);
+      } else if (view === 'month') {
+        const newDate = new Date(date.getFullYear(), date.getMonth(), 1);
+        onNavigate('SET_DATE', newDate);
+      } else if (view === 'agenda') {
+        onNavigate('SET_DATE', date);
+      }
+    }
+  };
+
+  return (
+    <div
+      className='custom-toolbar'
+      style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}
+    >
+      <div className='view-change'>
+        <div className='view-switcher' style={{ display: 'flex', gap: '8px' }}>
+          <Button
+            //className='hover:bg-orange-600 hover:text-white'
+            type='submit'
+            variant='primary'
+            onClick={() => handleViewChange('month')}
+            size={'default'}
+          >
+            Month
+          </Button>
+          <Button
+            //className='hover:bg-orange-600 hover:text-white'
+            type='submit'
+            variant='primary'
+            onClick={() => handleViewChange('week')}
+            size={'default'}
+          >
+            Week
+          </Button>
+          <Button
+            //className='hover:bg-orange-600 hover:text-white'
+            type='submit'
+            variant='primary'
+            onClick={() => handleViewChange('day')}
+            size={'default'}
+          >
+            Day
+          </Button>
+          <Button
+            //className='hover:bg-orange-600 hover:text-white'
+            type='submit'
+            variant='primary'
+            onClick={() => handleViewChange('agenda')}
+            size={'default'}
+          >
+            Agenda
+          </Button>
+        </div>
+      </div>
+
+      <div
+        className='right-section'
+        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'>
+            <Button
+              //className='hover:bg-orange-600 hover:text-white'
+              type='submit'
+              variant='secondary'
+              onClick={() => handleToday()}
+              size={'default'}
+            >
+              Today
+            </Button>
+          </div>
+        </div>
+
+        <div className='datepicker-box'>
+          <DatePicker
+            className='datepicker'
+            selected={selectedDate}
+            onChange={handleDateChange}
+            calendarStartDay={1}
+            locale='de-DE'
+            dateFormat='dd.MM.yyyy'
+            showWeekNumbers={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomToolbar;

src/components/react-big-calendar.css

@@ -0,0 +1,925 @@
+@charset "UTF-8";
+.rbc-btn {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+button.rbc-btn {
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  cursor: pointer;
+}
+
+button[disabled].rbc-btn {
+  cursor: not-allowed;
+}
+
+button.rbc-input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.rbc-calendar {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.rbc-m-b-negative-3 {
+  margin-bottom: -3px;
+}
+
+.rbc-h-full {
+  height: 100%;
+}
+
+.rbc-calendar *,
+.rbc-calendar *:before,
+.rbc-calendar *:after {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+}
+
+.rbc-abs-full,
+.rbc-row-bg {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.rbc-ellipsis,
+.rbc-show-more,
+.rbc-row-segment .rbc-event-content,
+.rbc-event-label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rbc-rtl {
+  direction: rtl;
+}
+
+.rbc-off-range {
+  color: #999999;
+}
+
+.rbc-off-range-bg {
+  background: #e6e6e6;
+}
+
+.rbc-header {
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 0%;
+  flex: 1 0 0%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 3px;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: bold;
+  font-size: 90%;
+  min-height: 0;
+  border-bottom: 1px solid #ddd;
+}
+.rbc-header + .rbc-header {
+  border-left: 1px solid #c6c6c6; /*#ddd*/
+}
+.rbc-rtl .rbc-header + .rbc-header {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+.rbc-header > a,
+.rbc-header > a:active,
+.rbc-header > a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+
+.rbc-button-link {
+  color: inherit;
+  background: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.rbc-row-content {
+  position: relative;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-user-select: none;
+  z-index: 4;
+}
+
+.rbc-row-content-scrollable {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+}
+.rbc-row-content-scrollable .rbc-row-content-scroll-container {
+  height: 100%;
+  overflow-y: scroll;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.rbc-row-content-scrollable
+  .rbc-row-content-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+.rbc-today {
+  background-color: #5770ff; /*#eaf6ff*/
+}
+/*Own changes 10*/
+.rbc-allday-cell .rbc-row-bg .rbc-day-bg.rbc-today {
+  background-color: transparent !important;
+  /*border: none !important;*/
+}
+/*Own changes 10*/
+
+/*Own changes 11*/
+.rbc-time-header-cell .rbc-header:first-child.rbc-today {
+  border-top-left-radius: 11px !important;
+}
+
+.rbc-time-header-cell .rbc-header:last-child.rbc-today {
+  border-top-right-radius: 11px !important;
+}
+/*Own changes 11*/
+
+.rbc-toolbar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+.rbc-toolbar .rbc-toolbar-label {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  padding: 0 10px;
+  text-align: center;
+
+  /*Own changes 01*/
+  background-color: #717171;
+  color: #ffffff;
+  /*Own changes 01*/
+}
+.rbc-toolbar button {
+  color: #373a3c;
+  display: inline-block;
+  margin: 0;
+  text-align: center;
+  vertical-align: middle;
+  background: none;
+  background-image: none;
+  border: 1px solid #ccc;
+  padding: 0.375rem 1rem;
+  border-radius: 4px;
+  line-height: normal;
+  white-space: nowrap;
+}
+.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 {
+  color: #373a3c;
+  background-color: #d4d4d4;
+  border-color: #8c8c8c;
+}
+.rbc-toolbar button:focus {
+  color: #373a3c;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+.rbc-toolbar button:hover {
+  color: #373a3c;
+  cursor: pointer;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+
+.rbc-btn-group {
+  display: inline-block;
+  white-space: nowrap;
+}
+.rbc-btn-group > button:first-child:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  /*Own changes 02*/
+  background-color: #c6c6c6;
+  color: #000000;
+  /*Own changes 02*/
+}
+.rbc-btn-group > button:last-child:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  /*Own changes 03*/
+  background-color: #c6c6c6;
+  color: #000000;
+  /*Own changes 03*/
+}
+.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) {
+  border-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) {
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rbc-btn-group > button:not(:first-child):not(:last-child) {
+  border-radius: 0;
+
+  /*Own changes 04*/
+  background-color: #c6c6c6;
+  color: #000000;
+  /*Own changes 04*/
+}
+.rbc-btn-group button + button {
+  margin-left: -1px;
+}
+.rbc-rtl .rbc-btn-group button + button {
+  margin-left: 0;
+  margin-right: -1px;
+}
+.rbc-btn-group + .rbc-btn-group,
+.rbc-btn-group + button {
+  margin-left: 10px;
+}
+
+@media (max-width: 767px) {
+  .rbc-toolbar {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+.rbc-event,
+.rbc-day-slot .rbc-background-event {
+  border: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  margin: 0;
+  padding: 2px 5px;
+  background-color: #3174ad;
+  border-radius: 5px;
+  color: #fff;
+  cursor: pointer;
+  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 {
+  cursor: inherit;
+  pointer-events: none;
+}
+.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 {
+  outline: 5px auto #3b99fc;
+}
+
+.rbc-event-label {
+  font-size: 80%;
+}
+
+.rbc-event-overlaps {
+  -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
+  box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
+}
+
+.rbc-event-continues-prior {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rbc-event-continues-after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rbc-event-continues-earlier {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.rbc-event-continues-later {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rbc-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.rbc-row-segment {
+  padding: 0 1px 1px 1px;
+}
+.rbc-selected-cell {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.rbc-show-more {
+  background-color: rgba(255, 255, 255, 0.3);
+  z-index: 4;
+  font-weight: bold;
+  font-size: 85%;
+  height: auto;
+  line-height: normal;
+  color: #3174ad;
+}
+.rbc-show-more:hover,
+.rbc-show-more:focus {
+  color: #265985;
+}
+
+.rbc-month-view {
+  position: relative;
+  border: 1px solid #ddd;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
+  width: 100%;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-user-select: none;
+  height: 100%;
+}
+
+.rbc-month-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.rbc-month-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
+  -ms-flex-preferred-size: 0px;
+  flex-basis: 0px;
+  overflow: hidden;
+  height: 100%;
+}
+.rbc-month-row + .rbc-month-row {
+  border-top: 1px solid #ddd;
+}
+
+.rbc-date-cell {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 0px;
+  flex: 1 1 0;
+  min-width: 0;
+  padding-right: 5px;
+  text-align: right;
+}
+.rbc-date-cell.rbc-now {
+  font-weight: bold;
+}
+.rbc-date-cell > a,
+.rbc-date-cell > a:active,
+.rbc-date-cell > a:visited {
+  color: inherit;
+  text-decoration: none;
+}
+
+.rbc-row-bg {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
+  overflow: hidden;
+  right: 1px;
+}
+
+.rbc-day-bg {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 0%;
+  flex: 1 0 0%;
+}
+.rbc-day-bg + .rbc-day-bg {
+  border-left: 1px solid #ddd;
+}
+.rbc-rtl .rbc-day-bg + .rbc-day-bg {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+
+.rbc-overlay {
+  position: absolute;
+  z-index: 5;
+  border: 1px solid #e5e5e5;
+  background-color: #fff;
+  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
+  padding: 10px;
+}
+.rbc-overlay > * + * {
+  margin-top: 1px;
+}
+
+.rbc-overlay-header {
+  border-bottom: 1px solid #e5e5e5;
+  margin: -10px -10px 5px -10px;
+  padding: 2px 10px;
+}
+
+.rbc-agenda-view {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
+  overflow: auto;
+}
+.rbc-agenda-view table.rbc-agenda-table {
+  width: 100%;
+  border: 1px solid #ddd;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
+  padding: 5px 10px;
+  vertical-align: top;
+}
+.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell {
+  padding-left: 15px;
+  padding-right: 15px;
+  text-transform: lowercase;
+}
+.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+  border-left: 1px solid #ddd;
+}
+.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr {
+  border-top: 1px solid #ddd;
+}
+.rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+  padding: 3px 5px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th {
+  text-align: right;
+}
+
+.rbc-agenda-time-cell {
+  text-transform: lowercase;
+}
+.rbc-agenda-time-cell .rbc-continues-after:after {
+  content: ' »';
+}
+.rbc-agenda-time-cell .rbc-continues-prior:before {
+  content: '« ';
+}
+
+.rbc-agenda-date-cell,
+.rbc-agenda-time-cell {
+  white-space: nowrap;
+}
+
+.rbc-agenda-event-cell {
+  width: 100%;
+}
+
+.rbc-time-column {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-height: 100%;
+
+  /*Own changes 06*/
+  background-color: #383838;
+  /*Own changes 06*/
+}
+.rbc-time-column .rbc-timeslot-group {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.rbc-timeslot-group {
+  border-bottom: 1px solid #8d8d8d; /*#ddd*/
+  min-height: 40px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: column nowrap;
+  flex-flow: column nowrap;
+}
+
+.rbc-time-gutter,
+.rbc-header-gutter {
+  -webkit-box-flex: 0;
+  -ms-flex: none;
+  flex: none;
+
+  /*Own changes 07*/
+  background-color: #8d8d8d;
+  /*Own changes 07*/
+}
+
+.rbc-label {
+  padding: 0 5px;
+}
+
+.rbc-day-slot {
+  position: relative;
+}
+.rbc-day-slot .rbc-events-container {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  margin-right: 10px;
+  top: 0;
+}
+.rbc-day-slot .rbc-events-container.rbc-rtl {
+  left: 10px;
+  right: 0;
+}
+.rbc-day-slot .rbc-event,
+.rbc-day-slot .rbc-background-event {
+  border: 1px solid #265985;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  max-height: 100%;
+  min-height: 20px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: column wrap;
+  flex-flow: column wrap;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  overflow: hidden;
+  position: absolute;
+}
+.rbc-day-slot .rbc-background-event {
+  opacity: 0.75;
+}
+.rbc-day-slot .rbc-event-label {
+  -webkit-box-flex: 0;
+  -ms-flex: none;
+  flex: none;
+  padding-right: 5px;
+  width: auto;
+}
+.rbc-day-slot .rbc-event-content {
+  width: 100%;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 0px;
+  flex: 1 1 0;
+  word-wrap: break-word;
+  line-height: 1;
+  height: 100%;
+  min-height: 1em;
+}
+.rbc-day-slot .rbc-time-slot {
+  border-top: 1px solid #383838; /*#f7f7f7*/
+}
+
+.rbc-time-view-resources .rbc-time-gutter,
+.rbc-time-view-resources .rbc-time-header-gutter {
+  position: sticky;
+  left: 0;
+  background-color: white;
+  border-right: 1px solid #ddd;
+  z-index: 10;
+  margin-right: -1px;
+}
+.rbc-time-view-resources .rbc-time-header {
+  overflow: hidden;
+}
+.rbc-time-view-resources .rbc-time-header-content {
+  min-width: auto;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
+  -ms-flex-preferred-size: 0px;
+  flex-basis: 0px;
+}
+.rbc-time-view-resources .rbc-time-header-cell-single-day {
+  display: none;
+}
+.rbc-time-view-resources .rbc-day-slot {
+  min-width: 140px;
+}
+.rbc-time-view-resources .rbc-header,
+.rbc-time-view-resources .rbc-day-bg {
+  width: 140px;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 0px;
+  flex: 1 1 0;
+  -ms-flex-preferred-size: 0 px;
+  flex-basis: 0 px;
+}
+
+.rbc-time-header-content + .rbc-time-header-content {
+  margin-left: -1px;
+}
+
+.rbc-time-slot {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 0px;
+  flex: 1 0 0;
+}
+.rbc-time-slot.rbc-now {
+  font-weight: bold;
+}
+
+.rbc-day-header {
+  text-align: center;
+}
+
+.rbc-slot-selection {
+  z-index: 10;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-size: 75%;
+  width: 100%;
+  padding: 3px;
+}
+
+.rbc-slot-selecting {
+  cursor: move;
+}
+
+.rbc-time-view {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: 100%;
+  border: 1px solid #ddd;
+  min-height: 0;
+}
+.rbc-time-view .rbc-time-gutter {
+  white-space: nowrap;
+  text-align: right;
+}
+.rbc-time-view .rbc-allday-cell {
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  /*Own changes 05*/
+  background-color: #555555;
+  /*Own changes 05*/
+}
+.rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
+  border-left: 1px solid #ddd;
+}
+.rbc-time-view .rbc-allday-events {
+  position: relative;
+  z-index: 4;
+}
+.rbc-time-view .rbc-row {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  min-height: 20px;
+}
+
+.rbc-time-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+.rbc-time-header.rbc-overflowing {
+  border-right: 1px solid #ddd;
+}
+.rbc-rtl .rbc-time-header.rbc-overflowing {
+  border-right-width: 0;
+  border-left: 1px solid #ddd;
+}
+.rbc-time-header > .rbc-row:first-child {
+  border-bottom: 1px solid #ddd;
+}
+.rbc-time-header > .rbc-row.rbc-row-resource {
+  border-bottom: 1px solid #ddd;
+}
+
+.rbc-time-header-cell-single-day {
+  display: none;
+}
+
+.rbc-time-header-content {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 0;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-left: 1px solid #ddd;
+
+  /*Own changes 08*/
+  background-color: #c6c6c6;
+  color: #000000;
+  border-top-left-radius: 11px;
+  border-top-right-radius: 11px;
+  /*Own changes 08*/
+}
+.rbc-rtl .rbc-time-header-content {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+.rbc-time-header-content > .rbc-row.rbc-row-resource {
+  border-bottom: 1px solid #ddd;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.rbc-time-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 0%;
+  flex: 1 0 0%;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  width: 100%;
+  border-top: 2px solid #717171; /*#ddd*/
+  overflow-y: auto;
+  position: relative;
+}
+.rbc-time-content > .rbc-time-gutter {
+  -webkit-box-flex: 0;
+  -ms-flex: none;
+  flex: none;
+
+  /*Own changes 09*/
+  border-top-left-radius: 11px;
+  border-bottom-left-radius: 11px;
+  /*Own changes 09*/
+}
+.rbc-time-content > * + * > * {
+  border-left: 1px solid #c6c6c6; /*#ddd*/
+}
+.rbc-rtl .rbc-time-content > * + * > * {
+  border-left-width: 0;
+  border-right: 1px solid #ddd;
+}
+.rbc-time-content > .rbc-day-slot {
+  width: 100%;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.rbc-current-time-indicator {
+  position: absolute;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #74ad31;
+  pointer-events: none;
+}
+
+.rbc-resource-grouping.rbc-time-header-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.rbc-resource-grouping .rbc-row .rbc-header {
+  width: 141px;
+}
+
+/*# sourceMappingURL=react-big-calendar.css.map */