---
title: "Vue Scheduler Hide Resources Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/scheduler/hide-non-working-resources"
---

# Hide Resources - Vue Scheduler demo

Show only available staff in a Vue Scheduler — hide resource columns for days when staff are off, with support for recurring. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/scheduler/hide-non-working-resources)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/scheduler/hide-non-working-resources)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/scheduler/hide-non-working-resources)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/hide-non-working-resources.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/hide-non-working-resources.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/hide-non-working-resources.md), [React](https://demo.mobiscroll.com/react/scheduler/hide-non-working-resources.md)

## Description

The scheduler can automatically hide non-working resource columns using the `hideInvalidColumns` property of [`view` option](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view).

The calendar is set to a weekly view (Monday to Friday, 8:00-20:00) and displays multiple doctors as resources, each with unique working days. Recurring invalids are used to mark specific weekdays when a doctor is unavailable, while static invalids indicate individual days off. As a result, only the columns for resources who are working on a given day are shown, making the schedule cleaner and easier to read. This approach is ideal for managing staff with varying shifts and availability.

## What this demo shows

- A desktop weekly scheduler from Monday to Friday, with a fixed week strip, repeated resources for each day, and a vertically scrollable time grid running from 8 AM to 8 PM.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week strip**: The fixed strip below the header displays days from Monday to Friday in the selected week, with the current date highlighted by a blue circle.
- **Hidden invalid resources**: Resources that are marked as unavailable for a day are hidden from that day's scheduler columns.
- **Resource grouping**: Each visible doctor appears as a separate resource column inside the corresponding day column.
- **Custom resources**: Each resource header shows the doctor's picture, name, and specialty, with resource-specific colors used for the column styling.
- **Time grid** The scheduler shows 12-hours range from 8 AM to 8 PM and can be scrolled vertically.
- **Timed events** Timed events are displayed in the weekly scheduler grid as light blue cards with a blue stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

- **Staff schedules with different working days**: Hide unavailable staff from days when they are not scheduled to work.
- **Healthcare appointments**: Show only doctors, specialists, nurses, or treatment rooms that are available on the selected day.
- **Consulting and professional services**: Display only consultants, advisors, or service providers who are bookable on a given weekday.
- **Education and training**: Hide instructors, classrooms, or labs that are unavailable on specific days.
- **Field service scheduling**: Show only technicians, crews, or vehicles assigned to work in a specific daily schedule.
- **Shared equipment booking**: Keep unavailable machines, rooms, vehicles, or other resources out of the visible schedule.
- **Cleaner resource-heavy schedules**: Reduce empty columns in weekly scheduler views where many resources have different availability patterns.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - option
- [`colors`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-colors) - option
- [`invalid`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-invalid) - option
- [`groupBy`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-groupBy) - option
- [`cssClass`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-cssClass) - option

## Code

### SFC JS

```vue
<script setup>
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myEvents = [
  // Dr. Alice Johnson – Neurology
  {
    start: '2026-10-20T14:00',
    end: '2026-10-20T15:00',
    title: 'Migraine Consultation',
    resource: 1
  },
  {
    start: '2026-10-20T16:00',
    end: '2026-10-20T17:00',
    title: 'Epilepsy Follow-up',
    resource: 1
  },
  {
    start: '2026-10-21T11:00',
    end: '2026-10-21T12:00',
    title: 'Stroke Recovery Check',
    resource: 1
  },
  {
    start: '2026-10-22T10:00',
    end: '2026-10-22T11:00',
    title: 'Multiple Sclerosis Review',
    resource: 1
  },
  {
    start: '2026-10-22T14:00',
    end: '2026-10-22T16:00',
    title: 'Parkinson’s Management',
    resource: 1
  },
  {
    start: '2026-10-23T09:00',
    end: '2026-10-23T11:00',
    title: 'Cognitive Decline Exam',
    resource: 1
  },
  {
    start: '2026-10-23T11:30',
    end: '2026-10-23T13:00',
    title: 'Seizure Evaluation',
    resource: 1
  },
  {
    start: '2026-10-23T15:00',
    end: '2026-10-23T17:00',
    title: 'Headache Treatment',
    resource: 1
  },
  {
    start: '2026-10-24T15:00',
    end: '2026-10-24T16:00',
    title: 'Dementia Consultation',
    resource: 1
  },
  {
    start: '2026-10-24T17:00',
    end: '2026-10-24T19:00',
    title: 'Sleep Disorder Exam',
    resource: 1
  },
  {
    start: '2026-10-25T11:00',
    end: '2026-10-25T12:00',
    title: 'Balance Disorder Check',
    resource: 1
  },
  {
    start: '2026-10-25T13:00',
    end: '2026-10-25T16:00',
    title: 'Nerve Pain Therapy',
    resource: 1
  },
  {
    start: '2026-10-26T09:00',
    end: '2026-10-26T10:00',
    title: 'Follow-up Consultation',
    resource: 1
  },
  {
    start: '2026-10-26T13:00',
    end: '2026-10-26T14:00',
    title: 'Brain MRI Review',
    resource: 1
  },
  {
    start: '2026-10-27T15:00',
    end: '2026-10-27T17:00',
    title: 'Neuropathy Assessment',
    resource: 1
  },

  // Dr. Brian Smith – Pediatrics
  {
    start: '2026-10-19T09:00',
    end: '2026-10-19T10:00',
    title: 'Well-Child Checkup',
    resource: 2
  },
  {
    start: '2026-10-19T12:00',
    end: '2026-10-19T13:00',
    title: 'Vaccination Visit',
    resource: 2
  },
  {
    start: '2026-10-20T11:00',
    end: '2026-10-20T12:00',
    title: 'Asthma Follow-up',
    resource: 2
  },
  {
    start: '2026-10-21T12:00',
    end: '2026-10-21T13:00',
    title: 'Ear Infection Exam',
    resource: 2
  },
  {
    start: '2026-10-21T15:00',
    end: '2026-10-21T16:00',
    title: 'Growth & Nutrition Review',
    resource: 2
  },
  {
    start: '2026-10-22T09:00',
    end: '2026-10-22T10:00',
    title: 'School Physical',
    resource: 2
  },
  {
    start: '2026-10-22T13:00',
    end: '2026-10-22T14:00',
    title: 'Cough & Cold Symptoms',
    resource: 2
  },
  {
    start: '2026-10-23T11:00',
    end: '2026-10-23T12:00',
    title: 'Developmental Check',
    resource: 2
  },
  {
    start: '2026-10-23T13:00',
    end: '2026-10-23T14:00',
    title: 'Fever Consultation',
    resource: 2
  },
  {
    start: '2026-10-24T11:00',
    end: '2026-10-24T12:00',
    title: 'Allergy Testing',
    resource: 2
  },
  {
    start: '2026-10-24T09:00',
    end: '2026-10-24T10:00',
    title: 'Adolescent Counseling',
    resource: 2
  },
  {
    start: '2026-10-25T12:00',
    end: '2026-10-25T14:00',
    title: 'Behavioral Concerns',
    resource: 2
  },
  {
    start: '2026-10-25T10:00',
    end: '2026-10-25T11:00',
    title: 'Routine Checkup',
    resource: 2
  },
  {
    start: '2026-10-26T15:00',
    end: '2026-10-26T17:00',
    title: 'Nutrition Counseling',
    resource: 2
  },
  {
    start: '2026-10-26T18:00',
    end: '2026-10-26T20:00',
    title: 'Sports Physical',
    resource: 2
  },

  // Dr. Catherine Lee – Dermatology
  {
    start: '2026-10-17T10:00',
    end: '2026-10-17T11:00',
    title: 'Acne Treatment',
    resource: 3
  },
  {
    start: '2026-10-18T15:00',
    end: '2026-10-18T16:00',
    title: 'Eczema Follow-up',
    resource: 3
  },
  {
    start: '2026-10-19T18:00',
    end: '2026-10-19T19:00',
    title: 'Psoriasis Checkup',
    resource: 3
  },
  {
    start: '2026-10-20T09:00',
    end: '2026-10-20T10:00',
    title: 'Skin Cancer Screening',
    resource: 3
  },
  {
    start: '2026-10-20T13:00',
    end: '2026-10-20T14:00',
    title: 'Rosacea Consultation',
    resource: 3
  },
  {
    start: '2026-10-21T10:00',
    end: '2026-10-21T11:30',
    title: 'Mole Removal',
    resource: 3
  },
  {
    start: '2026-10-22T11:00',
    end: '2026-10-22T12:00',
    title: 'Wart Removal',
    resource: 3
  },
  {
    start: '2026-10-23T15:30',
    end: '2026-10-23T16:30',
    title: 'Hair Loss Evaluation',
    resource: 3
  },
  {
    start: '2026-10-23T18:00',
    end: '2026-10-23T20:00',
    title: 'Scar Treatment',
    resource: 3
  },
  {
    start: '2026-10-24T14:00',
    end: '2026-10-24T15:00',
    title: 'Skin Allergy Test',
    resource: 3
  },
  {
    start: '2026-10-24T16:00',
    end: '2026-10-24T17:00',
    title: 'Rash Examination',
    resource: 3
  },
  {
    start: '2026-10-26T14:00',
    end: '2026-10-26T15:00',
    title: 'Cosmetic Consultation',
    resource: 3
  },
  {
    start: '2026-10-26T16:00',
    end: '2026-10-26T17:00',
    title: 'Pigmentation Check',
    resource: 3
  },
  {
    start: '2026-10-27T09:00',
    end: '2026-10-27T10:00',
    title: 'Routine Skin Exam',
    resource: 3
  },
  {
    start: '2026-10-27T12:00',
    end: '2026-10-27T15:00',
    title: 'Laser Therapy',
    resource: 3
  },

  // Dr. Daniel Kim – Cardiology
  {
    start: '2026-10-19T09:00',
    end: '2026-10-19T11:00',
    title: 'Heart Disease Screening',
    resource: 4
  },
  {
    start: '2026-10-20T16:00',
    end: '2026-10-20T17:00',
    title: 'Blood Pressure Check',
    resource: 4
  },
  {
    start: '2026-10-20T18:00',
    end: '2026-10-20T19:00',
    title: 'Arrhythmia Consultation',
    resource: 4
  },
  {
    start: '2026-10-21T14:00',
    end: '2026-10-21T17:00',
    title: 'Cardiac Rehab Session',
    resource: 4
  },
  {
    start: '2026-10-22T10:00',
    end: '2026-10-22T11:00',
    title: 'Cholesterol Review',
    resource: 4
  },
  {
    start: '2026-10-22T12:00',
    end: '2026-10-22T14:00',
    title: 'Heart Failure Management',
    resource: 4
  },
  {
    start: '2026-10-23T15:00',
    end: '2026-10-23T16:00',
    title: 'Palpitation Assessment',
    resource: 4
  },
  {
    start: '2026-10-23T17:00',
    end: '2026-10-23T18:00',
    title: 'Post-Stent Checkup',
    resource: 4
  },
  {
    start: '2026-10-24T11:00',
    end: '2026-10-24T12:00',
    title: 'Cardiac Risk Counseling',
    resource: 4
  },
  {
    start: '2026-10-24T13:00',
    end: '2026-10-24T15:00',
    title: 'ECG Review',
    resource: 4
  },
  {
    start: '2026-10-25T14:00',
    end: '2026-10-25T15:00',
    title: 'Heart Surgery Follow-up',
    resource: 4
  },
  {
    start: '2026-10-26T08:30',
    end: '2026-10-26T10:00',
    title: 'Angina Consultation',
    resource: 4
  },
  {
    start: '2026-10-26T12:00',
    end: '2026-10-26T13:00',
    title: 'Cholesterol Counseling',
    resource: 4
  },
  {
    start: '2026-10-27T15:00',
    end: '2026-10-27T16:00',
    title: 'Cardio Exercise Planning',
    resource: 4
  },
  {
    start: '2026-10-28T09:00',
    end: '2026-10-28T10:00',
    title: 'Routine Heart Check',
    resource: 4
  },

  // Dr. Eva Martinez – Orthopedics
  {
    start: '2026-10-18T09:00',
    end: '2026-10-18T11:00',
    title: 'Knee Pain Evaluation',
    resource: 5
  },
  {
    start: '2026-10-20T11:00',
    end: '2026-10-20T12:00',
    title: 'Fracture Checkup',
    resource: 5
  },
  {
    start: '2026-10-20T13:00',
    end: '2026-10-20T14:00',
    title: 'Hip Replacement Follow-up',
    resource: 5
  },
  {
    start: '2026-10-21T10:00',
    end: '2026-10-21T12:00',
    title: 'Back Pain Management',
    resource: 5
  },
  {
    start: '2026-10-21T13:00',
    end: '2026-10-21T15:00',
    title: 'Sports Injury Consultation',
    resource: 5
  },
  {
    start: '2026-10-22T14:00',
    end: '2026-10-22T15:00',
    title: 'Shoulder Injury Exam',
    resource: 5
  },
  {
    start: '2026-10-22T16:00',
    end: '2026-10-22T18:00',
    title: 'Arthritis Treatment',
    resource: 5
  },
  {
    start: '2026-10-23T11:00',
    end: '2026-10-23T12:30',
    title: 'Joint Pain Assessment',
    resource: 5
  },
  {
    start: '2026-10-23T13:00',
    end: '2026-10-23T14:00',
    title: 'Spinal Checkup',
    resource: 5
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T10:00',
    title: 'Physical Therapy Session',
    resource: 5
  },
  {
    start: '2026-10-25T11:00',
    end: '2026-10-25T12:30',
    title: 'Post-Surgery Review',
    resource: 5
  },
  {
    start: '2026-10-26T11:00',
    end: '2026-10-26T12:00',
    title: 'Hip Pain Consultation',
    resource: 5
  },
  {
    start: '2026-10-26T13:00',
    end: '2026-10-26T14:00',
    title: 'Hand Injury Check',
    resource: 5
  },
  {
    start: '2026-10-27T13:00',
    end: '2026-10-27T14:00',
    title: 'Orthopedic Follow-up',
    resource: 5
  },
  {
    start: '2026-10-27T15:00',
    end: '2026-10-27T18:00',
    title: 'Sports Rehab Therapy',
    resource: 5
  }
]

const myResources = [
  {
    id: 1,
    name: 'Dr. Alice Johnson',
    specialty: 'Neurology',
    bgColor: '#d392e780',
    textColor: '#1b012280',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  },
  {
    id: 2,
    name: 'Dr. Brian Smith',
    specialty: 'Pediatrics',
    bgColor: '#69a9ff80',
    textColor: '#01285c80',
    img: 'https://img.mobiscroll.com/demos/m1.png'
  },
  {
    id: 3,
    name: 'Dr. Catherine Lee',
    specialty: 'Dermatology',
    bgColor: '#71c17680',
    textColor: '#02250580',
    img: 'https://img.mobiscroll.com/demos/f2.png'
  },
  {
    id: 4,
    name: 'Dr. Daniel Kim',
    specialty: 'Cardiology',
    bgColor: '#bf4d4d80',
    textColor: '#15010180',
    img: 'https://img.mobiscroll.com/demos/m2.png'
  },
  {
    id: 5,
    name: 'Dr. Eva Martinez',
    specialty: 'Orthopedics',
    bgColor: '#f0eb8980',
    textColor: '#1c1b0180',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  }
]

const myColors = [
  {
    resource: 1,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#fadaff4d'
  },
  {
    resource: 2,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#bfdeff4d'
  },
  {
    resource: 3,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#e1ffd64d'
  },
  {
    resource: 4,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#fac4c44d'
  },
  {
    resource: 5,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#ffffd04d'
  }
]

const myInvalids = [
  {
    recurring: { repeat: 'weekly', weekDays: 'MO,WE,FR' },
    resource: 1
  },
  {
    recurring: { repeat: 'weekly', weekDays: 'MO' },
    resource: 2
  },
  {
    recurring: { repeat: 'weekly', weekDays: 'TU,TH' },
    resource: 3
  },
  {
    recurring: { repeat: 'weekly', weekDays: 'TH,FR' },
    resource: 4
  },
  {
    recurring: { repeat: 'weekly', weekDays: 'MO,WE' },
    resource: 5
  },
  {
    start: '2026-10-24T00:00',
    end: '2026-10-24T00:00',
    allDay: true,
    resource: 1,
    title: 'Dr. Alice Johnson OFF'
  },
  {
    start: '2026-10-21T00:00',
    end: '2026-10-21T00:00',
    allDay: true,
    resource: 2,
    title: 'Dr. Brian Smith OFF'
  },
  {
    start: '2026-10-20T00:00',
    end: '2026-10-20T00:00',
    allDay: true,
    resource: 3,
    title: 'Dr. Catherine Lee OFF'
  },
  {
    start: '2026-10-25T00:00',
    end: '2026-10-25T00:00',
    allDay: true,
    resource: 4,
    title: 'Dr. Daniel Kim OFF'
  },
  {
    start: '2026-10-28T00:00',
    end: '2026-10-28T00:00',
    allDay: true,
    resource: 5,
    title: 'Dr. Eva Martinez OFF'
  }
]

const myView = {
  scheduler: {
    type: 'week',
    allDay: false,
    startDay: 1,
    endDay: 5,
    startTime: '08:00',
    endTime: '20:00',
    hideInvalidColumns: true
  }
}
</script>

<template>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :colors="myColors"
    :invalid="myInvalids"
    groupBy="date"
    cssClass="mds-hide-non-working-resources"
  >
    <template #resource="resource">
      <div
        class="mbsc-flex mds-hide-non-working-resources-bg"
        :style="{ 'background-color': resource.bgColor }"
      >
        <img
          class="mds-hide-non-working-resources-img mbsc-flex-none"
          :alt="resource.name"
          :src="resource.img"
        />
        <div class="mds-hide-non-working-resources-cont mbsc-flex-1-1">
          <div class="mds-hide-non-working-resources-name">{{ resource.name }}</div>
          <div class="mds-hide-non-working-resources-spec" :style="{ color: resource.textColor }">
            {{ resource.specialty }}
          </div>
        </div>
      </div>
    </template>
  </MbscEventcalendar>
</template>

<style>
/* Column width */

.mds-hide-non-working-resources .mbsc-schedule-col-width {
  width: 200px;
}

/* Resource header */

.mds-hide-non-working-resources .mbsc-schedule-resource-title {
  padding: 0;
}

.mds-hide-non-working-resources-bg {
  padding: 10px;
}

.mds-hide-non-working-resources-img {
  height: 40px;
  width: 40px;
  margin: 10px 0;
}

.mds-hide-non-working-resources-cont {
  padding: 10px;
  font-weight: bold;
  text-align: start;
}

.mds-hide-non-working-resources-name {
  font-size: 14px;
  line-height: 20px;
}

.mds-hide-non-working-resources-spec {
  font-size: 14px;
  line-height: 14px;
  margin-top: 4px;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myEvents: MbscCalendarEvent[] = [
  // Dr. Alice Johnson – Neurology
  {
    start: '2026-10-20T14:00',
    end: '2026-10-20T15:00',
    title: 'Migraine Consultation',
    resource: 1
  },
  {
    start: '2026-10-20T16:00',
    end: '2026-10-20T17:00',
    title: 'Epilepsy Follow-up',
    resource: 1
  },
  {
    start: '2026-10-21T11:00',
    end: '2026-10-21T12:00',
    title: 'Stroke Recovery Check',
    resource: 1
  },
  {
    start: '2026-10-22T10:00',
    end: '2026-10-22T11:00',
    title: 'Multiple Sclerosis Review',
    resource: 1
  },
  {
    start: '2026-10-22T14:00',
    end: '2026-10-22T16:00',
    title: 'Parkinson’s Management',
    resource: 1
  },
  {
    start: '2026-10-23T09:00',
    end: '2026-10-23T11:00',
    title: 'Cognitive Decline Exam',
    resource: 1
  },
  {
    start: '2026-10-23T11:30',
    end: '2026-10-23T13:00',
    title: 'Seizure Evaluation',
    resource: 1
  },
  {
    start: '2026-10-23T15:00',
    end: '2026-10-23T17:00',
    title: 'Headache Treatment',
    resource: 1
  },
  {
    start: '2026-10-24T15:00',
    end: '2026-10-24T16:00',
    title: 'Dementia Consultation',
    resource: 1
  },
  {
    start: '2026-10-24T17:00',
    end: '2026-10-24T19:00',
    title: 'Sleep Disorder Exam',
    resource: 1
  },
  {
    start: '2026-10-25T11:00',
    end: '2026-10-25T12:00',
    title: 'Balance Disorder Check',
    resource: 1
  },
  {
    start: '2026-10-25T13:00',
    end: '2026-10-25T16:00',
    title: 'Nerve Pain Therapy',
    resource: 1
  },
  {
    start: '2026-10-26T09:00',
    end: '2026-10-26T10:00',
    title: 'Follow-up Consultation',
    resource: 1
  },
  {
    start: '2026-10-26T13:00',
    end: '2026-10-26T14:00',
    title: 'Brain MRI Review',
    resource: 1
  },
  {
    start: '2026-10-27T15:00',
    end: '2026-10-27T17:00',
    title: 'Neuropathy Assessment',
    resource: 1
  },

  // Dr. Brian Smith – Pediatrics
  {
    start: '2026-10-19T09:00',
    end: '2026-10-19T10:00',
    title: 'Well-Child Checkup',
    resource: 2
  },
  {
    start: '2026-10-19T12:00',
    end: '2026-10-19T13:00',
    title: 'Vaccination Visit',
    resource: 2
  },
  {
    start: '2026-10-20T11:00',
    end: '2026-10-20T12:00',
    title: 'Asthma Follow-up',
    resource: 2
  },
  {
    start: '2026-10-21T12:00',
    end: '2026-10-21T13:00',
    title: 'Ear Infection Exam',
    resource: 2
  },
  {
    start: '2026-10-21T15:00',
    end: '2026-10-21T16:00',
    title: 'Growth & Nutrition Review',
    resource: 2
  },
  {
    start: '2026-10-22T09:00',
    end: '2026-10-22T10:00',
    title: 'School Physical',
    resource: 2
  },
  {
    start: '2026-10-22T13:00',
    end: '2026-10-22T14:00',
    title: 'Cough & Cold Symptoms',
    resource: 2
  },
  {
    start: '2026-10-23T11:00',
    end: '2026-10-23T12:00',
    title: 'Developmental Check',
    resource: 2
  },
  {
    start: '2026-10-23T13:00',
    end: '2026-10-23T14:00',
    title: 'Fever Consultation',
    resource: 2
  },
  {
    start: '2026-10-24T11:00',
    end: '2026-10-24T12:00',
    title: 'Allergy Testing',
    resource: 2
  },
  {
    start: '2026-10-24T09:00',
    end: '2026-10-24T10:00',
    title: 'Adolescent Counseling',
    resource: 2
  },
  {
    start: '2026-10-25T12:00',
    end: '2026-10-25T14:00',
    title: 'Behavioral Concerns',
    resource: 2
  },
  {
    start: '2026-10-25T10:00',
    end: '2026-10-25T11:00',
    title: 'Routine Checkup',
    resource: 2
  },
  {
    start: '2026-10-26T15:00',
    end: '2026-10-26T17:00',
    title: 'Nutrition Counseling',
    resource: 2
  },
  {
    start: '2026-10-26T18:00',
    end: '2026-10-26T20:00',
    title: 'Sports Physical',
    resource: 2
  },

  // Dr. Catherine Lee – Dermatology
  {
    start: '2026-10-17T10:00',
    end: '2026-10-17T11:00',
    title: 'Acne Treatment',
    resource: 3
  },
  {
    start: '2026-10-18T15:00',
    end: '2026-10-18T16:00',
    title: 'Eczema Follow-up',
    resource: 3
  },
  {
    start: '2026-10-19T18:00',
    end: '2026-10-19T19:00',
    title: 'Psoriasis Checkup',
    resource: 3
  },
  {
    start: '2026-10-20T09:00',
    end: '2026-10-20T10:00',
    title: 'Skin Cancer Screening',
    resource: 3
  },
  {
    start: '2026-10-20T13:00',
    end: '2026-10-20T14:00',
    title: 'Rosacea Consultation',
    resource: 3
  },
  {
    start: '2026-10-21T10:00',
    end: '2026-10-21T11:30',
    title: 'Mole Removal',
    resource: 3
  },
  {
    start: '2026-10-22T11:00',
    end: '2026-10-22T12:00',
    title: 'Wart Removal',
    resource: 3
  },
  {
    start: '2026-10-23T15:30',
    end: '2026-10-23T16:30',
    title: 'Hair Loss Evaluation',
    resource: 3
  },
  {
    start: '2026-10-23T18:00',
    end: '2026-10-23T20:00',
    title: 'Scar Treatment',
    resource: 3
  },
  {
    start: '2026-10-24T14:00',
    end: '2026-10-24T15:00',
    title: 'Skin Allergy Test',
    resource: 3
  },
  {
    start: '2026-10-24T16:00',
    end: '2026-10-24T17:00',
    title: 'Rash Examination',
    resource: 3
  },
  {
    start: '2026-10-26T14:00',
    end: '2026-10-26T15:00',
    title: 'Cosmetic Consultation',
    resource: 3
  },
  {
    start: '2026-10-26T16:00',
    end: '2026-10-26T17:00',
    title: 'Pigmentation Check',
    resource: 3
  },
  {
    start: '2026-10-27T09:00',
    end: '2026-10-27T10:00',
    title: 'Routine Skin Exam',
    resource: 3
  },
  {
    start: '2026-10-27T12:00',
    end: '2026-10-27T15:00',
    title: 'Laser Therapy',
    resource: 3
  },

  // Dr. Daniel Kim – Cardiology
  {
    start: '2026-10-19T09:00',
    end: '2026-10-19T11:00',
    title: 'Heart Disease Screening',
    resource: 4
  },
  {
    start: '2026-10-20T16:00',
    end: '2026-10-20T17:00',
    title: 'Blood Pressure Check',
    resource: 4
  },
  {
    start: '2026-10-20T18:00',
    end: '2026-10-20T19:00',
    title: 'Arrhythmia Consultation',
    resource: 4
  },
  {
    start: '2026-10-21T14:00',
    end: '2026-10-21T17:00',
    title: 'Cardiac Rehab Session',
    resource: 4
  },
  {
    start: '2026-10-22T10:00',
    end: '2026-10-22T11:00',
    title: 'Cholesterol Review',
    resource: 4
  },
  {
    start: '2026-10-22T12:00',
    end: '2026-10-22T14:00',
    title: 'Heart Failure Management',
    resource: 4
  },
  {
    start: '2026-10-23T15:00',
    end: '2026-10-23T16:00',
    title: 'Palpitation Assessment',
    resource: 4
  },
  {
    start: '2026-10-23T17:00',
    end: '2026-10-23T18:00',
    title: 'Post-Stent Checkup',
    resource: 4
  },
  {
    start: '2026-10-24T11:00',
    end: '2026-10-24T12:00',
    title: 'Cardiac Risk Counseling',
    resource: 4
  },
  {
    start: '2026-10-24T13:00',
    end: '2026-10-24T15:00',
    title: 'ECG Review',
    resource: 4
  },
  {
    start: '2026-10-25T14:00',
    end: '2026-10-25T15:00',
    title: 'Heart Surgery Follow-up',
    resource: 4
  },
  {
    start: '2026-10-26T08:30',
    end: '2026-10-26T10:00',
    title: 'Angina Consultation',
    resource: 4
  },
  {
    start: '2026-10-26T12:00',
    end: '2026-10-26T13:00',
    title: 'Cholesterol Counseling',
    resource: 4
  },
  {
    start: '2026-10-27T15:00',
    end: '2026-10-27T16:00',
    title: 'Cardio Exercise Planning',
    resource: 4
  },
  {
    start: '2026-10-28T09:00',
    end: '2026-10-28T10:00',
    title: 'Routine Heart Check',
    resource: 4
  },

  // Dr. Eva Martinez – Orthopedics
  {
    start: '2026-10-18T09:00',
    end: '2026-10-18T11:00',
    title: 'Knee Pain Evaluation',
    resource: 5
  },
  {
    start: '2026-10-20T11:00',
    end: '2026-10-20T12:00',
    title: 'Fracture Checkup',
    resource: 5
  },
  {
    start: '2026-10-20T13:00',
    end: '2026-10-20T14:00',
    title: 'Hip Replacement Follow-up',
    resource: 5
  },
  {
    start: '2026-10-21T10:00',
    end: '2026-10-21T12:00',
    title: 'Back Pain Management',
    resource: 5
  },
  {
    start: '2026-10-21T13:00',
    end: '2026-10-21T15:00',
    title: 'Sports Injury Consultation',
    resource: 5
  },
  {
    start: '2026-10-22T14:00',
    end: '2026-10-22T15:00',
    title: 'Shoulder Injury Exam',
    resource: 5
  },
  {
    start: '2026-10-22T16:00',
    end: '2026-10-22T18:00',
    title: 'Arthritis Treatment',
    resource: 5
  },
  {
    start: '2026-10-23T11:00',
    end: '2026-10-23T12:30',
    title: 'Joint Pain Assessment',
    resource: 5
  },
  {
    start: '2026-10-23T13:00',
    end: '2026-10-23T14:00',
    title: 'Spinal Checkup',
    resource: 5
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T10:00',
    title: 'Physical Therapy Session',
    resource: 5
  },
  {
    start: '2026-10-25T11:00',
    end: '2026-10-25T12:30',
    title: 'Post-Surgery Review',
    resource: 5
  },
  {
    start: '2026-10-26T11:00',
    end: '2026-10-26T12:00',
    title: 'Hip Pain Consultation',
    resource: 5
  },
  {
    start: '2026-10-26T13:00',
    end: '2026-10-26T14:00',
    title: 'Hand Injury Check',
    resource: 5
  },
  {
    start: '2026-10-27T13:00',
    end: '2026-10-27T14:00',
    title: 'Orthopedic Follow-up',
    resource: 5
  },
  {
    start: '2026-10-27T15:00',
    end: '2026-10-27T18:00',
    title: 'Sports Rehab Therapy',
    resource: 5
  }
]

const myResources: MbscResource[] = [
  {
    id: 1,
    name: 'Dr. Alice Johnson',
    specialty: 'Neurology',
    bgColor: '#d392e780',
    textColor: '#1b012280',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  },
  {
    id: 2,
    name: 'Dr. Brian Smith',
    specialty: 'Pediatrics',
    bgColor: '#69a9ff80',
    textColor: '#01285c80',
    img: 'https://img.mobiscroll.com/demos/m1.png'
  },
  {
    id: 3,
    name: 'Dr. Catherine Lee',
    specialty: 'Dermatology',
    bgColor: '#71c17680',
    textColor: '#02250580',
    img: 'https://img.mobiscroll.com/demos/f2.png'
  },
  {
    id: 4,
    name: 'Dr. Daniel Kim',
    specialty: 'Cardiology',
    bgColor: '#bf4d4d80',
    textColor: '#15010180',
    img: 'https://img.mobiscroll.com/demos/m2.png'
  },
  {
    id: 5,
    name: 'Dr. Eva Martinez',
    specialty: 'Orthopedics',
    bgColor: '#f0eb8980',
    textColor: '#1c1b0180',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  }
]

const myColors: MbscCalendarEvent[] = [
  {
    resource: 1,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#fadaff4d'
  },
  {
    resource: 2,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#bfdeff4d'
  },
  {
    resource: 3,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#e1ffd64d'
  },
  {
    resource: 4,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#fac4c44d'
  },
  {
    resource: 5,
    start: '08:00',
    end: '20:00',
    recurring: {
      repeat: 'daily'
    },
    background: '#ffffd04d'
  }
]

const myInvalids: MbscCalendarEvent[] = [
  {
    recurring: { repeat: 'weekly', weekDays: 'MO,WE,FR' },
    resource: 1
  },
  {
    recurring: { repeat: 'weekly', weekDays: 'MO' },
    resource: 2
  },
  {
    recurring: { repeat: 'weekly', weekDays: 'TU,TH' },
    resource: 3
  },
  {
    recurring: { repeat: 'weekly', weekDays: 'TH,FR' },
    resource: 4
  },
  {
    recurring: { repeat: 'weekly', weekDays: 'MO,WE' },
    resource: 5
  },
  {
    start: '2026-10-24T00:00',
    end: '2026-10-24T00:00',
    allDay: true,
    resource: 1,
    title: 'Dr. Alice Johnson OFF'
  },
  {
    start: '2026-10-21T00:00',
    end: '2026-10-21T00:00',
    allDay: true,
    resource: 2,
    title: 'Dr. Brian Smith OFF'
  },
  {
    start: '2026-10-20T00:00',
    end: '2026-10-20T00:00',
    allDay: true,
    resource: 3,
    title: 'Dr. Catherine Lee OFF'
  },
  {
    start: '2026-10-25T00:00',
    end: '2026-10-25T00:00',
    allDay: true,
    resource: 4,
    title: 'Dr. Daniel Kim OFF'
  },
  {
    start: '2026-10-28T00:00',
    end: '2026-10-28T00:00',
    allDay: true,
    resource: 5,
    title: 'Dr. Eva Martinez OFF'
  }
]

const myView: MbscEventcalendarView = {
  scheduler: {
    type: 'week',
    allDay: false,
    startDay: 1,
    endDay: 5,
    startTime: '08:00',
    endTime: '20:00',
    hideInvalidColumns: true
  }
}
</script>

<template>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :colors="myColors"
    :invalid="myInvalids"
    groupBy="date"
    cssClass="mds-hide-non-working-resources"
  >
    <template #resource="resource">
      <div
        class="mbsc-flex mds-hide-non-working-resources-bg"
        :style="{ 'background-color': resource.bgColor }"
      >
        <img
          class="mds-hide-non-working-resources-img mbsc-flex-none"
          :alt="resource.name"
          :src="resource.img"
        />
        <div class="mds-hide-non-working-resources-cont mbsc-flex-1-1">
          <div class="mds-hide-non-working-resources-name">{{ resource.name }}</div>
          <div class="mds-hide-non-working-resources-spec" :style="{ color: resource.textColor }">
            {{ resource.specialty }}
          </div>
        </div>
      </div>
    </template>
  </MbscEventcalendar>
</template>

<style>
/* Column width */

.mds-hide-non-working-resources .mbsc-schedule-col-width {
  width: 200px;
}

/* Resource header */

.mds-hide-non-working-resources .mbsc-schedule-resource-title {
  padding: 0;
}

.mds-hide-non-working-resources-bg {
  padding: 10px;
}

.mds-hide-non-working-resources-img {
  height: 40px;
  width: 40px;
  margin: 10px 0;
}

.mds-hide-non-working-resources-cont {
  padding: 10px;
  font-weight: bold;
  text-align: start;
}

.mds-hide-non-working-resources-name {
  font-size: 14px;
  line-height: 20px;
}

.mds-hide-non-working-resources-spec {
  font-size: 14px;
  line-height: 14px;
  margin-top: 4px;
}
</style>
```

## Implementation notes

- Use `view: { scheduler: { type: 'week', allDay: false, startDay: 1, endDay: 5, startTime: '08:00', endTime: '20:00', hideInvalidColumns: true } }` - Mon-Fri, 8am-8pm, no all-day row. Set `groupBy: 'date'`.
- Define 5 doctor resources. Each has `id`, `name`, plus custom fields: `specialty`, `bgColor`, `textColor`, and `img` (avatar URL).
- Define a large set of inline events (~75) with relative today dates, each assigned to a single doctor.
- Add a `colors` entry per resource: a daily recurring tint (`08:00–20:00`, `repeat: 'daily'`) giving each doctor's column a distinct semi-transparent background.
- Add `invalid` entries in two forms:
  - **Recurring weekly non-working days** per resource (e.g. Dr. Alice: Mon/Wed/Fri off; Dr. Brian: Mon off; etc.) - these hide the resource's column on those days when `hideInvalidColumns: true` is set.
  - **Specific individual days off** per resource: one `allDay: true` invalid with a `title` like "Dr. Alice Johnson OFF", scoped to that resource.
- Pass a custom resource renderer to `renderResource` (Angular: `resourceTemplate`, Vue: `#resource` slot). Render the doctor's avatar, name, and specialty, styled using `resource.bgColor` and `resource.textColor`.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Multi-Resource Configuration](https://demo.mobiscroll.com/vue/scheduler/resource-data-structure.md) - Configure multiple resources in a Vue Scheduler — assign ID, name, and color, and set per-resource rules for event drag, resize, and overlap.