Calendar Cell Component

The spr-calendar-cell component is designed to display shift information in calendar views for scheduling and time management applications. Each cell can represent different shift types, statuses, and display customizable content.

Overview

Calendar cells provide a standardized way to display:

Shift types with consistent color coding
Status indicators (approved, pending, error)
Time and location information
Custom content through slots

The component adapts to different contexts such as standard shifts, offline days (sick, vacation, etc.), and can be customized with different visual states.

Basic Usage

Shift Types

The Calendar Cell component supports various shift types, each with its own visual styling. This makes it easy to distinguish between different shifts at a glance.

9:00 AM - 5:00 PM

Main Branch

Standard Day Shift

5:00 AM - 1:00 PM

Main Branch

Early Morning

10:00 AM - 6:00 PM

Main Branch

Late Morning

1:00 PM - 9:00 PM

Main Branch

Afternoon Shift

11:00 PM - 7:00 AM

Main Branch

Graveyard Shift

9:00 AM - 5:00 PM

Main Branch

Broken Shift

9:00 AM - 5:00 PM

Main Branch

Multi Break Shift

9:00 AM - 5:00 PM

Main Branch

Flexible Break Shift

9:00 AM - 5:00 PM

Main Branch

Flexible Weekly

9:00 AM - 5:00 PM

Main Branch

Flexible Daily

9:00 AM - 5:00 PM

Main Branch

Fixed Flexible

vue

<template>
  <spr-calendar-cell
    v-for="(shift, index) in shifts"
    :key="index"
    :type="shift.type"
    :title="shift.timeRange"
    :description="shift.branchName"
    @click="handleClick"
  />
</template>

<script lang="ts" setup>
// Array of different shift types with their details
const shifts = [
  { type: 'standard', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8 },
  { type: 'early-morning', branchName: 'Main Branch', timeRange: '5:00 AM - 1:00 PM', hours: 8 },
  { type: 'late-morning', branchName: 'Main Branch', timeRange: '10:00 AM - 6:00 PM', hours: 8 },
  { type: 'afternoon', branchName: 'Main Branch', timeRange: '1:00 PM - 9:00 PM', hours: 8 },
  { type: 'graveyard', branchName: 'Main Branch', timeRange: '11:00 PM - 7:00 AM', hours: 8 },
  { type: 'broken', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8 },
  { type: 'multi-break', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8 },
  { type: 'flexible-break', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8 },
  { type: 'flexible-weekly', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8 },
  { type: 'flexible-daily', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8 },
  { type: 'fixed-flexible', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8 },
];

// Optional: Handle click events when viewOnly is false
function handleClick(event) {
  console.log('Cell clicked:', event);
}
</script>

Status Indicators

Calendar cells can display different statuses to indicate approval state. The status affects the border style and can optionally show error indicators.

9:00 AM - 5:00 PM

Main Branch

Standard Day Shift

9:00 AM - 5:00 PM

Main Branch

Standard Day Shift

9:00 AM - 5:00 PM

Main Branch

Standard Day Shift

vue

<template>
  <spr-calendar-cell
    v-for="(shift, index) in status"
    :key="index"
    :type="shift.type"
    :title="shift.timeRange"
    :description="shift.branchName"
    :status="shift.status"
  />
</template>

<script lang="ts" setup>
const status = [
  // Default/approved status - solid border
  { type: 'standard', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8, status: 'approved' },
  // Pending status - dashed border
  { type: 'standard', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8, status: 'pending' },
  // Error status - solid border with error indicator
  { type: 'standard', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8, status: 'error' },
];
</script>

Offline Status Types

The component includes special types for off days, absences, and holidays. These types automatically display appropriate icons and labels.

SICK

VACATION

EMERGENCY

RESTDAY

EXEMPT

HOLIDAY

SICK

VACATION

EMERGENCY

RESTDAY

EXEMPT

HOLIDAY

SICK

VACATION

EMERGENCY

RESTDAY

EXEMPT

HOLIDAY

vue

<template>
  <spr-calendar-cell v-for="(shift, index) in offline" :key="index" :type="shift.type" :status="shift.status" />
</template>

<script lang="ts" setup>
import SprCalendarCell from '@/components/calendar-cell/calendar-cell.vue';

const offline = [
  // Basic offline types
  { type: 'sick' },
  { type: 'vacation' },
  { type: 'emergency' },
  { type: 'restday' },
  { type: 'exempt' },
  { type: 'holiday' },

  // Offline types with pending status
  { status: 'pending', type: 'sick' },
  { status: 'pending', type: 'vacation' },
  { status: 'pending', type: 'emergency' },
  { status: 'pending', type: 'restday' },
  { status: 'pending', type: 'exempt' },
  { status: 'pending', type: 'holiday' },

  // Offline types with error status
  { status: 'error', type: 'sick' },
  { status: 'error', type: 'vacation' },
  { status: 'error', type: 'emergency' },
  { status: 'error', type: 'restday' },
  { status: 'error', type: 'exempt' },
  { status: 'error', type: 'holiday' },
];
</script>

Custom Content Using Slots

The component provides slots for completely custom content while preserving the cell's styling and status indicators.

