Add min max calendar hours, add event colors

frontend/src/views/coordinator/EditSchedule.tsx

@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon'
 import { useState } from 'react'
 import { Controller, NestedValue, useForm } from 'react-hook-form'
 import { useMutation, useQuery } from 'react-query'
@@ -65,41 +66,66 @@ const EditSchedule = ({
   }
 
   return (
-    <div style={{ width: '300px', height: '250px' }}>
+    <div style={{ width: '330px', height: '250px' }}>
       <form className="w-full flex flex-col " onSubmit={handleSubmit(onSubmit)}>
-        <h3>Termin</h3>
+        <h3> Termin </h3>
-        <div className="form-control">
+        <p className="mb-2">
-          <div className="form-control">
+          {DateTime.fromJSDate(eventData.start).toFormat('yyyy-LL-dd HH:mm:ss')}{' '}
-            <label className="label" htmlFor="committee">
+          - {DateTime.fromJSDate(eventData.end).toFormat('yyyy-LL-dd HH:mm:ss')}
-              Komisja
+        </p>
-            </label>
+        {eventData.resource.committee.members.length ? (
-            <Controller
+          <>
-              control={control}
+            Komisja:{' '}
-              name="committee"
+            <ul className="list-disc">
-              rules={{ required: true }}
+              {eventData.resource.committee.members.map((member: any) => (
-              render={({ field: { onChange, onBlur } }) => (
+                <li
-                <Select
+                  key={`${member.first_name} ${member.last_name}`}
-                  closeMenuOnSelect={false}
+                  className="ml-4"
-                  options={committeeOptions}
+                >
-                  placeholder="Wybierz komisje"
+                  {member.first_name} {member.last_name}
-                  isMulti
+                </li>
-                  onChange={(values) =>
+              ))}
-                    onChange(values.map((value) => value.value))
+            </ul>
-                  }
+            {eventData.resource.group && (
-                  onBlur={onBlur}
+              <p className="mt-4">Grupa: {eventData.resource.group.name}</p>
-                  styles={{
+            )}
-                    control: (styles) => ({
+          </>
-                      ...styles,
+        ) : (
-                      padding: '0.3rem',
+          <>
-                      borderRadius: '0.5rem',
+            <div className="form-control">
-                    }),
+              <div className="form-control">
-                  }}
+                <label className="label" htmlFor="committee">
+                  Komisja
+                </label>
+                <Controller
+                  control={control}
+                  name="committee"
+                  rules={{ required: true }}
+                  render={({ field: { onChange, onBlur } }) => (
+                    <Select
+                      closeMenuOnSelect={false}
+                      options={committeeOptions}
+                      placeholder="Wybierz komisje"
+                      isMulti
+                      onChange={(values) =>
+                        onChange(values.map((value) => value.value))
+                      }
+                      onBlur={onBlur}
+                      styles={{
+                        control: (styles) => ({
+                          ...styles,
+                          padding: '0.3rem',
+                          borderRadius: '0.5rem',
+                        }),
+                      }}
+                    />
+                  )}
                 />
-              )}
+              </div>
-            />
+            </div>
-          </div>
+            <button className="btn btn-success mt-10">ZAPISZ</button>
-        </div>
+          </>
-        <button className="btn btn-success mt-10">ZAPISZ</button>
+        )}
       </form>
     </div>
   )

frontend/src/views/coordinator/Schedule.tsx

@@ -66,11 +66,12 @@ const Schedule = () => {
           }) => {
             return {
               id,
-              title: `Obrona ${group?.name ?? ''}`,
+              title: `${group?.name ?? '-'}`,
               start: new Date(start_date),
               end: new Date(end_date),
               resource: {
                 committee,
+                group,
               },
             }
           },
@@ -153,6 +154,20 @@ const Schedule = () => {
     }
   }
 
