Datocms Plugin Working Schedule Days

A simple plugin to quick add open and close hours for each day or range days in the week

This is a Community Plugin! Learn how create your own plugin, or copy and remix existing ones in our documentation

DatoCMS Working Schedule Days Plugin

A DatoCMS json field editor plugin for managing business operating hours. Quickly define opening and closing times for specific weekdays with support for multiple time slots per day (e.g., morning and evening shifts).

Preview

Features

✅ Multi-weekday selection with interactive checkboxes
✅ Multiple time slots per day (morning/evening/night shifts)
✅ Works with nested fields - supports blocks and nested models
✅ Clean UI - built with DatoCMS React UI components
✅ Type-safe - full TypeScript support

Quick Start

Installation

Build the plugin:
Terminal window
1 npm install 2 npm run build
Register in DatoCMS:
- Go to your DatoCMS project → Settings → Plugins
- Add the plugin using the plugin URL (local development or deployed)
- The plugin will be available immediately
Create a JSON field:
- Go to your content model
- Add a new JSON field (or use existing JSON field)
- In the field editor settings, select "Working Schedule Days"
Start using it:
- Open a record with the field
- Select weekdays and set opening/closing times
- Changes auto-save to DatoCMS

Data Structure

The plugin stores data as a JSON array of schedule entries. Each entry contains selected weekdays and one or more time slot pairs.

Data Schema

1
interface ScheduleEntry {
2
  id: string;              // Unique entry identifier
3
  weekdays: Weekday[];     // Array of selected days (0=Sunday, 6=Saturday)
4
  timeSlots: TimeSlot[];   // One or more open/close pairs
5
}
6

7
interface Weekday {
8
  position: number;        // 0-6 (0=Sunday, 6=Saturday)
9
  short: string;          // "Sun", "Mon", "Tue", etc.
10
  long: string;           // "Sunday", "Monday", "Tuesday", etc.
11
}
12

13
interface TimeSlot {
14
  id: string;             // Unique slot identifier
15
  open: string;           // Opening time in HH:MM format
16
  close: string;          // Closing time in HH:MM format
17
}

Use Cases

Retail Store Hours

1
[
2
  {
3
    "id": "entry-001",
4
    "weekdays": [
5
      { "position": 1, "short": "Mon", "long": "Monday" },
6
      { "position": 2, "short": "Tue", "long": "Tuesday" },
7
      { "position": 3, "short": "Wed", "long": "Wednesday" },
8
      { "position": 4, "short": "Thu", "long": "Thursday" },
9
      { "position": 5, "short": "Fri", "long": "Friday" }
10
    ],
11
    "timeSlots": [
12
      {
13
        "id": "slot-001",
14
        "open": "09:00",
15
        "close": "18:00"
16
      }
17
    ]
18
  },
19
  {
20
    "id": "entry-002",
21
    "weekdays": [
22
      { "position": 6, "short": "Sat", "long": "Saturday" }
23
    ],
24
    "timeSlots": [
25
      {
26
        "id": "slot-002",
27
        "open": "10:00",
28
        "close": "16:00"
29
      }
30
    ]
31
  }
32
]

Restaurant with Multiple Services

1
[
2
  {
3
    "id": "entry-lunch",
4
    "weekdays": [
5
      { "position": 2, "short": "Tue", "long": "Tuesday" },
6
      { "position": 3, "short": "Wed", "long": "Wednesday" },
7
      { "position": 4, "short": "Thu", "long": "Thursday" }
8
    ],
9
    "timeSlots": [
10
      {
11
        "id": "lunch-slot",
12
        "open": "11:30",
13
        "close": "14:00"
14
      },
15
      {
16
        "id": "dinner-slot",
17
        "open": "18:00",
18
        "close": "22:30"
19
      }
20
    ]
21
  }
22
]

Plugin Details

Property	Value
Plugin ID	`workingScheduleDays`
Field Types	JSON (only)
Extension Type	Field editor
Configurable	No
Permissions	None required

Development

Commands

1
# Start development server
2
npm run dev
3

4
# Build for production
5
npm run build
6

7
# Preview production build
8
npm run preview

Project Structure

1
src/
2
├── main.tsx                      # Plugin initialization & SDK connection
3
├── entrypoints/
4
│   ├── WorkingSchedule.tsx       # Main field editor component
5
│   └── ConfigScreen.tsx          # Configuration screen (minimal)
6
├── lib/
7
│   ├── constants.ts              # WEEKDAYS constant
8
│   ├── helper.ts                 # ID generation utilities
9
│   ├── saveFieldValue.ts         # Data persistence
10
│   └── formValuesHelper.ts       # Nested field value access
11
├── components/
12
│   ├── CloseIcon.tsx             # Close button icon
13
│   ├── PlusIcon.tsx              # Add button icon
14
│   └── MinusIcon.tsx             # Remove button icon
15
└── utils/
16
    └── render.tsx                # React DOM rendering

Key Technologies

React 18 - UI framework
TypeScript - Type safety
Vite - Build tool
DatoCMS Plugin SDK - Plugin communication
DatoCMS React UI - UI components
CSS Modules - Scoped styling

Customization

Styling

The plugin uses CSS Modules with custom properties for theming:

1
:root {
2
  --primary: #49abf5;              /* Selected day background */
3
  --accent-color: #6c5ce7;         /* Button colors */
4
  --remove-color: #ff6b6b;         /* Remove button color */
5
  --schedule-white: #f5f5f5;       /* Light backgrounds */
6
}

Edit src/entrypoints/WorkingSchedule.module.css to customize colors and layout.

Adding New Fields

To add additional fields to the schedule (e.g., staff notes, location):

Update the ScheduleEntry interface in src/entrypoints/WorkingSchedule.tsx
Add UI controls in ScheduleEntryComponent
Include in the saveFieldValue() call
Update CSS as needed

Contributing

Found a bug or have a feature request?

Look at the issue tracker
Create a detailed bug report with:
- Plugin version
- Steps to reproduce
- Expected vs actual behavior

Special Thanks

This plugin is inspired by and built upon the work of the Elevation Church - DatoCMS Plugin Schedule Listings project.

Reference Plugin: datocms-plugin-schedule-listings

License

MIT License - feel free to use this plugin in your DatoCMS projects