Easyteam Embedded
GuidesAPIWhite-Label UIs
GuidesAPIWhite-Label UIs
  1. Component Reference
  • Integration
    • Easyteam Components
    • iframe Components
    • React Web Components
    • React Native Components
  • Component Reference
    • Time Clock Reference
    • Employees List Reference
    • Timesheets Reference
    • Shift Form Reference
    • Shift Notes Reference
    • Weekly Schedules Reference
    • Agenda Schedule Reference
    • Time Off Policies Settings Reference
    • Time Off Single Policy Reference
    • Organization Settings Reference
  • Themes
    • UI Customization
  1. Component Reference

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
Shift Form in the web timesheets
ShiftForm showing shift editing interface
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#

PropertyTypeRequiredDescription
employeeIdstringYesID of the employee whose shift to edit.
datestringYesDate of the shift in YYYY-MM-DD format.
onSave(data: ShiftData) => voidNoCallback when shift is saved.
onCancel() => voidNoCallback when editing is cancelled.
I'll create a documentation article for the ShiftForm component styling, following the template you provided.

Theme Elements#

Element NameTypePropertiesDescription
shiftsWrapperContainergapControls spacing between individual shifts.
shiftSingleContainerbackgroundColor, borderRadius, padding, borderStyles the container for a single shift entry.
shiftIconIconcolor, width, heightStyles the icon displayed for each shift.
shiftTitleTextfontFamily, fontSize, fontWeight, colorStyles the title text of a shift.
shiftDurationTextfontFamily, fontSize, colorStyles the text displaying shift duration.
shiftChevronIconcolorStyles the chevron/arrow icon used in the shift interface.
shiftAddButtonButtonbackgroundColor, color, fontFamily, fontWeight, borderRadius, _hover, _activeStyles the button for adding a new shift.
shiftSummaryBoxContainerbackgroundColor, borderRadius, padding, borderStyles the container showing shift summary information.
shiftSummaryBoxTitleTextfontFamily, fontSize, fontWeight, colorStyles the title of the shift summary box.
shiftSummaryColumnTitleTextfontFamily, fontSize, colorStyles the column titles in the shift summary.
shiftSummaryColumnValueTextfontFamily, fontSize, fontWeight, colorStyles the values in the shift summary columns.
shiftSaveButtonButtonbackgroundColor, color, fontFamily, fontWeight, borderRadius, _hoverStyles the button for saving shift changes.
shiftDeleteButtonButtonbackgroundColor, color, fontFamily, fontWeight, borderRadius, _hoverStyles the button for deleting shifts.
addBreakButtonButtonbackgroundColor, color, fontFamily, borderRadius, _hoverStyles the button for adding breaks to a shift.
shiftNotesSeparatorContainerheight, backgroundColorStyles the separator line between shift details and notes section.
shiftNotesTitleTextfontFamily, fontSize, fontWeight, colorStyles the title text for the notes section.
shiftNotesAddNoteButtonButtonbackgroundColor, color, fontFamily, borderRadius, _hoverStyles the button for adding notes to a shift.
shiftNotesInputInputfontFamily, borderColor, borderRadius, paddingStyles the input field for entering shift notes.
shiftNotesSendButtonButtonbackgroundColor, color, fontFamily, borderRadius, _hoverStyles 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 KeyDefault ValueDescription
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.
Modified at 2025-03-30 11:58:21
Previous
Timesheets Reference
Next
Shift Notes Reference