+  const eventGetter = (event: any) => {
+    return event?.resource?.group
+      ? {
+          style: {
+            backgroundColor: '#3174ad',
+          },
+        }
+      : {
+          style: {
+            backgroundColor: '#329f32',
+          },
+        }
+  }
+
   return (
     <div className="flex flex-col">
       <button
@@ -172,6 +187,9 @@ const Schedule = () => {
         events={events}
         onView={onView}
         view={view}
+        eventPropGetter={eventGetter}
+        min={DateTime.fromObject({ hour: 8, minute: 0 }).toJSDate()}
+        max={DateTime.fromObject({ hour: 16, minute: 0 }).toJSDate()}
       />
 
       <Modal

frontend/src/views/student/ScheduleAddGroup.tsx

@@ -46,29 +46,40 @@ const ScheduleAddGroup = ({
           {DateTime.fromJSDate(eventData.start).toFormat('yyyy-LL-dd HH:mm:ss')}{' '}
           - {DateTime.fromJSDate(eventData.end).toFormat('yyyy-LL-dd HH:mm:ss')}
         </h3>
-        Komisja:{' '}
+        {eventData.resource.committee.members.length > 0 && (
-        <ul className="list-disc">
+          <>
-          {eventData.resource.committee.members.map((member: any) => (
+            Komisja:{' '}
-            <li
+            <ul className="list-disc">
-              key={`${member.first_name} ${member.last_name}`}
+              {eventData.resource.committee.members.map((member: any) => (
-              className="ml-4"
+                <li
-            >
+                  key={`${member.first_name} ${member.last_name}`}
-              {member.first_name} {member.last_name}
+                  className="ml-4"
-            </li>
+                >
-          ))}
+                  {member.first_name} {member.last_name}
-        </ul>
+                </li>
-        <div className="form-control">
+              ))}
-          <label className="label" htmlFor="student_index">
+            </ul>
-            Indeks
+          </>
-          </label>
+        )}
-          <input
+        {eventData.resource.group && (
-            className="input input-bordered"
+          <p className="mt-4">Grupa: {eventData.resource.group.name}</p>
-            id="to"
+        )}
-            type="text"
+        {!eventData.resource.group && (
-            {...register('student_index', { required: true })}
+          <>
-          />
+            <div className="form-control">
-        </div>
+              <label className="label" htmlFor="student_index">
-        <button className="btn btn-success mt-4">ZAPISZ</button>
+                Indeks
+              </label>
+              <input
+                className="input input-bordered"
+                id="to"
+                type="text"
+                {...register('student_index', { required: true })}
+              />
+            </div>
+            <button className="btn btn-success mt-4">ZAPISZ</button>
+          </>
+        )}
       </form>
     </div>
   )

frontend/src/views/student/StudentSchedule.tsx

@@ -69,11 +69,12 @@ const StudentSchedule = () => {
             }) => {
               return {
                 id,
-                title: `Obrona ${group?.name ?? ''}`,
+                title: `${group?.name ?? '-'}`,
                 start: new Date(start_date),
                 end: new Date(end_date),
                 resource: {
                   committee,
+                  group,
                 },
               }
             },
@@ -107,6 +108,20 @@ const StudentSchedule = () => {
   }
   const onSubmit = async (data: any) => {}
 
+  const eventGetter = (event: any) => {
+    return event?.resource?.group
+      ? {
+          style: {
+            backgroundColor: '#3174ad',
+          },
+        }
+      : {
+          style: {
+            backgroundColor: '#329f32',
+          },
+        }
+  }
+
   return (
     <div>
       <h1 className="text-2xl font-bold mb-2 text-center">
@@ -122,6 +137,9 @@ const StudentSchedule = () => {
         events={events}
         onView={onView}
         view={view}
+        eventPropGetter={eventGetter}
+        min={DateTime.fromObject({ hour: 8, minute: 0 }).toJSDate()}
+        max={DateTime.fromObject({ hour: 16, minute: 0 }).toJSDate()}
       />
 
       <Modal