**As a** project member,
**I want to** be able to visualise work packages in a Begin of the insertionweeklyEnd of the insertion calendar view across multiple sub-projects, and order them by assignee
**so that** I have a clear vision of who does what and when, and have a clear view of resource availability.

**Note**
The Begin of the insertionTeam plannerEnd of the insertion Begin of the deletion planning calendar will extend the current calendar. ThisEnd of the deletion is Begin of the insertionan initial (first stage) implementationEnd of the insertion Begin of the deletion stage 1 ofEnd of the deletion a larger evolution the planning that will be implemented in a multi-step process. Begin of the insertionAt this stage, it will only display the planner in a weekly view.End of the insertion

_This work package is a work in progress, specification is not yet Begin of the insertioncomplete._

End of the insertion Begin of the deletion complete. It will be moved from the UX/UI team project to the overall OpenProject project, and attached to Version 12.1 once finalised._

End of the deletion ####

#### **Acceptance Criteria**

**The Begin of the insertionmodule**End of the insertion Begin of the deletion sidebar**End of the deletion

Begin of the insertionThere is a new module called "Team planner".

* This has to be enabled and has its own permissions.
* Is also based on fullcalendar.io but is separate from the Calendar module. 

This new module, once enabled, is visibleEnd of the insertion Begin of the deletion The "Calendar" itemEnd of the deletion in the Begin of the insertionsidebar as "Team planner":End of the insertion Begin of the deletion sidebar:End of the deletion

* Now loads a table of Begin of the insertionteam plannersEnd of the insertion Begin of the deletion calendarsEnd of the deletion (similar to boards) in the main view.
* Drills into the Begin of the insertion"Team planner"End of the insertion Begin of the deletion "Calendar"End of the deletion item in the sidebar with previously saved Begin of the insertionplanners,End of the insertion Begin of the deletion calendars.End of the deletion
* In the main view, the table has these columns: "Name", "Created on", "Assignees":
* The assignees column will Begin of the insertionlist theEnd of the insertion Begin of the deletion only have data (theEnd of the deletion number of assignees added to Begin of the insertionthat planner.End of the insertion Begin of the deletion the view) if they have been added by the user. (If the user choses to use the calendar in month mode without adding assignees, then it will have no assignees).End of the deletion
* Each column has a "Delete" button as the last item of that row.
* There is a create button in the top right corner, with the title "Create new Begin of the insertionplanner"End of the insertion Begin of the deletion calendar"End of the deletion

**Create new calendar**

Clicking on "Create new Begin of the insertionplanner"End of the insertion Begin of the deletion calendar"End of the deletion loads an empty Begin of the insertionplanner. End of the insertion Begin of the deletion calendar. The header of this calendar is different from the current version in certain ways:End of the deletion

* The top header is by default in edit mode, much like when the user creates a new board; the user is able to type a name for the calendar and click on the save icon to save the calendar.
* Begin of the insertionThereEnd of the insertion Begin of the deletion The "Filter" actionEnd of the deletion is Begin of the insertionno back button (as is the case when a new board is created; this should also be changedEnd of the insertion Begin of the deletion removed from here and nowEnd of the deletion in the Begin of the insertionboards).End of the insertion Begin of the deletion secondary toolbar.End of the deletion
* The Begin of the insertionright side of the top header has two buttons:
* The standard "filter" action (with the "assignee" filter disabled)
* The "more" action with three vertically-stacked dots (contents to be determined)
* TheEnd of the insertion secondary toolbar has these elements, and is common to new and existing calendars:
* On the left edge:
* Left/right buttons to go forwards and backwards in time (in increments of week or month, depending on the current view)
* A "today" button to return to today
* The standard filter button (that works like filters elsewhere, notably in work packages list view)
* Centered:
* The current date range visible, either the month ("August 2021") or a week ("6–10 August 2021")
* Begin of the insertion~~OnEnd of the insertion Begin of the deletion OnEnd of the deletion the right Begin of the insertionedge:~~End of the insertion Begin of the deletion edge:End of the deletion
* Begin of the insertion~~AEnd of the insertion Begin of the deletion AEnd of the deletion switch to select between "Planning view" and "Month view" (please note that the planning view is limited to a weekly view for the Begin of the insertionmoment)~~End of the insertion Begin of the deletion moment)End of the deletion

