---
title: "Vue Scheduler Custom Date Header Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/scheduler/date-header-template"
---

# Custom Date Header - Vue Scheduler demo

Customize the date headers of the Vue Scheduler — add custom layouts, labels, and milestone badges to day columns. For Vue and Nuxt.

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

## Description

Customize the date headers of the scheduler by adding relevant content, labels or completely change how they look. Use the [`schedulerDayTemplate`](https://mobiscroll.com/docs/vue/eventcalendar/api#slot-schedulerDay) template for setting up a custom date header template.

## What this demo shows

- A desktop weekly scheduler for Monday through Friday, with repeated daily resources and a vertically scrollable time grid from 8 AM to 5 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.
- **Customized date header** Each day header uses a custom layout with bolded full day name, the month name, and the date below.
- **Milestone labels** Some date headers show a colored milestone badge, such as Project review, Product shipping, or Cycle finish.
- **Resources** Each day repeats the same resources: Ryan, Kate and John, showing an avatar and the person's name in bold below the avarat.
- **Time grid** The scheduler shows 9-hours range from 8 AM to 5 PM and can be scrolled vertically.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored 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

- **Team planning and project management** Schedule meetings, project reviews, tasks, and deadlines across multiple team members while keeping resource availability visible.
- **Manufacturing and production scheduling** Coordinate production teams, equipment, and operational activities, with milestones such as shipping dates or cycle completions highlighted in the date header.
- **Healthcare staff scheduling** Manage doctors, nurses, or specialists across shifts, with overlapping appointments and resource allocation shown clearly.
- **Consulting and professional services** Organize client appointments, workshops, and internal work sessions for consultants working across multiple projects.
- **Education and training centers** Plan classes, instructors, rooms, and training sessions, with drag-and-drop interactions for quick schedule adjustments.
- **Creative and marketing agencies** Coordinate designers, developers, content creators, and campaign milestones while keeping workloads and deadlines visible.
- **Field service and maintenance operations** Assign technicians to jobs throughout the week and reschedule appointments as priorities or availability change.

## 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
- [`clickToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-eventDelete) - option
- [`groupBy`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-groupBy) - 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

## Code

### SFC JS

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

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

const myEvents = ref([])

const myResources = ref([
  {
    id: 1,
    name: 'Ryan',
    color: '#f7c4b4',
    img: 'https://img.mobiscroll.com/demos/m1.png'
  },
  {
    id: 2,
    name: 'Kate',
    color: '#c6f1c9',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  },
  {
    id: 3,
    name: 'John',
    color: '#e8d0ef',
    img: 'https://img.mobiscroll.com/demos/m2.png'
  }
])

const myView = {
  scheduler: {
    type: 'week',
    allDay: false,
    startDay: 1,
    endDay: 5,
    startTime: '08:00',
    endTime: '17:00'
  }
}

const milestones = [
  {
    date: '2026-10-23T00:00',
    name: 'Project review',
    color: '#f5da7b'
  },
  {
    date: '2026-10-24T00:00',
    name: 'Product shipping',
    color: '#acf3a3'
  },
  {
    date: '2026-10-26T00:00',
    name: 'Cycle finish',
    color: '#ff84a0'
  }
]

function getTask(date) {
  return milestones.find((obj) => +new Date(obj.date) === +date) || {}
}

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

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    className="md-date-header-template"
    groupBy="date"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
  >
    <template #schedulerDay="day">
      <div class="header-template-container">
        <div class="header-template-date">
          <div class="header-template-day-name">{{ formatDate('DDDD', day.date) }}</div>
          <div class="header-template-day">{{ formatDate('MMMM DD', day.date) }}</div>
        </div>
        <div class="header-template-task" :style="{ background: getTask(day.date).color }">
          {{ getTask(day.date).name }}
        </div>
      </div>
    </template>
    <template #resource="resource">
      <div class="header-resource-template-content">
        <img class="header-resource-avatar" :src="resource.img" />
        <div class="header-resource-name">{{ resource.name }}</div>
      </div>
    </template>
  </MbscEventcalendar>
</template>

<style>
.md-date-header-template .mbsc-schedule-header-day-cont {
  display: block;
}

.header-template-container {
  padding: 10px;
}

.header-template-date {
  text-align: left;
  line-height: 20px;
}

.header-template-day-name {
  font-weight: bold;
}

.header-template-day {
  font-size: 12px;
}

.header-template-task {
  position: absolute;
  top: 14px;
  right: 10px;
  font-size: 12px;
  line-height: 22px;
  padding: 0 10px;
  border-radius: 12px;
  color: #555;
}

.header-resource-template-content {
  position: relative;
}

.header-resource-avatar {
  max-height: 40px;
  max-width: 40px;
}

.header-resource-name {
  font-size: 14px;
}
</style>
```

### SFC TS

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

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

const myEvents = ref<MbscCalendarEvent[]>([])

const myResources = ref<MbscResource[]>([
  {
    id: 1,
    name: 'Ryan',
    color: '#f7c4b4',
    img: 'https://img.mobiscroll.com/demos/m1.png'
  },
  {
    id: 2,
    name: 'Kate',
    color: '#c6f1c9',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  },
  {
    id: 3,
    name: 'John',
    color: '#e8d0ef',
    img: 'https://img.mobiscroll.com/demos/m2.png'
  }
])

const myView: MbscEventcalendarView = {
  scheduler: {
    type: 'week',
    allDay: false,
    startDay: 1,
    endDay: 5,
    startTime: '08:00',
    endTime: '17:00'
  }
}

const milestones = [
  {
    date: '2026-10-23T00:00',
    name: 'Project review',
    color: '#f5da7b'
  },
  {
    date: '2026-10-24T00:00',
    name: 'Product shipping',
    color: '#acf3a3'
  },
  {
    date: '2026-10-26T00:00',
    name: 'Cycle finish',
    color: '#ff84a0'
  }
]

function getTask(date: any): any {
  return milestones.find((obj) => +new Date(obj.date) === +date) || {}
}

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

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    className="md-date-header-template"
    groupBy="date"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
  >
    <template #schedulerDay="day">
      <div class="header-template-container">
        <div class="header-template-date">
          <div class="header-template-day-name">{{ formatDate('DDDD', day.date) }}</div>
          <div class="header-template-day">{{ formatDate('MMMM DD', day.date) }}</div>
        </div>
        <div class="header-template-task" :style="{ background: getTask(day.date).color }">
          {{ getTask(day.date).name }}
        </div>
      </div>
    </template>
    <template #resource="resource">
      <div class="header-resource-template-content">
        <img class="header-resource-avatar" :src="resource.img" />
        <div class="header-resource-name">{{ resource.name }}</div>
      </div>
    </template>
  </MbscEventcalendar>
</template>

<style>
.md-date-header-template .mbsc-schedule-header-day-cont {
  display: block;
}

.header-template-container {
  padding: 10px;
}

.header-template-date {
  text-align: left;
  line-height: 20px;
}

.header-template-day-name {
  font-weight: bold;
}

.header-template-day {
  font-size: 12px;
}

.header-template-task {
  position: absolute;
  top: 14px;
  right: 10px;
  font-size: 12px;
  line-height: 22px;
  padding: 0 10px;
  border-radius: 12px;
  color: #555;
}

.header-resource-template-content {
  position: relative;
}

.header-resource-avatar {
  max-height: 40px;
  max-width: 40px;
}

.header-resource-name {
  font-size: 14px;
}
</style>
```

## Implementation notes

- Use `view: { scheduler: { type: 'week', allDay: false, startDay: 1, endDay: 5, startTime: '08:00', endTime: '17:00' } }` - Mon-Fri, 8am-5pm, no all-day row. Set `groupBy: 'date'`. Load events via `getJson` from a JSONP endpoint on mount.
- Define 3 resources, each with `id`, `name`, `color`, and `img` (avatar URL): Ryan, Kate, John.
- Define a local `milestones` array of 3 objects (`date`, `name`, `color`) with dates relative to today (2 days ago, yesterday, tomorrow).
- Pass a custom day header renderer to `renderSchedulerDay` (Angular: `schedulerDayTemplate`, Vue: `#schedulerDay` slot). The renderer receives `args.date` - render the full day name with `formatDate('DDDD', date)` and the month/day with `formatDate('MMMM DD', date)`. Look up a milestone by comparing `+new Date(milestone.date) === +date`; if found, render a colored badge with the milestone name.
- Pass a custom resource renderer to `renderResource` (Angular: `resourceTemplate`, Vue: `#resource` slot). Render the resource's avatar image and name.

## 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: [Event Rendering](https://demo.mobiscroll.com/vue/scheduler/customizing-events.md) - Render custom event cards in the Vue Scheduler — add color stripes, labels, avatars, action buttons, and travel-time buffers.
- Next: [Resource Headers](https://demo.mobiscroll.com/vue/scheduler/custom-resource-header-template.md) - Build a Vue resource scheduler where each column shows a custom header — add avatar, name, and job title to identify resources at a glance.