Frontendin rakenne

Frontend

FullCalendar

Kalenterin perustoiminta koostuu kalenterikomponentista ja kalenterin toimintojen aktivoimista handler-funktioista.

let events = [
  {
    id: 1,
    title: 'Varaaja',
    start: '2023-2-30T14:30:00',
    end: '2023-2-30T14:45:00',
    editable: true,
  }
]

Kalenterikomponentille annetaan varaukset tai vapaat varausikkunat listana, joka sisältää Event Object-dokumentaation mukaisia olioita. Ajat annetaan olioissa alku- ja loppuaikoina ISO 8601-standardin mukaan.

const handleEventClick = (clickEvent: EventClickArg) => {
  // e.g. Open event info modal
  // -> modify event
  // -> refetch events & refresh calendar
} 

return(
  <div>
    <FullCalendar
      ...
      eventClick={handleEventClick}
    />
  </div>
)

handler-funktiot saavat kalenterikomponentilta muutoksia tai uusia varauksia tehdessä event-olioita. Olio käyttää kuitenkin FullCalendarin sisäistä tyyppiä, joka sisältää pääosin saman tiedon kuin kalenterille alunperin annettu olio, mutta osa kentistä on nimetty uudelleen joista tärkeimpinä:

• start → startStr
• end → endStr

Handler-funktioissa on mahdollista avata esim. erillisiä modaaleja tai ponnahdusikkunoita ja näyttää tai kerätä näistä lisätietoja esim. palvelimelle lähetettävää kutsua varten.

Kalenterin eri tyyppisten eventtien ulkoasua ja käyttäytymistä on mahdollista hallita myös joukkona antamalla eventit kalenterille Event Source Objectina. Näin voidaan eriyttää varauksien ja vapaiden aikaikkunoiden käyttäytyminen kalenterissa.

React Query

Tiedon noutamiseen ja lähettämiseen palvelimelle käytetään muutamissa paikoissa useQuery ja useMutation -hookeja. Hookit antavat komponentteihin käytettäväksi useita kyselyn tilaa kuvaavia muuttujia, joita voidaan käyttää hyödyksi käyttöliittymän komponenttien kuten errorien ja latauskuvakkeiden näyttämiseen. Queryt pyrkivät automaattisesti pitämään tiedon ajan tasalla komponenttien uudelleenrenderöityessä ja esim. ikkunoiden kohdistuksen vaihtuessa.

CSS (Tailwind)

Tailwind CSS -luokat sijoitetaan komponenttien html-elementtien className-muuttujaan.

Elementteihin on myös mahdollista tehdä omia tyylejä style-muuttujaan, mutta pyritään käyttämään tyyleihin vain yhtä järjestelmää