Begin of the insertion~~**Changes to the existing calendar module**~~ **(to be migrated to another work package)**End of the insertion Begin of the deletion **Month view**End of the deletion

Begin of the insertion~~TheEnd of the insertion Begin of the deletion TheEnd of the deletion month calendar view is similar to the current view, with notably these Begin of the insertiondifferences:~~End of the insertion Begin of the deletion differences:End of the deletion

* Begin of the insertion~~TheEnd of the insertion Begin of the deletion TheEnd of the deletion work package "strips" have been upgraded with new functionalities and Begin of the insertionbehaviour:~~End of the insertion Begin of the deletion behaviour:End of the deletion
* Begin of the insertion~~TheEnd of the insertion Begin of the deletion TheEnd of the deletion ability to drag them to change start/end dates (keeping the duration the Begin of the insertionsame)~~End of the insertion Begin of the deletion same)End of the deletion
* Begin of the insertion~~ExtendEnd of the insertion Begin of the deletion ExtendEnd of the deletion left and right edges to change start/end Begin of the insertiondates~~End of the insertion Begin of the deletion datesEnd of the deletion
* Begin of the insertion~~AEnd of the insertion Begin of the deletion AEnd of the deletion hover displays work package information in an overlay (current Begin of the insertionbehaviour)~~End of the insertion Begin of the deletion behaviour)End of the deletion
* Begin of the insertion~~AEnd of the insertion Begin of the deletion AEnd of the deletion click opens the work package in a split screen Begin of the insertionview~~End of the insertion Begin of the deletion viewEnd of the deletion
* Begin of the insertion~~TheEnd of the insertion Begin of the deletion TheEnd of the deletion colour of the strip corresponds to... Begin of the insertion**FILL**~~End of the insertion Begin of the deletion **FILL**End of the deletion
* Begin of the insertion~~EachEnd of the insertion Begin of the deletion EachEnd of the deletion calendar date has four possible states, each visually distinct form one Begin of the insertionanother:~~End of the insertion Begin of the deletion another:End of the deletion
* Begin of the insertion~~InactiveEnd of the insertion Begin of the deletion InactiveEnd of the deletion (not part of the current month), with a grey background, without day Begin of the insertionnumbers~~End of the insertion Begin of the deletion numbersEnd of the deletion
* Begin of the insertion~~ActiveEnd of the insertion Begin of the deletion ActiveEnd of the deletion (part of the current month), with a light blue background, with day Begin of the insertionnumbers~~End of the insertion Begin of the deletion numbersEnd of the deletion
* Begin of the insertion~~Today,End of the insertion Begin of the deletion Today,End of the deletion highlighted with a yellow background, with day Begin of the insertionnumber~~End of the insertion Begin of the deletion numberEnd of the deletion
* Begin of the insertion~~Hover,End of the insertion Begin of the deletion Hover,End of the deletion with a light blue background, with day Begin of the insertionnumber~~End of the insertion Begin of the deletion numberEnd of the deletion

Begin of the insertion**Main view**End of the insertion Begin of the deletion **Planning view (week view)**End of the deletion

The Begin of the insertioncalendarEnd of the insertion week view is Begin of the insertionthe main view:End of the insertion Begin of the deletion now "Planning view" with these changes:End of the deletion

