Daily Event Listing

In situations when users are interested in seeing a daily summary rather than an hour-by-hour layout of events use the eventDisplay: 'fill' property under the timeline configuration of the view option.

This is especially useful for spotting overloaded resources/days and helps in managing and creating efficient schedules.

Are you building UI for planning employee shifts?  Check out this example →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Display events as full-day labels across resources on the Timeline — ideal for capacity checks and daily schedule overviews.

Code

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

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

const myEvents = [
  {
    start: '2026-11-03T08:00',
    end: '2026-11-03T15:00',
    title: 'Event 1',
    resource: 1
  },
  {
    start: '2026-11-03T10:00',
    end: '2026-11-03T13:00',
    title: 'Event 2',
    resource: 1
  },
  {
    start: '2026-11-04T07:00',
    end: '2026-11-04T14:00',
    title: 'Event 3',
    resource: 1
  },
  {
    start: '2026-11-02T09:00',
    end: '2026-11-02T15:00',
    title: 'Event 4',
    resource: 2
  },
  {
    start: '2026-11-05T07:00',
    end: '2026-11-05T12:00',
    title: 'Event 5',
    resource: 2
  },
  {
    start: '2026-11-06T11:00',
    end: '2026-11-06T16:00',
    title: 'Event 6',
    resource: 3
  },
  {
    start: '2026-11-01T08:00',
    end: '2026-11-01T20:00',
    title: 'Event 7',
    resource: 4
  },
  {
    start: '2026-11-04T09:00',
    end: '2026-11-04T15:00',
    title: 'Event 8',
    resource: 4
  },
  {
    start: '2026-11-04T13:00',
    end: '2026-11-04T19:00',
    title: 'Event 9',
    resource: 5
  },
  {
    start: '2026-11-05T12:00',
    end: '2026-11-05T20:00',
    title: 'Event 10',
    resource: 5
  },
  {
    start: '2026-11-06T18:00',
    end: '2026-11-06T22:00',
    title: 'Event 11',
    resource: 5
  },
  {
    start: '2026-10-31T10:00',
    end: '2026-10-31T16:00',
    title: 'Event 12',
    resource: 6
  },
  {
    start: '2026-11-01T15:00',
    end: '2026-11-01T20:00',
    title: 'Event 13',
    resource: 6
  }
]

const myResources = [
  {
    id: 1,
    name: 'Resource A',
    color: '#e20000'
  },
  {
    id: 2,
    name: 'Resource B',
    color: '#60e81a'
  },
  {
    id: 3,
    name: 'Resource C',
    color: '#3ba7ff'
  },
  {
    id: 4,
    name: 'Resource D',
    color: '#e25dd2'
  },
  {
    id: 5,
    name: 'Resource E',
    color: '#f1e920'
  },
  {
    id: 6,
    name: 'Resource F',
    color: '#1ac38d'
  }
]

const myView = ref({
  timeline: {
    type: 'month',
    eventDisplay: 'fill'
  }
})

const calendarView = ref('month')

function handleViewChange() {
  switch (calendarView.value) {
    case 'workweek':
      myView.value = {
        timeline: {
          type: 'week',
          eventDisplay: 'fill',
          startDay: 1,
          endDay: 5
        }
      }
      break
    case 'week':
      myView.value = {
        timeline: {
          type: 'week',
          eventDisplay: 'fill'
        }
      }
      break
    case 'month':
      myView.value = {
        timeline: {
          type: 'month',
          eventDisplay: 'fill'
        }
      }
      break
  }
}
</script>

<template>
  <MbscEventcalendar
    cssClass="md-event-listing"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
  >
    <template #header>
      <MbscCalendarNav className="md-event-listing-nav" />
      <div className="md-event-listing-picker">
        <MbscSegmentedGroup v-model="calendarView" @change="handleViewChange">
          <MbscSegmented value="workweek"> Work week </MbscSegmented>
          <MbscSegmented value="week"> Week </MbscSegmented>
          <MbscSegmented value="month"> Month </MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev className="md-event-listing-prev" />
      <MbscCalendarToday className="md-event-listing-today" />
      <MbscCalendarNext className="md-event-listing-next" />
    </template>
  </MbscEventcalendar>
</template>

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

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

.md-event-listing-name {
  font-size: 16px;
}

.md-event-listing-title {
  font-size: 12px;
  margin-top: 5px;
}

.md-event-listing .mbsc-segmented {
  max-width: 350px;
  margin: 0 auto;
  padding: 1px;
}

.md-event-listing-picker {
  flex: 1 0 auto;
}

.md-event-listing-nav {
  width: 200px;
}

/* material header order */

.mbsc-material.md-event-listing-prev {
  order: 1;
}

.mbsc-material.md-event-listing-next {
  order: 2;
}

.mbsc-material.md-event-listing-nav {
  order: 3;
}

.mbsc-material .md-event-listing-picker {
  order: 4;
}

.mbsc-material .md-event-listing-today {
  order: 5;
}

/* windows header order */

.mbsc-windows.md-event-listing-nav {
  order: 1;
}

.mbsc-windows.md-event-listing-prev {
  order: 2;
}

.mbsc-windows.md-event-listing-next {
  order: 3;
}

.mbsc-windows .md-event-listing-picker {
  order: 4;
}

.mbsc-windows .md-event-listing-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.