Custom Content

You can add any HTML here

Pending Cell

With custom content

Error Cell

With custom content

vue

<template>
  <!-- Default calendar cell with custom content -->
  <spr-calendar-cell>
    <div class="spr-p-2">
      <div class="spr-font-medium">Custom Content</div>
      <div>You can add any HTML here</div>
    </div>
  </spr-calendar-cell>

  <!-- Pending status with custom content -->
  <spr-calendar-cell status="pending">
    <div class="spr-p-2">
      <div class="spr-font-medium">Pending Cell</div>
      <div>With custom content</div>
    </div>
  </spr-calendar-cell>

  <!-- Error status with custom content -->
  <spr-calendar-cell status="error">
    <div class="spr-p-2">
      <div class="spr-font-medium">Error Cell</div>
      <div>With custom content</div>
    </div>
  </spr-calendar-cell>
</template>

Full Width Display

By default, calendar cells have a maximum width. Use the fullwidth prop to make the cell expand to the full width of its container.

Full Width Calendar Cell

This cell takes up the entire available width

Standard Day Shift

Default Width Calendar Cell

This cell has the default max-width constraint

Standard Day Shift

vue

<template>
  <!-- Full width calendar cell -->
  <spr-calendar-cell
    fullwidth
    type="standard"
    title="Full Width Calendar Cell"
    description="This cell takes up the entire available width"
  />

  <!-- Default width calendar cell -->
  <spr-calendar-cell
    type="standard"
    title="Default Width Calendar Cell"
    description="This cell has the default max-width constraint"
  />
</template>

Loading State

Use the loading prop to display a skeletal loading animation while data is being fetched.

vue

<template>
  <spr-calendar-cell fullwidth loading />
</template>

Custom Colors

You can override the default color scheme using the custom-color prop. For proper background opacity, hexadecimal color codes are recommended.

Custom Hex Color

Using hex code with opacity

Late Morning

Named Color

Using named color without opacity

Late Morning

vue

<template>
  <!-- Using hex color code (recommended for proper opacity) -->
  <spr-calendar-cell
    custom-color="#b134eb"
    type="late-morning"
    title="Custom Hex Color"
    description="Using hex code with opacity"
  />

  <!-- Using named color (no opacity effect) -->
  <spr-calendar-cell
    custom-color="blue"
    type="late-morning"
    title="Named Color"
    description="Using named color without opacity"
  />
</template>

TIP

When using custom colors, hexadecimal format (e.g., #b134eb) is recommended for proper background opacity effects. The type prop's color styling will be ignored when custom-color is provided.

API Reference

Props

Name	Description	Type	Default
type	Defines the type of calendar cell with specific color styling and label	`standard` \| `early-morning` \| `late-morning` \| `afternoon` \| `graveyard` \| `broken` \| `multi-break` \| `flexible-break` \| `flexible-weekly` \| `flexible-daily` \| `fixed-flexible` \| `restday` \| `vacation` \| `holiday` \| `exempt` \| `sick` \| `emergency`	`standard`
status	Controls the visual status of the cell, affecting border style	`default` \| `approved` \| `pending` \| `error`	`default`
title	Primary text displayed in the cell, typically time information	string	`''`
description	Secondary text displayed in the cell, typically location information	string	`''`
state	The state used for the status component when in error state	`success` \| `information` \| `pending` \| `caution` \| `danger`	`danger`
fullwidth	Makes the cell take up the full width of its container	boolean	`false`
viewOnly	When true, disables click interactions (removes hover effects and click event)	boolean	`true`
subDescription	Optional text that overrides the default shift label	string	`''`
icon	Custom icon to override the default icons for offline status types	string	`''`
loading	Shows a skeletal loading animation instead of content	boolean	`false`
customColor	Applies a custom border and background color to the cell (hex format recommended for proper opacity)	string	`''`
className	Additional CSS class names to apply to the component	string	`''`
customBorderSize	Applies a custom border size to the cell	string	`''`

Events

Event Name	Description	Parameters
@onClick	Emitted when the calendar cell is clicked (only if `viewOnly` is `false`)	`(event: MouseEvent)`

Slots

Name	Description
default	Default slot for custom content, replaces the standard title, description, and shift label
prefix	Slot for custom content before the main content, replaces the status icon for offline types

Product Uses

Button

Calendar

Sidepanel

Table

Date Picker

Input

Select

Calendar Cell Component

Overview

Basic Usage

Shift Types

Status Indicators

Offline Status Types

Custom Content Using Slots

Full Width Display

Loading State

Custom Colors

API Reference

Props

Events

Slots

Product Uses

Calendar Cell Component ​

Overview ​

Basic Usage ​

Shift Types ​

Status Indicators ​

Offline Status Types ​

Custom Content Using Slots ​

Full Width Display ​

Loading State ​

Custom Colors ​

API Reference ​

Props ​

Events ​

Slots ​

Product Uses ​

Calendar Cell Component

Overview

Basic Usage

Shift Types

Status Indicators

Offline Status Types

Custom Content Using Slots

Full Width Display

Loading State

Custom Colors

API Reference

Props

Events

Slots

Product Uses