# Feature OP-11974 - Datepicker: Update colours of mini calendar so non-working days are visible in all modes

Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-11974

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 12.5.0 |
| Sprint | 12.5.0 |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As** a project member  
**I want to** see which dates are non-working dates even when "working days only" is disabled.  
**so that** all date pickers, in all modes, still indicate which dates are set as non-working days.

### **Acceptance criteria**

  - Show non working days (weekends or individual ones set by my administrator) in the mini calendar of all date pickers, even when the "Working days only" switch is set to OFF.
      - As opposed to the current version, where these days are shown as regular days)
  - Distinguish between a "clickbale" (enabled) non-working day and a "non-clickable" (disabled) non working day.
  - Update the dates of individual days in the mini calendar of all date pickers to make this possible. Each date in the mini calendar can have these states:
      - **Enabled (clickable)**
          - Today (any working day, or a non-working day when it is enabled due to "Working days only" switch set to OFF).
              - Text: <mention class="mention" data-id="333333" data-type="work_package" data-text="#333333">#333333</mention>
              - BG: Indication/Current date *(\#ffffe1)*
          - Non-working day (when "Working days only" switch is OFF)
              - Text: <mention class="mention" data-id="333333" data-type="work_package" data-text="#333333">#333333</mention>
              - BG: *Basic/Grey 6* (\#f3f3f3)
          - Working day:
              - Text: <mention class="mention" data-id="333333" data-type="work_package" data-text="#333333">#333333</mention>
              - BG: *Basic/white*
          - Selected:
              - Start/end of range:
                  - Text: *Basic/white*
                  - BG: Primary theme colour (*Main/Main* for defaut theme)
              - Middle of range:
                  - Text: Primary theme colour (*Main/Main* for defaut theme)
                  - BG: Light version of primary theme colour (derived, *Primary/Minor 3*)
      - **Disabled (not clickable, either because non-working day or limited by relations)**
          - Today (when it falls on a disabled day, either out of range due to relations or non-working day when "Working days only" switch is ON)
              - Text: *Basic/Grey 3* (<mention class="mention" data-id="878787" data-type="work_package" data-text="#878787">#878787</mention>)
              - BG: Indication/Current date *(\#ffffe1)*
          - Non-working day (when "Working days only" switch is ON)
              - Text: *Basic/Grey 3* (<mention class="mention" data-id="878787" data-type="work_package" data-text="#878787">#878787</mention>)
              - BG: *Basic/Grey 6* (\#f3f3f3)
          - Working day (when disabled by relations)
              - Text: *Basic/Grey 3* (<mention class="mention" data-id="878787" data-type="work_package" data-text="#878787">#878787</mention>)
              - BG: *Basic/white*
          - Selected (to indicate selected dates in a disabled range)
              - Start/end of range:
                  - Text: *Basic/Grey 5* (\#e0e0e0)
                  - BG: *Basic/Grey 3* (<mention class="mention" data-id="878787" data-type="work_package" data-text="#878787">#878787</mention>)
              - Middle of range:
                  - Text: *Basic/Grey 3* (<mention class="mention" data-id="878787" data-type="work_package" data-text="#878787">#878787</mention>)
                  - BG: *Basic/Grey 5* (\#e0e0e0)

### Visuals

In the following date picker:

  - **"Working days only" is ON**
  - Nov 2 is today (enabled)
  - Selected range is 18–23 Nov
      - 20 and 21 are spanned, but not included (disabled, not clickable)
  - These are individual non-working days (disabled, not clickable)
      - 25 Nov
      - 15 Dec
  - These days are disabled due to relations:
      - 20–30 December

<img class="op-uc-image op-uc-image_inline" style="width:489px;" src="/api/v3/attachments/51296/content">

\---

In the following date picker:

  - **"Working days only" is OFF**
  - Dec 23 is today (disabled, limited by relations)
  - Selected range is 18–21 Nov
      - Selected non-working days behave as normal, since they are as enabled
  - These are individual non-working days (enabled, clickable)
      - 25 Nov
      - 15 Dec
  - These days are disabled due to relations:
      - 20–30 December

<img class="op-uc-image op-uc-image_inline" style="width:493px;" src="/api/v3/attachments/51297/content">

\---

In the following date picker:

  - **"Working days only" is OFF**
  - **Automatically scheduled, so all dates are disabled**
  - Dec 23 is today (disabled)
  - Selected range is 18–21 Nov (disabled)
  - These are individual non-working days (disabled)
      - 25 Nov
      - 15 Dec

<img class="op-uc-image op-uc-image_inline" style="width:488px;" src="/api/v3/attachments/51298/content">