Day Cell Summary View

This demo showcases an advanced event calendar implementation with extensive day cell customization using the renderCalendarDay , 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.

Download and try 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 
mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

$(function () {
  var $calendarElm = $('#demo-day-cell-aggregate-information');
  var weatherCache = {};
  var selectedView = 'month';
  var previousView = 'month';
  var formatDate = mobiscroll.formatDate;

  var myEvents = [
    {
      start: '2026-10-23T15:00',
      end: '2026-10-23T17:00',
      title: 'Operations Huddle',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-23T12:00',
      end: '2026-10-23T13:00',
      title: 'HR Policy Update',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-24T08:00',
      end: '2026-10-24T10:00',
      title: 'Team Retrospective',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-24T10:00',
      end: '2026-10-24T11:30',
      title: 'Proposal Review Meeting',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-24T12:00',
      end: '2026-10-24T13:00',
      title: 'Solutions Presentation',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-24T14:00',
      end: '2026-10-24T15:00',
      title: 'Follow-up Discussion',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-24T15:00',
      end: '2026-10-24T16:00',
      title: 'Performance Review',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-10-25T10:00',
      end: '2026-10-25T13:00',
      title: 'Client Onboarding',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-10-25T15:00',
      end: '2026-10-25T16: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',
      },
    },
  ];

  function getWeatherForDate(date) {
    var key = date.getTime();
    if (!weatherCache[key]) {
      weatherCache[key] = generateRandomWeather(date);
    }
    return weatherCache[key];
  }

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

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

  function getStressLevel(nrEvents) {
    var emoji;
    var color;

    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 };
  }

  function getNrEvents(events) {
    var nrMeetings = 0;
    var nrAppointments = 0;

    for (var i = 0; i < events.length; i++) {
      var event = events[i];

      if (event.type === 'meeting') {
        nrMeetings++;
      } else {
        nrAppointments++;
      }
    }

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

  function renderDay(args) {
    var date = args.date;
    var nrEvents = getNrEvents(args.events);
    var nrAllEvents = args.events.length;
    var stressLevel = getStressLevel(nrAllEvents);
    var weather = getWeatherForDate(date);

    return (
      '<div class="mds-cell-template-cont" ' +
      (selectedView === 'week' ? 'data-date="' + date.getTime() + '"' : '') +
      (stressLevel.color && selectedView !== 'day' ? 'style="background:' + stressLevel.color : '') +
      '">' +
      '<div class="mds-cell-template-day">' +
      formatDate('DDD D, MMM', date) +
      ' ' +
      stressLevel.emoji +
      '</div>' +
      '<div>' +
      weather.emoji +
      ' ' +
      weather.degree +
      '°C</div>' +
      '<div class="mds-cell-template-info" style="color:#634b67">Internal mtgs: ' +
      nrEvents.meetings +
      '</div>' +
      '<div class="mds-cell-template-info" style="color:#656d49">Client mtgs: ' +
      nrEvents.appointments +
      '</div>' +
      '<button class="mds-cell-template-add" mbsc-button data-icon="plus"></button>' +
      '</div>'
    );
  }

  function setSelectedView(view, date) {
    if (view === 'day') {
      previousView = selectedView;
    }

    selectedView = view;

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

    if (date) {
      calendar.navigate(date);
    }
  }

  var calendar = $calendarElm
    .mobiscroll()
    .eventcalendar({
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      eventDelete: true,
      cssClass: 'mds-cell-template mds-cell-template-month-view',
      data: myEvents,
      view: {
        calendar: { type: 'month' },
      },
      extendDefaultEvent: function () {
        return {
          title: 'New appointment',
          type: 'appointment',
          color: '#656d49',
        };
      },
      renderCalendarDay: renderDay,
      renderSchedulerDay: renderDay,
      renderHeader: function () {
        return (
          '<div mbsc-calendar-nav class="mds-cell-template-nav"></div>' +
          '<div class="mds-cell-template-view-controls mbsc-flex-1-0">' +
          '<button mbsc-button data-color="secondary" data-start-icon="close" class="mds-cell-template-back">Back to calendar</button>' +
          '<div class="mds-cell-template-view-switch">' +
          '<label>Calendar<input mbsc-segmented type="radio" name="mds-cell-tpl-view" value="month" class="mds-cell-template-view" checked></label>' +
          '<label>Week view<input mbsc-segmented type="radio" name="mds-cell-tpl-view" value="week" class="mds-cell-template-view"></label>' +
          '</div></div>' +
          '<button mbsc-calendar-prev></button>' +
          '<button mbsc-calendar-today></button>' +
          '<button mbsc-calendar-next></button>'
        );
      },
      onCellClick: function (args) {
        var date = args.date;
        var addButton = args.domEvent.target.closest('.mds-cell-template-add');

        if (addButton) {
          var year = date.getFullYear();
          var month = date.getMonth();
          var day = date.getDate();

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

          calendar.addEvent(newEvent);

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

  // Event delegation for dynamic button
  $calendarElm
    .on('click', '.mds-cell-template-back', function () {
      setSelectedView(previousView);
    })
    .on('click', '.mds-cell-template-cont', function (ev) {
      if (selectedView === 'week') {
        setSelectedView('day', new Date($(ev.currentTarget).data('date')));
      }
    })
    .on('change', '.mds-cell-template-view', function (ev) {
      setSelectedView(ev.target.value);
    });
});

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.