Responsiv, WCAG-compliant og React-kompatibel kalender på bookingflow

Acceptkriterier

1. Non-funktionelt krav: Kalenderen skal bygges som React-komponent.

2. Kalenderen skal være fuldt responsiv.

3. kalenderen skal være WCAG compliant (navigérbar med tabulator, piletaster samt oplæsning i skærmlæser).

4. “As-is”-krav: kalenderen skal udover ovenstående virke as-is på bookingflowet.
   

   1. Kalenderen skal vises for den måned den første ledige tid er i.
      Dvs. hvis den første ledige tid er i januar, så er det i januar man starter i. Dage med ledige tider vises med det grønne ikon ’Ledige tider’. Borgeren kan bladre frem til næste måned, hvis fristen giver borgeren mulighed for at booke et møde i næste måned, og jobcenter har ledige tider. Borgeren bladrer til næste måned i den blå bjælke hvor måned og år er skrevet. Kalenderen vil vise dage med ledige tider set i forhold til valget af mødeform.

      

   2. Hvis den sidste ledige tid er i februar, så skal man ikke kunne klikke sig videre til månederne efter (dvs. være inaktive i marts, april osv). Har borgen en frist på booking, så skal kalenderen kun vise mødetider, der ligger inden for bookingfristen, eller mødetider der ligger op til 7 dage efter bookingfrist-datoen for øvrige ydelsesmodtagere end dagpengemodtagere. Kalendervisningen skal begrænses til maksimalt den måned sidste ledige tid er i.
      (Der er ikke en tilsvarende begræsning før første ledige tid, idet brugeren også må kunne se indeværende måned, se dog AK 4 a.)

   3. Man skal kunne se på en dato, hvis der er ledige tider

      1. as-is:

         

   4. Hvis man trykker på en dato med ledige tider, skal der åbnes en modal med de tider, det er muligt at vælge.

      1. as-is:

         

      2. 

         Såfremt man har andre aktiviteter på den valgte dag, skal de vises i modalen under de ledige mødetider. Klikker borgeren på et tidspunkt, skal tidspunktet vises med et flueben. Klikker borgeren derefter på knappen 'OK', skal oversigten lukke med tidspunkter og brugeren skal føres tilbage til kalenderoversigten og fortsætte resten af booking processen.

      3. Er der kun et møde på dagen, er dette møde preselected

      4. Når mødet er booket, skal borgeren med det samme kunne se mødet i kalenderen, og herfra klikke ind på mødedetaljer. Er der tale om et digitalt møde, skal borgeren kunne se mødelinket i detaljevisningen.

         

      5. Hvis borgen har mulighed for at ombooke eller melde afbud, skal kalenderen blive opdateret med de nye oplysninger.

Baggrund

Ideen er, at der skal benyttes den nye kalenderkomponent som er genbrugelig til moderniseringen.