Event Calendar Midterm Project
A GitHub Classroom Assignment
This assignment must be accepted on GitHub Classroom.
Objective
Use what you have learned about Directives, Components, Transitions, and LocalStorage to create an Event Calendar web application that allow the user to view scheduled events, make new events, and edit and delete existing events. This project will also require working with dates and times, so please review the Working with Dates section to learn more.
Requirements
The following requirements must be met in order to complete the assignment successfully:
- The calendar must have a monthly view that accurately displays the selected month and year.
- The user should be able to choose which month and year to display.
- When the page loads the current month and year should be displayed with the current day highlighted.
- Events should appear on the calendar on the appropriate day list the time and title of the event.
- Clicking the event should display additional details about the event including but not limited to: the event title, time and description.
- The user should be able to add new event.
- The user should be able to edit or delete existing events.
- At least one Vue Component should be used.
- At least on Vue Transition should be used.
- All event data should be stored to localStorage.
- The web application should have an appealing and intuitive user experience.
Working with Dates
As a calendar web application, naturally the project will require working with dates and times. As such, you will need to use of the JavaScript Date object or a JavaScript Library like moment.js. This is not a topic that will be directly covered in this class, but below you will find a list of tutorials and resources that will help.
- YouTube: Working with Time and Dates in JavaScript
- Article: Understanding Date and Time in JavaScript
- Article: Everything You Need to Know About Date in JavaScript
Example
Rubric
The following rubric will be use to grade this assignment.
| Task | Points |
|---|---|
| Accurately displays monthly calendar | 5 |
| Successfully allows users to change the currently displayed month and year | 5 |
| Accurately displays events on monthly calendar | 5 |
| Successfully allows users to add events | 5 |
| Successfully allows users to edit and delete existing events | 5 |
| Uses at least one vue component | 5 |
| Saves event data to localstorage | 5 |
| Implements at least one vue transition | 5 |
| Provides an appealing and intuitive user experience | 10 |
| Total | 50 |
Submission
When the project is completed, follow the steps below to submit for grading:
- Create a commit with the message "Completes the Event Calendar assignment"
- Push all commits to GitHub.
- Submit the URL to your GitHub repository to the Event Calendar assignment on BrightSpace.