Weekdays Input
Overview
Week Days Picker shows the seven days of the week as a row of buttons. Users click a day to select it and click again to clear it.
The selection is stored in a String attribute as 7 characters: 1 means selected and 0 means not selected. For example, 0111110 means Monday to Friday. Position 0 is the first day name (Sunday by default) and position 6 is the last (Saturday). This simple format is easy to save, compare and check in microflows.
You can:
- change the day names
- show only the first characters of each name (for example Mo)
- change the text case
- style the days with inline CSS or your own CSS classes
- force days to be always on or always off; forced days can't be clicked
Use it for the working days of an employee, the opening days of a shop, the days a delivery or job should run, recurring appointments, or any "which days of the week" setting.
Documentation
Typical usage scenario
Use Week Days Picker when users need to choose which days of the week something applies to. The days are shown as a row of buttons; users click a day to select it and click again to clear it.
Where it helps:
- Working days or opening days of an office, shop or employee
- Days on which a delivery, job or reminder should run
- Recurring appointments or training days
- Any setting that needs a simple "which days of the week" choice
The selection is saved in one String attribute as 7 characters of 1 and 0. For example, 0111110 means Monday to Friday. It's easy to store, compare and check in microflows.
Features and limitations
Features:
- Click to select or clear a day; the full 7-character value is written on every click
- Custom day names (comma-separated), for example Mon,Tue,Wed,Thu,Fri,Sat,Sun
- Show only the first characters of each name (showChars)
- Text case: firstToUpper, toUpper or toLower
- Force days to be always active or inactive, for example 0:inactive,6:inactive. A stored value that breaks a forced state is corrected automatically.
- Styles for active days, inactive days, each day and the whole row (inline CSS, background-color or backgroundColor)
- Extra CSS classes for the wrapper and for each day
- Read-only support and a validation message
Limitations:
- Web only; native mobile is not supported.
- Every setting is an attribute of the context object; you can't type static values in the widget properties.
- The value is a String, not a list or Boolean attributes. Use substring in microflows to read single days.
- An empty value is shown as Monday and Saturday (0100001), but nothing is written until the user clicks. Give the attribute a default value such as 0000000.
- When showChars is empty, names are cut after 9 characters.
Dependencies
- Mendix Studio Pro 10.24.17 or a later 10.24 version
Installation
1. Download mendix.Weekdayspicker.mpk from the Marketplace or from the GitHub release Version1.1.0.
2. Copy it into the widgets folder of your app (App > Show App Directory in Explorer).
3. In Studio Pro, press F4 (App > Synchronize App Directory). The widget appears in the Toolbox as Weekdayspicker.
Configuration
1. Add a String attribute for the selection to your entity, for example Days, with the default value 0000000.
2. Add a String attribute for the day names, for example DayNames. The widget requires it; leave it empty for Sunday to Saturday.
3. Optionally, add attributes for the other settings: showChars as Integer; forcedState, the styles, textCase and the class names as String.
4. Place the widget in a data view of that entity.
5. On the General tab, set the first days value to the Days attribute (the widget writes here). Set the second days value to the expression $currentObject/Days (the widget shows this value). Both must point to the same attribute.
6. Select the attributes for the other properties you need.
Reading the value in a microflow: substring($Object/Days, 1, 1) = '1' is true when Monday is selected. The start position counts from 0.
Known bugs
No bugs.
Report issues at https://github.com/bharathidas/weekdays-input/issues
Frequently Asked Questions
What does the value 0100001 mean?
With the default names, Monday and Saturday are selected. Each position is one day, starting with Sunday at position 0.
Can the week start on Monday?
Yes. Set the day names to start with Monday, for example Mon,Tue,Wed,Thu,Fri,Sat,Sun; position 0 is then Monday. Don't change the order after values are stored, because the meaning of stored values would change.
Why do I see Monday and Saturday selected on a new object?
The value is empty, and the widget shows 0100001 in that case. Give the attribute a default value such as 0000000.
How do I make weekends impossible to select?
Set forcedState to 0:inactive,6:inactive (with the default names).
Why doesn't my style change the colour?
Use CSS property names with a colon and separate rules with ;, for example background-color: #264ae5; color: white. Theme classes need !important, because the widget uses inline styles.
Releases
Week Days Picker 1.1.0 for **Mendix Studio Pro 10.24.17** (web, React client).
## Compatibility
- Mendix Studio Pro 10.24.17 or a later 10.24 version, web profiles only.
- Built with `@mendix/pluggable-widgets-tools` 10.16.0 and React 18.
- No runtime dependencies (package about 10 KB).
- For Mendix 9, use [Version1.0.0](https://github.com/bharathidas/weekdays-input/releases/tag/Version1.0.0).
## Changes and fixes
- The react-weekdays-input 1.3.0 library (React 17 only) is replaced by a small built-in component with the same look and CSS classes.
- The stored value always has exactly 7 characters (`1` = selected, `0` = not selected; position 0 = first day name).
- `forcedState` can list only some days, for example `0:active,6:inactive`. In 1.0.0 a partial list shortened the value and disabled the other days.
- Forced days cannot be clicked. A value that breaks a forced state is corrected and written back once, only when needed and never to a read-only attribute.
- Read-only or unavailable attribute: nothing is written and all days are disabled. While the value is loading, nothing is shown.
- `wrapperClassName` and `selectorClassName` are applied; the Studio Pro class and style are applied to an outer `div`.
- The validation message of the attribute is shown.
- Day names are trimmed; fewer than 7 names no longer crash the widget. A negative `showChars` shows the full names.
- Style values may contain a colon, for example `url(...)`.
- The pointer / not-allowed cursor rules only apply inside the widget.
- New Studio Pro design-mode preview and fixes in the property descriptions.
- Widget source code is in the repository folder `weekdaysPicker`.
## Install
1. Download `mendix.Weekdayspicker.mpk` below.
2. Copy it into the `widgets` folder of your app and press **F4** (App > Synchronize App Directory).
3. Place **Weekdayspicker** in a data view whose entity has a String attribute for the days.
## Upgrade from 1.0.0
1. Replace the old `mendix.Weekdayspicker.mpk` in the `widgets` folder and press **F4**.
2. If Studio Pro reports that the widget definition changed, right-click the error and choose **Update all widgets**. Your settings are kept.
3. If the running app still shows the old widget, stop it, choose **App > Clean Deployment Directory** and run it again.
## Previous version
[Version1.0.0](https://github.com/bharathidas/weekdays-input/releases/tag/Version1.0.0) – widget 1.0.0 for Mendix 9.24.22.