# Calendar App

## Overview

A one page calendar app

## Initial Proposal

I initially proposed this as an application for managing items needed for the events. Here is the original proposal:

```
An events/physical resources calendar:
  - This fancified calendar application would help aid an institution in planning their events.
  - There is always the potential for multiple overlapping events across multiple event spaces.
  - These events could potentially also have the need for physical resources (think tents, catering equipment, etc).
  - The user would be allowed to enter a base inventory of all the resources available to them
  - From their, they can start to create events, and assign these resources to events(in other words, checking them out of inventory for the time period of the event)
  - The application would respond with feedback if their is a resource conflict for a particular time frame.
```

The more I think about it, the more I would like to make this a personal calendar app, and focus on making a small set of application features function in a very intuitive, user-friendly, and one-pagey way. I would also love focusing my energy on a small JS library outlined below.

## Technologies/Libraries

- Rails/Postgres
- Jquery
- Jquery animations
- Date/time library

#### Custom Calendar Library

- A small custom JS Library for keeping internal state of calendar on the client side.
- This would be a factory for `month` objects. They would hold all the info for a month
- Initialized with the month, year, and event info from an AJAX response in the app.
- This would allow for months of info to retrieved from the server and stored in client memory before it is needed, speeding up load times. Info changed via calls to the server will also need to be changed in these objects.
- It will be naive about discerning bad info from the good. The business logic of the app will be solely responsible for whether or not the data gets updated in these objects. (Means that a 200 status must come back from async callback before an event is CRUDed)
- Would have a date/time library dependency that gives the object its generic month definitions (Month starts Wednesday, is 30 days long etc). This will allow the object to inform the main calendar view what dates to fill in where.
- API feature ideas:

```javascript
month = new Month('December', '2015', json_parsed_event_info) // correct syntax?
month.events(22); // events for the 22nd of the month
month.event(id); // event with given id
month.add_event(event_object);
month.update_event(event_object);
month.delete_event(event_id);
month.next('December', '2015'); //> ['January', '2016']
```


# User Stories

## View Month

As a user <br />
I want to view a single month on my calendar <br />
so that I can see what days have events

#### Acceptance Criteria
[ ] When a user accesses the root of the application, they should see an overview of the current month. <br />
[ ] A user will see the current day highlighted. <br />
[ ] Days in partial weeks belonging to another month will be grayed out. <br />
[ ] Events will have indicator dots that tell the user whether their is an event on that day (empty for no events, filled signifies 1 event or more).


## View Other Months

As a user <br />
I want to view other months <br />
so that I can look ahead in time and behind

#### Acceptance Criteria
[ ] A user will see left pointing arrow at the top of the page for navigating to past months. <br />
[ ] A user will see right pointing arrow at the top of the page for navigating to future months. <br />
[ ] These navigation elements ideally will not illicit another page load, but rather JS will repopulate the page with the correct info.

## View Day's Events

As a user <br />
I want to view a days event's <br />
so that I can plan my day

#### Acceptance Criteria

[ ] A user will click on a day, and a pane will open up, splitting the calendar grid. Calendar grid will split just under the selected day, pushing rest of calendar grid downward). <br />
[ ] Clicking on the same day will close the event pane
[ ] Clicking on a day in the same row will not close the pane, but rather information will simply be replaced. <br />
[ ] Clicking on a day in a different week will slide the current pane closed and open a new one under the new row. <br />
[ ] The pane will contain cards, each with one event's info on it.


## View Single Event

As a user <br />
I want to view a single event <br />
So I can see that event's information

#### Acceptance Criteria
[ ] An event card will contain the event's start time, end time, title, and description. <br />
[ ] A event card will contain a "more" button which will gray out the background in front of a popup window with expanded event information.

## Create Event

As a user <br />
I want to be able to create an event <br />
so that I can keep track of obligations

#### Acceptance Criteria
[ ] The new event form will have the same visual footprint as an event card, and will be located in the event pane, to the right of existing events if any. <br />
[ ] A start time must be before an end time. <br />
[ ] Title cannot be blank. <br />
[ ] Description is optional. <br />
[ ] Form will contain 'time helpers' (ie, the application will translate '11a' typed in by the user to '11:00 AM', or whatever format it needs)
[ ] Upon successful form submission, a page reload will not happen, instead the form will be replaced with the new event card.

## Edit Event

As a user <br />
I want to edit and event <br />
so I can update an events information

#### Acceptance Criteria
[ ] Each event card will have an edit button. This will transform the card back to an autofilled form. <br />
[ ] Each event edit will have all the typical attributes to be updated, plus the ability to change the day that the event is on. <br />
[ ] Upon successful form submission, the form crd is transformed back into an event card, or in the case that the day of the event changes, disappears to another day.

## Delete Event

As a user <br />
I want to delete an event <br />
so I can remove cancelled obligations

#### Acceptance Criteria
[ ] Each event card will have a delete button. <br />
[ ] Delete button will prompt the use with "Are you sure?" With yes or no options. <br />
[ ] Deleting an event in the middle of a list of events will prompt cards on the right to shift left, closing the gap created by deleted card.

## More Ideas

- A search feature that would search events and open a new view, displaying results by relevance. Each result wold have a link back to the main page displaying that event in its proper context.


:smile: