Don't want to read all this?
Don't have the time?
That's perfectly fine! This section is at the top just for you 😁
You can play with a live version by clicking the badge!
-
Please note that the project is currently under development and will surely have certain (a lot of 🥴) limitations. Check the Pain Points section for more information!
-
I adopted using reactive props destructure, which is an experimental feature. Check the RFC at vuejs/rfcs#502 for more information on it.
Good question!
The calendar application is being developed as a technical challenge to enhance my skills and explore the intricacies of building a robust web application from scratch. It also provides an opportunity to delve into user experience (UX) design principles and address the need for inclusive and user-friendly designs in calendar (and all) applications.
I aim to focus on a solid keyboard navigation ensuring that those who rely on keyboard navigation (or want to) can effectively interact with every feature implemented on the calendar.
Please refer to the About section in the repository to explore the complete list of tools I'm using
The current features of the calendar application include:
- Event Creation: Events can be created in the following manner:
- Clicking on a specific hour;
- Using the click & drag functionality;
- Using the dedicated "Add Event" button;
- Event Deletion: Events can be deleted by choosing the target event and clicking on the trash icon present on the preview.
- Event Edition: Events can be edited by choosing the target event and clicking on the edit icon present on the preview. This will open a modal similar to the creation one, allowing you to edit the event.
- Event focus: When clicking on an event it will scroll to, and ensure the preview is placed within the visible area of the calendar.
- Persistence of Events: Created events remain assigned to their respective day/week even when navigating between different weeks.
Ouch!
Let's talk about the elephant(s) on the room 😬
While progress has been made in developing the calendar application, some challenges and limitations still exist:
- ⌨ "What's all this talk about keyboard navigation? I only see clicking interaction 🤔" ... and you are right! Still on the process of learning how to properly handle some things so baby steps, I need to start somewhere!
- 💻 Currently, the layout is only designed for desktop use not being yet optimized for mobile devices.
- 💾 The application does not have a backend or utilizes
localStorage, so refreshing the browser will invariably result in data loss. - 🧪 Testing is a bit behind at the moment. I know, I know, no excuses! 😵
Did you read all the way here? You have my appreciation! 🥳
I value every input and welcome any suggestions or feedback I might get! Feel free to open an issue in the repository to share your thoughts, ideas, or any improvements you would like to suggest. There's no right or wrong suggestion - every perspective is valuable! Alternatively, you can also contact me directly by email if you prefer a more direct communication channel.
Do as you see fit! Cheers!