Add min max calendar hours, add event colors

This commit is contained in:
adam-skowronek 2022-11-12 23:50:29 +01:00
parent afffc78537
commit b881d5a056
4 changed files with 131 additions and 58 deletions

View File

@ -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,9 +66,32 @@ 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>
<p className="mb-2">
{DateTime.fromJSDate(eventData.start).toFormat('yyyy-LL-dd HH:mm:ss')}{' '}
- {DateTime.fromJSDate(eventData.end).toFormat('yyyy-LL-dd HH:mm:ss')}
</p>
{eventData.resource.committee.members.length ? (
<>
Komisja:{' '}
<ul className="list-disc">
{eventData.resource.committee.members.map((member: any) => (
<li
key={`${member.first_name} ${member.last_name}`}
className="ml-4"
>
{member.first_name} {member.last_name}
</li>
))}
</ul>
{eventData.resource.group && (
<p className="mt-4">Grupa: {eventData.resource.group.name}</p>
)}
</>
) : (
<>
<div className="form-control">
<div className="form-control">
<label className="label" htmlFor="committee">
@ -100,6 +124,8 @@ const EditSchedule = ({
</div>
</div>
<button className="btn btn-success mt-10">ZAPISZ</button>
</>
)}
</form>
</div>
)

View File

@ -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

View File

@ -46,6 +46,8 @@ 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>
{eventData.resource.committee.members.length > 0 && (
<>
Komisja:{' '}
<ul className="list-disc">
{eventData.resource.committee.members.map((member: any) => (
@ -57,6 +59,13 @@ const ScheduleAddGroup = ({
</li>
))}
</ul>
</>
)}
{eventData.resource.group && (
<p className="mt-4">Grupa: {eventData.resource.group.name}</p>
)}
{!eventData.resource.group && (
<>
<div className="form-control">
<label className="label" htmlFor="student_index">
Indeks
@ -69,6 +78,8 @@ const ScheduleAddGroup = ({
/>
</div>
<button className="btn btn-success mt-4">ZAPISZ</button>
</>
)}
</form>
</div>
)

View File

@ -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