drc-calendar

Calendar and agenda, built in Vue.js

Live version

Introduction

This app is a calendar with a built-in agenda, which shows dinamically generated events in the current year.

It has the following features:

• At the top of the calendar, the weekdays are displayed starting by Sunday.
• In the calendar, one can view the events that are going to happen in each date.
• It is possible to navigate in the months of the year, using arrows at the top of the calendar.
• When selecting a date in the calendar, the date is highlighted and the agenda scrolls to the selected date.
• The agenda displays all days of the year.
• In each event in the agenda, the following information should be shown: start time, duration and title.
• The calendar should start in today's date.
• When scrolling the agenda, the calendar should follow it, by displaying the same month.

This app is my first try on Vue.js!

While trying to use many concepts I learnt from React, I might have not followed the "vue way" for doing things (Vue community, sorry for that 😓).

On the plus side, this challenge was really interesting and rewarding. Also, I am getting more and more interested in the Vue.js ecossystem.

Installing and Running

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

# serve storybook with hot reload at localhost:9001
npm run storybook

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Design and development

First, I generated the boilerplate of the project using vue-cli (awesome tool, btw).

Then, I organized the app in two kinds of components:

1. (Presentational) components: they basically receive some props and render stuff. They do not handle behaviour and usually do not have internal state (although they can - for UI for example).
2. Containers: components that handle behaviour and logic. They have internal state and use it to control their internal components.

Not surprinsingly, this concept came from React. 🤙

Using storybook, I created all Presentational Components I needed, from the simplest to the more complex one.

Finally, I created a Container for each screen of the app, using the previously created Components. This step was basically playing Lego. 😉

Conclusion

I enjoyed building this Calendar and Agenda, as I could learn new things and finally build an App in Vue. Also, I could play a little bit with refs the DOM (for scroll events).

Some things that could be done:

• (improvement) create more tests for the *.vue files
• (improvement) create end to end tests (user interacting with page)
• (improvement) use css preprocessor to avoid duplication of css properties and values
• (improvement) better layout and iterations for mobile
• (feature) fetch data from a server
• (feature) implement Create/Update/Delete of events

Finally, feel free to open up an issue/PR if you feel like discussing anything of what I have done here! 👊