Day/Week View Switcher

Scheduling people, teams or an entire workforce requires different views. Sometimes you'll be needing a helicopter view of a week and other times you might want to dig into a specific day. This all can be served through a simple switching mechanism implemented with a segmented control right in the header of the calendar.

By dynamically changing the options you can set the level of detail you want to see. Eg. Show a daily timeline with hourly steps, show the work week with the same resolution or zoom out for a full week-view with 12 hour steps.

Want to see how to set other views?  Check out this example for switching views →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Build resource schedules with day, work-week, and full-week views on a Timeline — switch views from the header to control time-grid detail.

Code

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

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

function App() {
  const [myEvents, setEvents] = useState([]);
  const [view, setView] = useState('week');
  const [isToastOpen, setToastOpen] = useState(false);
  const [calView, setCalView] = useState({
    timeline: {
      type: 'week',
    },
  });

  const myResources = useMemo(
    () => [
      {
        id: 1,
        name: 'Ryan',
        color: '#ff0101',
        title: 'Cloud System Engineer',
        img: 'https://img.mobiscroll.com/demos/m1.png',
      },
      {
        id: 2,
        name: 'Kate',
        color: '#239a21',
        title: 'Help Desk Specialist',
        img: 'https://img.mobiscroll.com/demos/f1.png',
      },
      {
        id: 3,
        name: 'John',
        color: '#8f1ed6',
        title: 'Application Developer',
        img: 'https://img.mobiscroll.com/demos/m2.png',
      },
      {
        id: 4,
        name: 'Mark',
        color: '#01adff',
        title: 'Network Administrator',
        img: 'https://img.mobiscroll.com/demos/m3.png',
      },
      {
        id: 5,
        name: 'Sharon',
        color: '#d8ca1a',
        title: 'Data Quality Manager',
        img: 'https://img.mobiscroll.com/demos/f2.png',
      },
    ],
    [],
  );

  const myInvalids = useMemo(
    () => [
      {
        start: '00:00',
        end: '06:00',
        recurring: {
          repeat: 'weekly',
          weekDays: 'MO,TU,WE,TH,FR',
        },
      },
      {
        start: '20:00',
        end: '23:59',
        recurring: {
          repeat: 'weekly',
          weekDays: 'MO,TU,WE,TH,FR',
        },
      },
      {
        recurring: {
          repeat: 'weekly',
          weekDays: 'SA,SU',
        },
      },
    ],
    [],
  );

  const changeView = useCallback((event) => {
    let calView;

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

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

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

  const renderMyResource = useCallback(
    (resource) => (
      <div className="md-work-week-cont">
        <div className="md-work-week-name">{resource.name}</div>
        <div className="md-work-week-title">{resource.title}</div>
        <img className="md-work-week-avatar" src={resource.img} alt="Avatar" />
      </div>
    ),
    [],
  );

  const handleEventUpdateFail = useCallback(() => {
    setToastOpen(true);
  }, []);

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

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/timeline-events/',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div>
      <Eventcalendar
        clickToCreate={ }
        dragToCreate={ }
        dragToMove={ }
        dragToResize={ }
        eventDelete={ }
        view={calView}
        data={myEvents}
        invalid={myInvalids}
        resources={myResources}
        renderHeader={renderMyHeader}
        renderResource={renderMyResource}
        onEventCreateFailed={handleEventUpdateFail}
        onEventUpdateFailed={handleEventUpdateFail}
        cssClass="md-switching-timeline-view-cont"
      />
      <Toast message="Can't schedule outside of working hours" isOpen={isToastOpen} onClose={handleCloseToast} />
    </div>
  );
}

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.