Day Cell Summary View

This demo showcases an advanced event calendar implementation with extensive day cell customization using the calendarDayTemplate , which completely overrides the default cell rendering.

The calendar provides a comprehensive visual overview of scheduling density and workload management through custom aggregate data visualization with stress-level indicators, weather information, and color-coded backgrounds.

This approach prevents the calendar from rendering individual event labels, allowing full control over the cell content. Each day cell displays aggregate information calculated from the actual events, received by the custom template.

Users can navigate smoothly from the monthly or weekly overview to a detailed daily schedule by clicking on a day cell, which highlights the selected day and loads all events. A convenient back button allows a quick return to the previous view. Each cell also includes an add button for creating new appointments, and events can be added by dragging or clicking in the week or day view.

Get started with this example

Demo

Loading the live demo

Preview in full screen

Display color-coded daily event summaries in a event calendar — each cell shows meetings and workload density, with drill-down to day and week views.

Code

View code on GitHub 
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  formatDate,
  MbscCalendarEvent,
  MbscCellClickEvent,
  MbscDateType,
  MbscEventcalendarView,
  MbscModule,
  Notifications,
  setOptions ,
} from '@mobiscroll/angular';

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

interface WeatherData {
  date: Date;
  degree: number;
  emoji: string;
}

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
  constructor(private notify: Notifications) {}

  myCssClass = 'mds-cell-template mds-cell-template-month-view';
  weatherCache: Record<string, { date: Date; degree: number; emoji: string }> = {};
  selectedView = 'month';
  previousView = 'month';
  currentDate: MbscDateType = new Date();

  myEvents: MbscCalendarEvent[] = [
    {
      start: '2026-10-25T15:00',
      end: '2026-10-25T17:00',
      title: 'Operations Huddle',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-25T12:00',
      end: '2026-10-25T13:00',
      title: 'HR Policy Update',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-26T08:00',
      end: '2026-10-26T10:00',
      title: 'Team Retrospective',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-26T10:00',
      end: '2026-10-26T11:30',
      title: 'Proposal Review Meeting',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-26T12:00',
      end: '2026-10-26T13:00',
      title: 'Solutions Presentation',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-26T14:00',
      end: '2026-10-26T15:00',
      title: 'Follow-up Discussion',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-26T15:00',
      end: '2026-10-26T16:00',
      title: 'Performance Review',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-27T10:00',
      end: '2026-10-27T13:00',
      title: 'Client Onboarding',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-27T15:00',
      end: '2026-10-27T16:00',
      title: 'Marketing Campaign Brainstorm',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-02T10:00',
      end: '2026-10-02T12:00',
      title: 'Innovation Brainstorm',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-02T13:00',
      end: '2026-10-02T15:30',
      title: 'Onboarding Session',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-02T16:00',
      end: '2026-10-02T17:00',
      title: 'Discovery Call',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-09T09:00',
      end: '2026-10-09T10:00',
      title: 'Partnership Exploration',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-09T11:00',
      end: '2026-10-09T13:00',
      title: 'Service Implementation',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-09T14:00',
      end: '2026-10-09T15:00',
      title: 'Future Planning Summit',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-15T10:00',
      end: '2026-10-15T12:00',
      title: 'Strategy Alignment',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-18T12:00',
      end: '2026-10-18T14:00',
      title: 'Project Kick-off',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-18T15:00',
      end: '2026-10-18T16:00',
      title: 'Account Review',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-22T12:00',
      end: '2026-10-22T14:00',
      title: 'Deep Dive Session',
      type: 'meeting',
      color: '#634b67',
    },
    {
      title: 'Fresh start meeting',
      start: '09:00',
      end: '10:00',
      type: 'meeting',
      color: '#634b67',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO',
      },
    },
    {
      title: 'Weekly wrapup',
      start: '16:00',
      end: '16:30',
      type: 'meeting',
      color: '#634b67',
      recurring: {
        repeat: 'weekly',
        weekDays: 'FR',
      },
    },
  ];

  myView: MbscEventcalendarView = {
    calendar: {
      type: 'month',
    },
  };

  myDefaultEvent(): MbscCalendarEvent {
    return {
      title: 'New appointment',
      type: 'appointment',
      color: '#656d49',
    };
  }

  getWeatherForDate(date: Date): WeatherData {
    const key = date.getTime();
    if (!this.weatherCache[key]) {
      this.weatherCache[key] = this.generateRandomWeather(date);
    }
    return this.weatherCache[key];
  }

  generateRandomWeather(date: Date): WeatherData {
    const weatherTypes = [
      { emoji: '☀️', min: 24, max: 30 },
      { emoji: '🌤️', min: 20, max: 25 },
      { emoji: '☁️', min: 17, max: 22 },
      { emoji: '🌧️', min: 15, max: 20 },
    ];
    const type = weatherTypes[Math.floor(Math.random() * weatherTypes.length)];
    const degree = Math.floor(Math.random() * (type.max - type.min + 1)) + type.min;

    return {
      date: date,
      degree: degree,
      emoji: type.emoji,
    };
  }

  getStressLevel(nrEvents: number) {
    let emoji: string;
    let color: string;

    if (nrEvents < 1) {
      emoji = '';
      color = '';
    } else if (nrEvents < 3) {
      emoji = '😃';
      color = '#6ece86ff';
    } else if (nrEvents < 5) {
      emoji = '😐';
      color = '#d89c6aff';
    } else {
      emoji = '😫';
      color = '#d6727aff';
    }
    return { emoji: emoji, color: color };
  }

  getNrEvents(events: MbscCalendarEvent[]) {
    let nrMeetings = 0;
    let nrAppointments = 0;

    for (const event of events) {
      if (event['type'] === 'meeting') {
        nrMeetings++;
      } else {
        nrAppointments++;
      }
    }

    return { meetings: nrMeetings, appointments: nrAppointments };
  }

  setSelectedView(view: string, date?: Date) {
    if (view === 'day') {
      this.previousView = this.selectedView;
    }

    this.selectedView = view;

    switch (view) {
      case 'month':
        this.myCssClass = 'mds-cell-template mds-cell-template-month-view';
        this.myView = {
          calendar: { type: 'month' },
        };
        break;
      case 'week':
        this.myCssClass = 'mds-cell-template mds-cell-template-week-view';
        this.myView = {
          scheduler: {
            type: 'week',
            allDay: false,
            startTime: '08:00',
            endTime: '17:00',
          },
        };
        break;
      case 'day':
        this.myCssClass = 'mds-cell-template mds-cell-template-day-view';
        this.myView = {
          scheduler: {
            type: 'day',
            allDay: false,
            startTime: '08:00',
            endTime: '17:00',
          },
        };
        break;
    }

    if (date) {
      this.currentDate = date;
    }
  }

  handleCellClick(args: MbscCellClickEvent) {
    const date = args.date;
    const target = args.domEvent.target as HTMLElement;

    if (target.closest('.mds-cell-template-add')) {
      const year = date.getFullYear();
      const month = date.getMonth();
      const day = date.getDate();

      const newEvent = {
        title: 'New appointment',
        start: new Date(year, month, day, 9),
        end: new Date(year, month, day, 10),
        color: '#ecee8d',
      };

      this.myEvents = [...this.myEvents, newEvent];

      this.notify.toast({
        message: 'Appointment added to ' + formatDate('DDD D, MMM', date),
      });
    } else if (this.selectedView === 'month') {
      this.setSelectedView('day', date);
    }
  }

  getDayTemplate(args: { date: Date; events: MbscCalendarEvent[] }) {
    const date = args.date;
    const nrEvents = this.getNrEvents(args.events);
    const nrAllEvents = args.events.length;
    const stressLevel = this.getStressLevel(nrAllEvents);
    const weather = this.getWeatherForDate(date);

    return {
      dayContent: formatDate('DDD D, MMM', date) + ' ' + stressLevel.emoji,
      weather: weather.emoji + ' ' + weather.degree + '°C',
      stressLevelColor: stressLevel.color,
      nrMeetings: nrEvents.meetings,
      nrAppointments: nrEvents.appointments,
    };
  }
}

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.