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.

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 {
  Button,
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  CalendarToday,
  Eventcalendar,
  formatDate,
  Segmented,
  SegmentedGroup,
  setOptions,
  Toast ,
} from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';

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

function App() {
  const [myCssClass, setCssClass] = useState('mds-cell-template mds-cell-template-month-view');
  const [selectedView, setSelectedView] = useState('month');
  const [previousView, setPreviousView] = useState('month');
  const [currentDate, setCurrentDate] = useState(new Date());
  const [isToastOpen, setToastOpen] = useState(false);
  const [toastMessage, setToastMessage] = useState('');

  const weatherCacheRef = useRef({});

  const [myView, setView] = useState({
    calendar: {
      type: 'month',
    },
  });

  const [myEvents, setEvents] = useState(() => [
    {
      start: '2026-11-01T15:00',
      end: '2026-11-01T17:00',
      title: 'Operations Huddle',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-11-01T12:00',
      end: '2026-11-01T13:00',
      title: 'HR Policy Update',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-11-02T08:00',
      end: '2026-11-02T10:00',
      title: 'Team Retrospective',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-11-02T10:00',
      end: '2026-11-02T11:30',
      title: 'Proposal Review Meeting',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-11-02T12:00',
      end: '2026-11-02T13:00',
      title: 'Solutions Presentation',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-11-02T14:00',
      end: '2026-11-02T15:00',
      title: 'Follow-up Discussion',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-11-02T15:00',
      end: '2026-11-02T16:00',
      title: 'Performance Review',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-11-03T10:00',
      end: '2026-11-03T13:00',
      title: 'Client Onboarding',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-11-03T15:00',
      end: '2026-11-03T16:00',
      title: 'Marketing Campaign Brainstorm',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-11-02T10:00',
      end: '2026-11-02T12:00',
      title: 'Innovation Brainstorm',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-11-02T13:00',
      end: '2026-11-02T15:30',
      title: 'Onboarding Session',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-11-02T16:00',
      end: '2026-11-02T17:00',
      title: 'Discovery Call',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-11-09T09:00',
      end: '2026-11-09T10:00',
      title: 'Partnership Exploration',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-11-09T11:00',
      end: '2026-11-09T13:00',
      title: 'Service Implementation',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-11-09T14:00',
      end: '2026-11-09T15:00',
      title: 'Future Planning Summit',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-11-15T10:00',
      end: '2026-11-15T12:00',
      title: 'Strategy Alignment',
      type: 'meeting',
      color: '#634b67',
    },
    {
      start: '2026-11-18T12:00',
      end: '2026-11-18T14:00',
      title: 'Project Kick-off',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-11-18T15:00',
      end: '2026-11-18T16:00',
      title: 'Account Review',
      type: 'appointment',
      color: '#656d49',
    },
    {
      start: '2026-11-22T12:00',
      end: '2026-11-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',
      },
    },
  ]);

  const myDefaultEvent = useCallback(
    () => ({
      title: 'New appointment',
      type: 'appointment',
      color: '#656d49',
    }),
    [],
  );

  const generateRandomWeather = useCallback((date) => {
    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,
    };
  }, []);

  const getWeatherForDate = useCallback(
    (date) => {
      const key = date.getTime();
      if (!weatherCacheRef.current[key]) {
        weatherCacheRef.current[key] = generateRandomWeather(date);
      }
      return weatherCacheRef.current[key];
    },
    [generateRandomWeather],
  );

  const getStressLevel = useCallback((nrEvents) => {
    let emoji = '';
    let 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 };
  }, []);

  const getNrEvents = useCallback((events) => {
    let nrMeetings = 0;
    let nrAppointments = 0;

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

    return { meetings: nrMeetings, appointments: nrAppointments };
  }, []);

  const setCalendarView = useCallback(
    (view, date = undefined) => {
      if (view === 'day') {
        setPreviousView(selectedView);
      }

      setSelectedView(view);

      switch (view) {
        case 'month':
          setCssClass('mds-cell-template mds-cell-template-month-view');
          setView({
            calendar: { type: 'month' },
          });
          break;
        case 'week':
          setCssClass('mds-cell-template mds-cell-template-week-view');
          setView({
            scheduler: {
              type: 'week',
              allDay: false,
              startTime: '08:00',
              endTime: '17:00',
            },
          });
          break;
        case 'day':
          setCssClass('mds-cell-template mds-cell-template-day-view');
          setView({
            scheduler: {
              type: 'day',
              allDay: false,
              startTime: '08:00',
              endTime: '17:00',
            },
          });
          break;
      }
      if (date) {
        setCurrentDate(date);
      }
    },
    [selectedView],
  );

  const handleViewChange = useCallback(
    (ev) => {
      setCalendarView(ev.target.value);
    },
    [setCalendarView],
  );

  const handleBackToView = useCallback(() => {
    setCalendarView(previousView);
  }, [setCalendarView, previousView]);

  const handleDayClick = useCallback(
    (date) => {
      if (selectedView === 'week') {
        setCalendarView('day', date);
      }
    },
    [setCalendarView, selectedView],
  );

  const customDay = useCallback(
    (args) => {
      const date = args.date;
      const events = args.events;
      const nrEvents = getNrEvents(events);
      const nrAllEvents = events.length;
      const stressLevel = getStressLevel(nrAllEvents);
      const weather = getWeatherForDate(date);

      return (
        <div
          className="mds-cell-template-cont"
          style={{
            background: stressLevel.color && selectedView !== 'day' ? stressLevel.color : '',
          }}
          onClick={() => handleDayClick(date)}
        >
          <div className="mds-cell-template-day">{formatDate('DDD D, MMM', date) + ' ' + stressLevel.emoji + ' '}</div>
          <div>{weather.emoji + ' ' + weather.degree + '°C'}</div>
          <div className="mds-cell-template-info" style={{ color: '#634b67' }}>
            Internal mtgs: {nrEvents.meetings}
          </div>
          <div className="mds-cell-template-info" style={{ color: '#656d49' }}>
            Client mtgs: {nrEvents.appointments}
          </div>
          <Button className="mds-cell-template-add" icon="plus"></Button>
        </div>
      );
    },
    [selectedView, getNrEvents, getWeatherForDate, getStressLevel, handleDayClick],
  );

  const customHeader = useCallback(
    () => (
      <>
        <CalendarNav className="mds-cell-template-nav" />
        <div className="mds-cell-template-view-controls mbsc-flex-1-0">
          <Button color="secondary" startIcon="close" className="mds-cell-template-back" onClick={handleBackToView}>
            Back to calendar
          </Button>
          <div className="mds-cell-template-view-switch">
            <SegmentedGroup value={selectedView} onChange={handleViewChange}>
              <Segmented value="month" icon="material-date-range" className="mds-cell-template-view">
                Calendar
              </Segmented>
              <Segmented value="week" icon="material-event-note" className="mds-cell-template-view">
                Week view
              </Segmented>
            </SegmentedGroup>
          </div>
        </div>
        <CalendarPrev />
        <CalendarToday />
        <CalendarNext />
      </>
    ),
    [selectedView, handleViewChange, handleBackToView],
  );

  const onCellClick = useCallback(
    (args) => {
      const date = args.date;
      const target = args.domEvent.target;

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

        setEvents((prev) => [...prev, newEvent]);

        setToastMessage('Appointment added to ' + formatDate('DDD D, MMM', date));
        setToastOpen(true);
      } else if (selectedView === 'month') {
        setCalendarView('day', date);
      }
    },
    [selectedView, setCalendarView],
  );

  const handleSelectedDateChange = useCallback((args) => {
    setCurrentDate(args.date);
  }, []);

  const handleToastClose = useCallback(() => {
    setToastOpen(false);
  }, []);

  return (
    <>
      <Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        eventDelete={true}
        cssClass={myCssClass}
        data={myEvents}
        view={myView}
        selectedDate={currentDate}
        extendDefaultEvent={myDefaultEvent}
        renderCalendarDay={customDay}
        renderSchedulerDay={customDay}
        renderHeader={customHeader}
        onCellClick={onCellClick}
        onSelectedDateChange={handleSelectedDateChange}
      />
      <Toast isOpen={isToastOpen} message={toastMessage} onClose={handleToastClose} />
    </>
  );
}

export default App;

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.