Attendance tracking/Event Planning system in reactjs


Today we are going to create attendance marking system using react,node and mongodb.
We are going to cover the frontend part in react in this tutorial.
Working demo can be found at:
The codebase for the same can be found at github repo
The principle components that we are going to use are react-big-calender and material-ui.
We are going to use the boiler plate we created in previous article found here or downloaded from github
The steps are as followed:
1)Install npm modules of react-big calender and material-ui
npm install --save react-big-calender material-ui react-tap-event-plugin moment
2)Import the packages in index.jsx as:

3)Add the following function to render method of main to initialise bigcalender

Here events is the event prop contains events which need to be shown on calender,selectable allows clicking on dates of calender,default date is the starting date on calender, onSelectslot is the callback fired when any day is clicked.

Make sure to include react-big-calender.css in index file from react-big-calender nodemodule’s lib/css folder by copying it to css folder.If calender dates are not visible remove -ms-flex: 1 0 0;
flex: 1 0 0; property from .rbc-month-row class in css and add suitable height as follows

4)Define default events list in constructor as:

Now if you load website in browser it should look something like this:

5)Next task is to define dateSelected function:
On clicking any date we need to display modal popup with time picker if person is present else show absent remark.
So add the following code below bigcalender in render method:

Include appropriate variables at top on index.jsx as:

Define actions variable before return method in render as:

Initialize open variable to false in contructor props and make it true on click of date by defining dateSelected function as:

Here we are storing date picked as a state variable which can be used later for storing events.
Define timearray in contructor props as:

Here timepicker is material ui component which allows us to select time.Here we are storing intime and outtime which will be used later which creating events.
6)Now the dropdown in render has handlePresentChange function which can be defined as:

Here if value is 1 then present option is selected so we should display time pickers
else hide the timepickers for absent option.

So on click of any date following info is displayed:

6)On click of submit timeclose function is called which can be defined as:

In time close we first check whether whether present(1) or absent(2) value was seleted.
If present option is selected we extract date from datepicked variable and intime and outime from respective variables and create startdate and enddate for events.
Next we push a new present event in event array to display that person was present on that particular day.
Similar logic follows for absent option.
So now our calender has all events that we needed to mark and looks something like this:


Thats it for today. In the next tutorial we will connect the frontend with backend so that all the events are saved and retrieved from a database.

Image source:Google images

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development

1 Comment

Comments are closed.