* There is an "Assignee" column on the left edge
* The other columns are dates, displayed as "{day name} - {date number}", as in "Monday - 9". This is shortened to "Mon - 9" in smaller windows when the cell is not wide enough to display the full version.
* The current date is highlighted also in the column header, with the same yellow highlight.
* Only work packages assigned to assignees that the user adds to the calendar will be visible. This means:
* By default, an empty calendar will have zero assignees
* There is an empty state that reminds the user to add assignees. ("Add assignees to set up your Begin of the insertionteam planner.")End of the insertion Begin of the deletion planning calendar, or switch to month view for a regular calendar.")End of the deletion
* There is an "Add assignee" button at the bottom, to the left.

**Add assignee Begin of the insertionbutton (to be updated)**End of the insertion Begin of the deletion button**End of the deletion

Clicking the "Add assignee" button displays an overlay with:

* A title ("Add assignee")
* A close button on the top right edge
* A search bar
* As the user starts typing, a list of users who correspond to the search terms displayed as:
* An avatar and
* Their full name
* Clicking on a particular user adds a row to the Planning view for that assignee, in an alphabetical order **(or order of adding?)**

**Features specific to planning Begin of the insertionview (to be updated)**End of the insertion Begin of the deletion view**End of the deletion

Planning view, once assignees have been added, affords the users more functionalities than is available in month view:

* Hovering on the cell with the name and avatar of the assignee displays a "remove" icon, that allows users to remove that assignee from the current view.
* "Today" is no longer one cell, but an entire column, all of which is highlighted with a light yellow background.
* Work packages are arranged by assignees. They can be stacked, up to 5 per assignee. ("Error handling and exceptions" describes behaviour for when there are more than 5 work packages for any assignee).
* As in the month view, work package strips can be extended on either end (left or right) to change start/end dates but they can also
* Be dragged from one row to another to assign it to another user

**For Begin of the insertionindividual day cells:**End of the insertion Begin of the deletion both month and planning views:**End of the deletion

* Begin of the insertionRight-clickingEnd of the insertion Begin of the deletion ClickingEnd of the deletion (or Begin of the insertionclicking)End of the insertion Begin of the deletion right-clicking -- **possible?**)End of the deletion on a date cell, which will be in its hover state, will load a "Quick add" overlay:
* A title ("Quick Add")
* A close button on the top right edge
* A search bar
* As the user starts typing, a list of work packages that correspond to the search terms displayed, one per row with:
* The avatar of the author
* Type
* Title/subject
* Project
* #ID
* Status

#### **Error handling and Begin of the insertionexceptions (to be completed)**End of the insertion Begin of the deletion exceptions**End of the deletion

**Exceptions**

* In both month and planning views, when any row has more than 5 work packages that need to be displayed, only those 5 are displayed initially.
* A "And {x} more..." strip communicates to the users that there are additional work packages that are hidden
* Clicking on this will expand the row and also display those additional work packages (so that that row now has than 5 maximum work packages)
* There is currently no defined upper limit to the number of work packages that can be displayed in one row with this mechanism.

**Error management** (to be completed)

* When adding new work packages
* Assignee already set
* Dates already set
* Assignee/dates already set

**Visuals**
_To be added after discussion/exchange within the product team_

**Out of scope**

* Views other than weekly Begin of the insertion(including theEnd of the insertion Begin of the deletion and monthly, including a "normal" week view (without assignees) and aEnd of the deletion two-week Begin of the insertionview)End of the insertion Begin of the deletion viewEnd of the deletion
* The ability to identify assignees with overdue work packages (and view those in an overlay)
* More detailed work package strips that display important attributes without needing a hover
* Work package planning stages (done, planned, overdue)
* Altering the order of assignees by dragging-and-dropping entire assignees rows
* A shortlist of work packages form which the user can drag and drop work packages to the calendar (and a way to filter this shortlist)
* Any form of automation (associating certain work package status with certain planning stages)

**Mockups in Figma**
Begin of the deletion Figma link:End of the deletion https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487

_(Please note that the relevant screens are on the Begin of the insertion"Team planner" page;End of the insertion Begin of the deletion "\_Intermediate" page and not "UI Mockups";End of the deletion the above links takes you to the correct page)._