Day/Week View Switcher

Scheduling people, teams or an entire workforce requires different views. Sometimes you'll be needing a helicopter view of a week and other times you might want to dig into a specific day. This all can be served through a simple switching mechanism implemented with a segmented control right in the header of the calendar.

By dynamically changing the options you can set the level of detail you want to see. Eg. Show a daily timeline with hourly steps, show the work week with the same resolution or zoom out for a full week-view with 12 hour steps.

Want to see how to set other views?  Check out this example for switching views →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Build resource schedules with day, work-week, and full-week views on a Timeline — switch views from the header to control time-grid detail.

Code

View code on GitHub 
<script setup>
import {
  getJson,
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscCalendarToday,
  MbscEventcalendar,
  MbscSegmented,
  MbscSegmentedGroup,
  MbscToast,
  setOptions 
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const myEvents = ref([])
const calendarView = ref('week')
const isToastOpen = ref(false)

const myResources = [
  {
    id: 1,
    name: 'Ryan',
    color: '#ff0101',
    title: 'Cloud System Engineer',
    img: 'https://img.mobiscroll.com/demos/m1.png'
  },
  {
    id: 2,
    name: 'Kate',
    color: '#239a21',
    title: 'Help Desk Specialist',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  },
  {
    id: 3,
    name: 'John',
    color: '#8f1ed6',
    title: 'Application Developer',
    img: 'https://img.mobiscroll.com/demos/m2.png'
  },
  {
    id: 4,
    name: 'Mark',
    color: '#01adff',
    title: 'Network Administrator',
    img: 'https://img.mobiscroll.com/demos/m3.png'
  },
  {
    id: 5,
    name: 'Sharon',
    color: '#d8ca1a',
    title: 'Data Quality Manager',
    img: 'https://img.mobiscroll.com/demos/f2.png'
  }
]

const myView = ref({
  timeline: {
    type: 'week'
  }
})

const myInvalid = [
  {
    start: '00:00',
    end: '06:00',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO,TU,WE,TH,FR'
    }
  },
  {
    start: '20:00',
    end: '23:59',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO,TU,WE,TH,FR'
    }
  },
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'SA,SU'
    }
  }
]

function handleViewChange() {
  switch (calendarView.value) {
    case 'day':
      myView.value = {
        timeline: {
          type: 'day'
        }
      }
      break
    case 'workweek':
      myView.value = {
        timeline: {
          type: 'week',
          startDay: 1,
          endDay: 5
        }
      }
      break
    case 'week':
      myView.value = {
        timeline: {
          type: 'week'
        }
      }
      break
  }
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/timeline-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
    cssClass="md-switching-timeline-view-cont"
    :view="myView"
    :data="myEvents"
    :invalid="myInvalid"
    :resources="myResources"
    @event-create-failed="isToastOpen = true"
    @event-update-failed="isToastOpen = true"
  >
    <template #header>
      <MbscCalendarNav className="md-work-week-nav" />
      <div class="md-work-week-picker">
        <MbscSegmentedGroup v-model="calendarView" @change="handleViewChange">
          <MbscSegmented value="day"> Day </MbscSegmented>
          <MbscSegmented value="workweek"> Work week </MbscSegmented>
          <MbscSegmented value="week"> Week </MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev className="md-work-week-prev" />
      <MbscCalendarToday className="md-work-week-today" />
      <MbscCalendarNext className="md-work-week-next" />
    </template>
    <template #resource="resource">
      <div class="md-work-week-cont">
        <div class="md-work-week-name">{{ resource.name }}</div>
        <div class="md-work-week-title">{{ resource.title }}</div>
        <img class="md-work-week-avatar" :src="resource.img" />
      </div>
    </template>
  </MbscEventcalendar>
  <MbscToast
    message="Can't schedule outside of working hours"
    :isOpen="isToastOpen"
    @close="isToastOpen = false"
  />
</template>

<style>
.md-work-week-cont {
  position: relative;
  padding-left: 50px;
}

.md-work-week-avatar {
  position: absolute;
  max-height: 50px;
  max-width: 50px;
  top: 21px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 20px;
}

.md-work-week-name {
  font-size: 16px;
}

.md-work-week-title {
  font-size: 12px;
  margin-top: 5px;
}

.md-switching-timeline-view-cont .mbsc-segmented {
  max-width: 350px;
  margin: 0 auto;
  padding: 1px;
}

.md-work-week-picker {
  flex: 1 0 auto;
}

.md-work-week-nav {
  width: 200px;
}

.md-switching-timeline-view-cont .mbsc-timeline-resource {
  display: flex;
  align-items: center;
}

.md-switching-timeline-view-cont .mbsc-timeline-resource-col {
  width: 205px;
}

/* material header order */

.mbsc-material.md-work-week-prev {
  order: 1;
}

.mbsc-material.md-work-week-next {
  order: 2;
}

.mbsc-material.md-work-week-nav {
  order: 3;
}

.mbsc-material .md-work-week-picker {
  order: 4;
}

.mbsc-material .md-work-week-today {
  order: 5;
}

/* windows header order */

.mbsc-windows.md-work-week-nav {
  order: 1;
}

.mbsc-windows.md-work-week-prev {
  order: 2;
}

.mbsc-windows.md-work-week-next {
  order: 3;
}

.mbsc-windows .md-work-week-picker {
  order: 4;
}

.mbsc-windows .md-work-week-today {
  order: 5;
}
</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.