Shift Form Reference

The ShiftForm component provides a detailed interface for editing shifts, including clock times, breaks, and shift notes for an employee on a specific day.

Shift Form in the web timesheets

ShiftForm showing shift editing interface

The Shift Form component allows editing the data based on the user's permission level.

Basic Implementation

iframe

React

React Native

The ShiftForm component is opened automatically in the Timesheet iframe component when a shift is clicked.

State

The Shift Form might be real only or partially disabled in different situations. For example, when the currently logged in user was disabled, or when the timesheets are locked for a specific day. To override this default behavior, please reach out to your Easyteam account manager.

The Shift Form is set to shows the data for the date selected in the date picker. Based on your use case, you might want to hide this time picker when editing the Shift Form.

Component Properties

Property	Type	Required	Description
`employeeId`	`string`	Yes	ID of the employee whose shift to edit.
`date`	`string`	Yes	Date of the shift in YYYY-MM-DD format.
`onSave`	`(data: ShiftData) => void`	No	Callback when shift is saved.
`onCancel`	`() => void`	No	Callback when editing is cancelled.

I'll create a documentation article for the ShiftForm component styling, following the template you provided.

Theme Elements

Element Name	Type	Properties	Description
`shiftsWrapper`	`Container`	`gap`	Controls spacing between individual shifts.
`shiftSingle`	`Container`	`backgroundColor`, `borderRadius`, `padding`, `border`	Styles the container for a single shift entry.
`shiftIcon`	`Icon`	`color`, `width`, `height`	Styles the icon displayed for each shift.
`shiftTitle`	`Text`	`fontFamily`, `fontSize`, `fontWeight`, `color`	Styles the title text of a shift.
`shiftDuration`	`Text`	`fontFamily`, `fontSize`, `color`	Styles the text displaying shift duration.
`shiftChevron`	`Icon`	`color`	Styles the chevron/arrow icon used in the shift interface.
`shiftAddButton`	`Button`	`backgroundColor`, `color`, `fontFamily`, `fontWeight`, `borderRadius`, `_hover`, `_active`	Styles the button for adding a new shift.
`shiftSummaryBox`	`Container`	`backgroundColor`, `borderRadius`, `padding`, `border`	Styles the container showing shift summary information.
`shiftSummaryBoxTitle`	`Text`	`fontFamily`, `fontSize`, `fontWeight`, `color`	Styles the title of the shift summary box.
`shiftSummaryColumnTitle`	`Text`	`fontFamily`, `fontSize`, `color`	Styles the column titles in the shift summary.
`shiftSummaryColumnValue`	`Text`	`fontFamily`, `fontSize`, `fontWeight`, `color`	Styles the values in the shift summary columns.
`shiftSaveButton`	`Button`	`backgroundColor`, `color`, `fontFamily`, `fontWeight`, `borderRadius`, `_hover`	Styles the button for saving shift changes.
`shiftDeleteButton`	`Button`	`backgroundColor`, `color`, `fontFamily`, `fontWeight`, `borderRadius`, `_hover`	Styles the button for deleting shifts.
`addBreakButton`	`Button`	`backgroundColor`, `color`, `fontFamily`, `borderRadius`, `_hover`	Styles the button for adding breaks to a shift.
`shiftNotesSeparator`	`Container`	`height`, `backgroundColor`	Styles the separator line between shift details and notes section.
`shiftNotesTitle`	`Text`	`fontFamily`, `fontSize`, `fontWeight`, `color`	Styles the title text for the notes section.
`shiftNotesAddNoteButton`	`Button`	`backgroundColor`, `color`, `fontFamily`, `borderRadius`, `_hover`	Styles the button for adding notes to a shift.
`shiftNotesInput`	`Input`	`fontFamily`, `borderColor`, `borderRadius`, `padding`	Styles the input field for entering shift notes.
`shiftNotesSendButton`	`Button`	`backgroundColor`, `color`, `fontFamily`, `borderRadius`, `_hover`	Styles the button for sending/saving shift notes.

For a comprehensive overview of UI customization options and to learn more about theming across all components, please see our UI Customization Introduction article.

Custom Strings

Custom strings allows you to override any of the texts on the component with your own texts.

Custom Strings are currently in beta.

String Key	Default Value	Description
`shiftFormClockIn`	"Clock In"	Clock in input label.
`shiftFormClockOut`	"Clock Out"	Clock out input label.
`shiftFormBreakStart`	"Break Start"	Break start input label.
`shiftFormBreakEnd`	"Break End"	Break end input label.
`shiftFormBreakType`	"Break Type"	Break type selector label.
`shiftFormColumnHoursWorked`	"Hours Worked"	Hours column header.
`shiftFormColumnUnpaidBreaks`	"Unpaid Breaks"	Breaks column header.
`shiftFormColumnGrossPay`	"Gross Pay"	Pay column header.
`shiftFormSave`	"Save"	Save button text.
`shiftFormDeleteDay`	"Delete Time Card"	Delete button text.
`shiftFormAddTimecardTitle`	"Add Time Card"	Add new card title.
`shiftFormAddTimecardDateInputTitle`	"Date"	Date input label.

💡

ShiftForm includes built-in validation for overlapping shifts and break times, displaying appropriate error messages automatically.

Basic Implementation#

State#

Component Properties#

Theme Elements#

Custom Strings#

Basic Implementation

State

Component Properties

Theme Elements

Custom Strings