How to use:
How to launch project locally:
The main view of the calendar page.
At the top of the page located page title, dropdouwn input for filter and button to create new event.
Below is the calendar with 6 columns and 10 row where on the titles displayed weekdays and on the rows displayed working hours.
At first You need to authorise in app by choosing some persone in dropdown. After, click to "Confirm" button to continue using the app.
If You choose user with admin privelegies, You able to create, delete and edit event time by dragging. Ordinary users can only look and filter events by persons.
P.S. Users, who have admin privelegies is first two in list: Alex and Elizabeth.
P.P.S. After creating an event You'll be redirected to calendar page where You need to athorise again. But it will be fixed in future.
The displayed data on the event card is event name and images list as participants:
The hovered card view:
Over the hovered participant image displayed his name:
Clicking by the cross button on the event card pops up the alert in which you must confirm or cancel deleting event:
After confirm, event will delete. For close alert or cancel you need to click the appropriate button or click around of alert: After that you'll seen result of your actions.
That would to change event day and time you can drag the card to another free cell. At the start of dragging you'll seen blue dashed border on the free cell or red filled already booked cells, on which you won't put the dragging card.
After dropped the card to the new cell you'll see alert with confirmation of change event date and time:
By the input with dropdown users list you can choose by which user the event cards will be filtered:
After change value on the calendar will be left event cards of which contains chosen participant:
To start create event click the "New Event" button. Page consist 3 inputs at the left side and a scrolling list of all users on the right side. All fields are required. At the bottom there are "Cancel" and "Submit" buttons.
You'll move on to the create event page where need to fill out the data:
The name of the event must be written into first text field:
The length of name must be from 3 to 40 symbols and value can't consist illegal characters.
For choose needed weekday for event choose the right variant from dropdown at the day field:
For choose needed time for event choose the right variant from dropdown at the time field:
For choose a participants you need to click on the user from the list at right side:
When user chosen, his avatar and name add to participants field. You have multiple choise to add a several participants:
For removing some participant, you can click again to him in the users list or click to cross button which showed when cursor hovered to image across from participants field:
When you click submit button but not all data is filled in, you can see validation errors on the incorrect fields:
When event name field is filled worng you could seen validation notification below the input:
If event on this date and time is already exist, you'll seen the error message at top of the page, which you can close clicking by the cross button:
If no errors detected, after submitting form you'll seen successful message and be redirected to calendar page with updated events:
Clicking the cancel button just took you to the calendar page.
Clone project to local folder with this command
git clone https://github.com/Sergey-Nag/meeting-planning-calendar.gitInside the downloaded folder run the command npm install and wait until all dependencies are loaded.
For generate full compiled project use the command npm run build and wait until compilling is finished. After that full project will be placed in the /dist folder.
For development run the command npm run dev, then, after saving any file in this folder project will be recompiled.
Also, you can run command npm run dev:serve to run local server on 9000 port, and after saving any files page will be reloaded automatically with all changes.
npm run test- running tests.npm run stylelint:fix- fixing (where possible) errors in styles.