Calendar Cell Component

The spr-calendar-cell component is used to display a cell in a calendar view. It includes status, title, description, and shift label.

Basic Usage

Shift

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

<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>
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 },
];
</script>

Status

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

<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 = [
  { type: 'standard', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8, status: 'approved' },
  { type: 'standard', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8, status: 'pending' },
  { type: 'standard', branchName: 'Main Branch', timeRange: '9:00 AM - 5:00 PM', hours: 8, status: 'error' },
];
</script>

Offline

SICK

VACATION

EMERGENCY

RESTDAY

EXEMPT

HOLIDAY

SICK

VACATION

EMERGENCY

RESTDAY

EXEMPT

HOLIDAY

SICK

VACATION

EMERGENCY

RESTDAY

EXEMPT

HOLIDAY

<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 = [
  { type: 'sick' },
  { type: 'vacation' },
  { type: 'emergency' },
  { type: 'restday' },
  { type: 'exempt' },
  { type: 'holiday' },
  { status: 'pending', type: 'sick' },
  { status: 'pending', type: 'vacation' },
  { status: 'pending', type: 'emergency' },
  { status: 'pending', type: 'restday' },
  { status: 'pending', type: 'exempt' },
  { status: 'pending', type: 'holiday' },
  { 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>

Slot

Content here...

Content here...

Content here...

<spr-calendar-cell>
    Content here...
  </spr-calendar-cell>
<spr-calendar-cell status="pending">
    Content here...
  </spr-calendar-cell>
<spr-calendar-cell status="error">
    Content here...
  </spr-calendar-cell>

fullwidth

Standard Day Shift

Standard Day Shift

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

API Reference

Name	Description	Type	Default
type	The type of shift	string	standard | early-morning | late-morning | afternoon | graveyard | broken | multi-break | flexible-break | flexible-weekly | flexible-daily | fixed-flexible | restday | vacation | holiday | exempt | sick | holiday | emergency
status	The visual style of the card	string	approved | pending | error
title	The title to be displayed in the cell.	String	''
description	The description to be displayed in the cell.	String	''
state	The state associated with the status.	String	'success', 'information', 'pending', 'caution', 'danger'
fullwidth	change cell width	Boolean	false
viewOnly	Disables the event click trigger	Boolean	true
@onClick	emits when click	function	-

Product Uses