Vue Scheduler Hide Resources

The scheduler can automatically hide non-working resource columns using the hideInvalidColumns property of view option.

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.

Get started with this example

Demo

Loading the live demo

Preview in full screen

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

Code

View code on GitHub 
<script setup>
import { MbscEventcalendar, setOptions  } from '@mobiscroll/vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

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

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

  // Dr. Catherine Lee – Dermatology
  {
    start: '2026-11-07T10:00',
    end: '2026-11-07T11:00',
    title: 'Acne Treatment',
    resource: 3
  },
  {
    start: '2026-11-08T15:00',
    end: '2026-11-08T16:00',
    title: 'Eczema Follow-up',
    resource: 3
  },
  {
    start: '2026-11-09T18:00',
    end: '2026-11-09T19:00',
    title: 'Psoriasis Checkup',
    resource: 3
  },
  {
    start: '2026-11-10T09:00',
    end: '2026-11-10T10:00',
    title: 'Skin Cancer Screening',
    resource: 3
  },
  {
    start: '2026-11-10T13:00',
    end: '2026-11-10T14:00',
    title: 'Rosacea Consultation',
    resource: 3
  },
  {
    start: '2026-11-11T10:00',
    end: '2026-11-11T11:30',
    title: 'Mole Removal',
    resource: 3
  },
  {
    start: '2026-11-12T11:00',
    end: '2026-11-12T12:00',
    title: 'Wart Removal',
    resource: 3
  },
  {
    start: '2026-11-13T15:30',
    end: '2026-11-13T16:30',
    title: 'Hair Loss Evaluation',
    resource: 3
  },
  {
    start: '2026-11-13T18:00',
    end: '2026-11-13T20:00',
    title: 'Scar Treatment',
    resource: 3
  },
  {
    start: '2026-11-14T14:00',
    end: '2026-11-14T15:00',
    title: 'Skin Allergy Test',
    resource: 3
  },
  {
    start: '2026-11-14T16:00',
    end: '2026-11-14T17:00',
    title: 'Rash Examination',
    resource: 3
  },
  {
    start: '2026-11-16T14:00',
    end: '2026-11-16T15:00',
    title: 'Cosmetic Consultation',
    resource: 3
  },
  {
    start: '2026-11-16T16:00',
    end: '2026-11-16T17:00',
    title: 'Pigmentation Check',
    resource: 3
  },
  {
    start: '2026-11-17T09:00',
    end: '2026-11-17T10:00',
    title: 'Routine Skin Exam',
    resource: 3
  },
  {
    start: '2026-11-17T12:00',
    end: '2026-11-17T15:00',
    title: 'Laser Therapy',
    resource: 3
  },

  // Dr. Daniel Kim – Cardiology
  {
    start: '2026-11-09T09:00',
    end: '2026-11-09T11:00',
    title: 'Heart Disease Screening',
    resource: 4
  },
  {
    start: '2026-11-10T16:00',
    end: '2026-11-10T17:00',
    title: 'Blood Pressure Check',
    resource: 4
  },
  {
    start: '2026-11-10T18:00',
    end: '2026-11-10T19:00',
    title: 'Arrhythmia Consultation',
    resource: 4
  },
  {
    start: '2026-11-11T14:00',
    end: '2026-11-11T17:00',
    title: 'Cardiac Rehab Session',
    resource: 4
  },
  {
    start: '2026-11-12T10:00',
    end: '2026-11-12T11:00',
    title: 'Cholesterol Review',
    resource: 4
  },
  {
    start: '2026-11-12T12:00',
    end: '2026-11-12T14:00',
    title: 'Heart Failure Management',
    resource: 4
  },
  {
    start: '2026-11-13T15:00',
    end: '2026-11-13T16:00',
    title: 'Palpitation Assessment',
    resource: 4
  },
  {
    start: '2026-11-13T17:00',
    end: '2026-11-13T18:00',
    title: 'Post-Stent Checkup',
    resource: 4
  },
  {
    start: '2026-11-14T11:00',
    end: '2026-11-14T12:00',
    title: 'Cardiac Risk Counseling',
    resource: 4
  },
  {
    start: '2026-11-14T13:00',
    end: '2026-11-14T15:00',
    title: 'ECG Review',
    resource: 4
  },
  {
    start: '2026-11-15T14:00',
    end: '2026-11-15T15:00',
    title: 'Heart Surgery Follow-up',
    resource: 4
  },
  {
    start: '2026-11-16T08:30',
    end: '2026-11-16T10:00',
    title: 'Angina Consultation',
    resource: 4
  },
  {
    start: '2026-11-16T12:00',
    end: '2026-11-16T13:00',
    title: 'Cholesterol Counseling',
    resource: 4
  },
  {
    start: '2026-11-17T15:00',
    end: '2026-11-17T16:00',
    title: 'Cardio Exercise Planning',
    resource: 4
  },
  {
    start: '2026-11-18T09:00',
    end: '2026-11-18T10:00',
    title: 'Routine Heart Check',
    resource: 4
  },

  // Dr. Eva Martinez – Orthopedics
  {
    start: '2026-11-08T09:00',
    end: '2026-11-08T11:00',
    title: 'Knee Pain Evaluation',
    resource: 5
  },
  {
    start: '2026-11-10T11:00',
    end: '2026-11-10T12:00',
    title: 'Fracture Checkup',
    resource: 5
  },
  {
    start: '2026-11-10T13:00',
    end: '2026-11-10T14:00',
    title: 'Hip Replacement Follow-up',
    resource: 5
  },
  {
    start: '2026-11-11T10:00',
    end: '2026-11-11T12:00',
    title: 'Back Pain Management',
    resource: 5
  },
  {
    start: '2026-11-11T13:00',
    end: '2026-11-11T15:00',
    title: 'Sports Injury Consultation',
    resource: 5
  },
  {
    start: '2026-11-12T14:00',
    end: '2026-11-12T15:00',
    title: 'Shoulder Injury Exam',
    resource: 5
  },
  {
    start: '2026-11-12T16:00',
    end: '2026-11-12T18:00',
    title: 'Arthritis Treatment',
    resource: 5
  },
  {
    start: '2026-11-13T11:00',
    end: '2026-11-13T12:30',
    title: 'Joint Pain Assessment',
    resource: 5
  },
  {
    start: '2026-11-13T13:00',
    end: '2026-11-13T14:00',
    title: 'Spinal Checkup',
    resource: 5
  },
  {
    start: '2026-11-15T08:00',
    end: '2026-11-15T10:00',
    title: 'Physical Therapy Session',
    resource: 5
  },
  {
    start: '2026-11-15T11:00',
    end: '2026-11-15T12:30',
    title: 'Post-Surgery Review',
    resource: 5
  },
  {
    start: '2026-11-16T11:00',
    end: '2026-11-16T12:00',
    title: 'Hip Pain Consultation',
    resource: 5
  },
  {
    start: '2026-11-16T13:00',
    end: '2026-11-16T14:00',
    title: 'Hand Injury Check',
    resource: 5
  },
  {
    start: '2026-11-17T13:00',
    end: '2026-11-17T14:00',
    title: 'Orthopedic Follow-up',
    resource: 5
  },
  {
    start: '2026-11-17T15:00',
    end: '2026-11-17T18: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-11-14T00:00',
    end: '2026-11-14T00:00',
    allDay: true,
    resource: 1,
    title: 'Dr. Alice Johnson OFF'
  },
  {
    start: '2026-11-11T00:00',
    end: '2026-11-11T00:00',
    allDay: true,
    resource: 2,
    title: 'Dr. Brian Smith OFF'
  },
  {
    start: '2026-11-10T00:00',
    end: '2026-11-10T00:00',
    allDay: true,
    resource: 3,
    title: 'Dr. Catherine Lee OFF'
  },
  {
    start: '2026-11-15T00:00',
    end: '2026-11-15T00:00',
    allDay: true,
    resource: 4,
    title: 'Dr. Daniel Kim OFF'
  },
  {
    start: '2026-11-18T00:00',
    end: '2026-11-18T00: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>

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.