Projects

Calendar Pages

This is the fifth part of the eight-part series documented on the web app project I undertook – OSAAT. In the previous posts, I gave a brief introduction of the project, along with how we communicated, researched and kicked off the site development. The second part contained a thorough walkthrough of the development of the login page and its authentication. And in the third and fourth parts, I went through how I built all the Customer pages and Order Wizard.

In this post, we will explore the Calendar page designs, features, along how I went about building it. Unlike the previous posts we looked into, this is just 1 page on the site. Nonetheless, it’s a very important part of the site that contains customised features within calendars. I will also show you how the customer can schedule a calendar event using a form in the calendars page, along with how the admins can interact with the calendar pages to make the best use of it.

As always, I’ll show you the mockup UI that was provided along with an overview of the models that were used. Then I will give a brief walk-through on how these features were built and implemented into the system.

UI DESIGN MOCKUPS

Mockup of Edit Technician event given to me by OSAAT

Mockup of Delivery Visit Schedule given to me by OSSAT

Mockup of Sales Visit Schedule given to me by OSSAT

Mockup of Tech Visit Schedule given to me by OSSAT

Mockup of Edit Sales Event given to me by OSAAT

Mockup of Delivery Calendar given to me by OSAAT

Mockup of Technician Calendar given to me by OSAAT

Mockup of Sales Calendar given to me by OSAAT

The first 3 mockups are about the schedule popup on the customer page, which can be accessed through a click of a button, and can be used to create events. The fourth mockup shows what the edit event popup must look like from the calendar page, which is supposed to be triggered when the pen icon is clicked on any event. Finally, I have added the mockups for the 3 tabs within the calendar page, which apparently look very different from each other. Some parts were improvised, especially in the technician calendar page, to fit the client’s needs as I worked.

FEATURES

FEATURE	DESCRIPTION
Calendar Page
Technician Calendar	Calendar page that displays all the technician events, allowing edit through a popup
Sales Calendar	Calendar page that displays all the technician events, allowing editing through a popup
Delivery Calendar	Calendar page that displays all the sales events, allowing editing through a popup
Schedule Event – Customer Info Page
Technician Event Schedule	Clicking “SCHEDULE A VISIT” should open an orange pop-up with all the fields in the image, clicking save should create a Technician Event and redirect the user to the technician calendar. The client later requested to have all the fields automatically filled, and have the time field to be between 7 AM to 6 PM, along with the minutes field disabled.
Sales Event Schedule	Clicking “SCHEDULE A VISIT” should open a green pop-up with all the fields in the image, clicking save should create a Sales Event and redirect the user to the sales calendar The client later requested to have all the fields automatically filled, and have the time field be between 7 AM to 6 PM, along with the minutes field disabled.
Delivery Event Schedule – Later Removed	This pop-up was built, but was later removed because the company didn’t want customers creating delivery events

CALENDAR PAGE

The calendar page can be accessed from the homepage only by the admins. Technician, Sales and Delivery Event tables were created from Django models. The calendar page contains all 3 calendars, allowing switching through tabs.

Technician Calendar

The events were colour-coded based on their types, and the filter allowed checking or unchecking crews. The red “x” indicated an unconfirmed event, and a green check indicated a confirmed event.

Sales Calendar

Sales events had a crew filter along with a calendar with a different view, allowing event editing and deletion.

SCHEDULE EVENT

Technician event scheduling and sales event scheduling were colour-coded orange and green with customer details autofilled. Start time and end time were between 7 AM and 6 PM, with 1-hour gaps. Saving the form creates the respective event and redirects the user to the calendars page we discussed before.

NEXT STEPS

This post is the fourth part of the whole project documentation series. In the next article, I will go through the Calendar pages, about working on schedules and how the admins interact with them. Feel free to use the links below to read about any part of the project you are interested in. I’ll see you on the next post!