We created the main Calendar component that faces both Admin and Volunteers. The component is a wrapper of the FullCalendar library component, so it has styling/logic/data specific to our project. To do this, it was important to convert our Event objects to the schema used for FullCalendar event objects. Currently, the calendar displays all Events in the database with their id, date, and title fields and updates to display new events when they are added to the Events useState. The component is passed the prop "admin", but there is no functionality with this prop yet.
Modifications
Calendar.tsx - Created an interface for FullCalendarEvents and used useStates and useEffects in the Calendar function to return a FullCalendar with all events from the database.
Testing Considerations
Tested that all events currently in the database show up on the Calendar when the page is first rendered.
Used a button hard-coded to add an event to the events useState to verify that new events trigger the useEffect to re-render the Calendar.
Developer: Elaina Lyons and Xavier Garcia
Closes #26
Pull Request Summary
We created the main Calendar component that faces both Admin and Volunteers. The component is a wrapper of the FullCalendar library component, so it has styling/logic/data specific to our project. To do this, it was important to convert our Event objects to the schema used for FullCalendar event objects. Currently, the calendar displays all Events in the database with their id, date, and title fields and updates to display new events when they are added to the Events useState. The component is passed the prop "admin", but there is no functionality with this prop yet.
Modifications
Calendar.tsx - Created an interface for FullCalendarEvents and used useStates and useEffects in the Calendar function to return a FullCalendar with all events from the database.
Testing Considerations
Tested that all events currently in the database show up on the Calendar when the page is first rendered. Used a button hard-coded to add an event to the events useState to verify that new events trigger the useEffect to re-render the Calendar.
Pull Request Checklist
Screenshots/Screencast