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

Show events as full-day labels on a Timeline — useful for spotting overloaded resources and managing schedules without an hourly time grid.

Code

View code on GitHub 
import {
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  CalendarToday,
  Eventcalendar,
  Segmented,
  SegmentedGroup,
  setOptions ,
} from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';

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

function App() {
  const [view, setView] = useState('month');

  const [calView, setCalView] = useState({
    timeline: {
      type: 'month',
      eventDisplay: 'fill',
    },
  });

  const myEvents = useMemo(
    () => [
      {
        start: '2026-10-21T08:00',
        end: '2026-10-21T15:00',
        title: 'Event 1',
        resource: 1,
      },
      {
        start: '2026-10-21T10:00',
        end: '2026-10-21T13:00',
        title: 'Event 2',
        resource: 1,
      },
      {
        start: '2026-10-22T07:00',
        end: '2026-10-22T14:00',
        title: 'Event 3',
        resource: 1,
      },
      {
        start: '2026-10-20T09:00',
        end: '2026-10-20T15:00',
        title: 'Event 4',
        resource: 2,
      },
      {
        start: '2026-10-23T07:00',
        end: '2026-10-23T12:00',
        title: 'Event 5',
        resource: 2,
      },
      {
        start: '2026-10-24T11:00',
        end: '2026-10-24T16:00',
        title: 'Event 6',
        resource: 3,
      },
      {
        start: '2026-10-19T08:00',
        end: '2026-10-19T20:00',
        title: 'Event 7',
        resource: 4,
      },
      {
        start: '2026-10-22T09:00',
        end: '2026-10-22T15:00',
        title: 'Event 8',
        resource: 4,
      },
      {
        start: '2026-10-22T13:00',
        end: '2026-10-22T19:00',
        title: 'Event 9',
        resource: 5,
      },
      {
        start: '2026-10-23T12:00',
        end: '2026-10-23T20:00',
        title: 'Event 10',
        resource: 5,
      },
      {
        start: '2026-10-24T18:00',
        end: '2026-10-24T22:00',
        title: 'Event 11',
        resource: 5,
      },
      {
        start: '2026-10-18T10:00',
        end: '2026-10-18T16:00',
        title: 'Event 12',
        resource: 6,
      },
      {
        start: '2026-10-19T15:00',
        end: '2026-10-19T20:00',
        title: 'Event 13',
        resource: 6,
      },
    ],
    [],
  );

  const myResources = useMemo(
    () => [
      {
        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 changeView = useCallback((event) => {
    let calView;

    switch (event.target.value) {
      case 'workweek':
        calView = {
          timeline: {
            type: 'week',
            eventDisplay: 'fill',
            startDay: 1,
            endDay: 5,
          },
        };
        break;
      case 'week':
        calView = {
          timeline: {
            type: 'week',
            eventDisplay: 'fill',
          },
        };
        break;
      case 'month':
      default:
        calView = {
          timeline: {
            type: 'month',
            eventDisplay: 'fill',
          },
        };
        break;
    }

    setView(event.target.value);
    setCalView(calView);
  }, []);

  const renderMyHeader = useCallback(
    () => (
      <>
        <CalendarNav className="md-event-listing-nav" />
        <div className="md-event-listing-picker">
          <SegmentedGroup value={view} onChange={changeView}>
            <Segmented value="workweek">Work week</Segmented>
            <Segmented value="week">Week</Segmented>
            <Segmented value="month">Month</Segmented>
          </SegmentedGroup>
        </div>
        <CalendarPrev className="md-event-listing-prev" />
        <CalendarToday className="md-event-listing-today" />
        <CalendarNext className="md-event-listing-next" />
      </>
    ),
    [changeView, view],
  );

  return (
    <Eventcalendar
      clickToCreate={ }
      dragToCreate={ }
      dragToMove={ }
      dragToResize={ }
      eventDelete={ }
      view={calView}
      data={myEvents}
      resources={myResources}
      renderHeader={renderMyHeader}
      cssClass="md-event-listing"
    />
  );
}

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.