Implementing Dynamic Business Hours with Custom Colors in Vue-Cal

[GerardoIbarra]

How to implement dynamic business hours with custom colors in Vue-Cal (not covered in docs)

Problem Identified
I've been working with Vue-Cal and encountered a scenario that's not covered in the official documentation: business hours with custom colors that come dynamically from an API.
The current documentation at Special Hours only shows static examples, but what happens when you need dynamic colors per provider?

• What I Searched For

• Vue-Cal official documentation

• Existing issues in the repo

• Stack Overflow and GitHub Discussions

• Community examples

Result: I couldn't find a complete solution for this use case.

• Solution I Implemented

• I developed a solution that combines:

• Store Pattern with Pinia for state management

• Dynamic CSS generation based on API colors

• Runtime CSS injection for Vue 3 compatibility

• Native Vue-Cal integration using special-hours

• Technical Implementation

Store for Dynamic CSS Generation

export const useScheduleStore = defineStore("schedule", () => {
  const specialHours = ref({});
  const generatedCss = ref("");

  const fetchSchedules = async () => {
    const res = await backResponseCrud.get('/schedules/appointments/availability/');
    const newSpecialHours = res.data.special_hours || {};
    let dynamicCssRules = "";

    // Generate dynamic CSS for each color
    for (const day in newSpecialHours) {
      const hoursArray = Array.isArray(newSpecialHours[day])
        ? newSpecialHours[day]
        : [newSpecialHours[day]];

      hoursArray.forEach((hourBlock) => {
        const color = hourBlock.metadata?.color;
        if (color) {
          const dynamicClass = `business-hours-${color.replace("#", "")}`;
          hourBlock.class = `business-hours ${dynamicClass}`;
          
          const backgroundColor = hexToRgba(color, 0.08);
          dynamicCssRules += `
            .vuecal__cell-content .${dynamicClass} {
              background-color: ${backgroundColor} !important;
            }
          `;
        }
      });
    }

    specialHours.value = newSpecialHours;
    generatedCss.value = dynamicCssRules;
  };
});

Hex to RGBA Conversion Function

const hexToRgba = (hex, alpha = 0.08) => {
  if (!hex) return "";
  
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

Component with CSS Injection ( this is in the componeneten but you would move an store)

const injectDynamicCSS = (css) => {
  if (!css) return;

  const existingStyle = document.getElementById("dynamic-business-hours-css");
  if (existingStyle) {
    existingStyle.remove();
  }

  const styleElement = document.createElement("style");
  styleElement.id = "dynamic-business-hours-css";
  styleElement.textContent = css;
  document.head.appendChild(styleElement);
};

// Reactive watcher
watch(generatedCss, (newCss) => {
  injectDynamicCSS(newCss);
}, { immediate: true });

Vue-Cal Integration

<template>
  <vue-cal
    :special-hours="specialHours || {}"
    :time-from="timeFrom || 0 * 60"
    :time-to="timeTo || 23 * 60"
    :views="providerId && events.length > 0 ? ['day', 'week'] : ['day']"
    @view-change="handleViewChange"
    @event-click="handleEventClick"
  />
</template>

Expected Data Structure

{
  "special_hours": {
    "mon": [
      {
        "start": "09:00",
        "end": "17:00",
        "metadata": {
          "color": "#FF5733"
        }
      }
    ],
    "tue": [
      {
        "start": "08:00",
        "end": "16:00",
        "metadata": {
          "color": "#33FF57"
        }
      }
    ]
  }
}

.vuecal__cell-content .business-hours-FF5733 {
  background-color: rgba(255, 87, 51, 0.08) !important;
}

.vuecal__cell-content .business-hours-33FF57 {
  background-color: rgba(51, 255, 87, 0.08) !important;
}

Detected CSS

watch(
  generatedCss,
  (newCss) => {
    injectDynamicCSS(newCss);
  },
  { immediate: true }
);

Clean styles when change of page

onUnmounted(() => {
  clearFilters();
  // Limpiar estilos al desmontar
  const existingStyle = document.getElementById("dynamic-business-hours-css");
  if (existingStyle) {
    existingStyle.remove();
  }
});

This implementation creates a reactive system where business hours are not just static visual elements, but dynamic, data-driven components that automatically adapt to different providers and color schemes. The solution bridges the gap between Vue-Cal's static special-hours feature and real-world applications that need dynamic theming.