https://github.com/hustle2live/booking-vue2

Booking Calendar Test-task developed with VueJs | Vue2 | VueX3
https://github.com/hustle2live/booking-vue2

booking calendar javascript test-task vue vue2 vuex

Last synced: about 9 hours ago
JSON representation

Booking Calendar Test-task developed with VueJs | Vue2 | VueX3

• Host: GitHub
• URL: https://github.com/hustle2live/booking-vue2
• Owner: hustle2live
• Created: 2024-02-29T19:24:14.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-03-01T12:20:42.000Z (7 months ago)
• Last Synced: 2024-09-27T17:42:20.311Z (about 10 hours ago)
• Topics: booking, calendar, javascript, test-task, vue, vue2, vuex
• Language: Vue
• Homepage: https://hustle2live.github.io/Booking-vue2/
• Size: 574 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Booking Calendar (Vue2)

- This is a test task developing with modern Framework VueJS

## Viev Demo 

### To VIEW DEMO release on `gh-pages` - follow the link [ ➜ DEMO](https://hustle2live.github.io/Booking-vue2/)

####

## How To Install

- Clone Repository 

- install application with `npm install` command

- To start the application type `npm run dev` in VSCode console  

- Follow the instructions in VSCode and go to the browser ➜ Local:   http://localhost:5173/

## Task Description 

⦁	Vue 2: Use Vue.js to create the components and manage the UI.

⦁	Vuex: Utilize Vuex for state management to handle the reservations data and navigation state.

#### Calendar Display:

⦁	Each row in the table represents an apartment.

⦁	Each column represents a day of the week (Mon-Sun).

⦁	Display reservations with a solid line from the start to the end date, showing the client's name.

⦁	Consider that for one day, it is possible for the end of one reservation and the start of a second one to occur for one apartment.

#### Navigation Buttons: Implement three navigation buttons: 

⦁	"Forward" (move a week ahead)

⦁	"Back" (move a week ago)

⦁	"Today" (return to the current week).

#### Reservation Time:

⦁	Consider that check-in and check-out occur from the middle of the day.

⦁	Reservations start from the middle of the start date and end in the middle of the end date.

#### Reservation Pop-up:

⦁	Implement a feature that opens a small pop-up with reservation details when a user clicks on a reservation line. The pop-up should display information such as the client's name, apartment details, start date, and end date.

#### Git Repository:

⦁	Create a Git repository for the project on a platform of your choice (e.g., GitHub, GitLab, Bitbucket).

⦁	Documentation and Repository Credentials:

⦁	Provide a short documentation file (README.md) in the repository that includes instructions on how to set up and run the project.

⦁	Include credentials or access details for the Git repository in your submission.

##