Javascript team meeting planner across timezones

Setting up meetings across multiple timezones is messy and hard task. In this example, built with the Mobiscroll scheduler we've laid out a timeline with multiple resources that represent the teammates. Each team member can be in separate timezones which means we need to account for the various offsets.

First we need to set a base timezone, which for the sake of simplicity is UTC and it is the timezone of the first resource, the meeting organizer. This also means that the scheduler operates in this timezone set through the dataTimezone and displayTimezone options. To learn more about timezone management take a look at this example.

Because all resources are part of the same calendar they operate in the same timezone. That's why we need to somehow communicate the work hours with the correct offsets so that the person doing the scheduling can easily find the best times for the meeting. For that we are setting colored backgrounds with time labels that show the "working hours", "flex hours" and "time off". Besides the colored backgrounds we've also set "time off" to invalid for validation purposes. On how to work with disabled times and how to override them take a look at this example.

The last thing that needed to be done is to override the event rendering with a custom template. In the custom template/render function we can account for the offsets and print the times in the team members timezone instead of the base timezone (UTC in this example). Learn how to create a custom event template.

Download and try example

Preview in full screen

Plan team meetings across time zones with the Timeline — show per-resource availability in working, flex, and time-off blocks, with local-time events.

dayjs.extend(window.dayjs_plugin_utc);
dayjs.extend(window.dayjs_plugin_timezone);
mobiscroll.dayjsTimezone.dayjs = dayjs;

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

var formatDate = mobiscroll.formatDate;

var myResources = [
  {
    id: 1,
    name: 'Keila Delores',
    timezone: 'utc',
    img: 'https://img.mobiscroll.com/demos/f1.png',
    utcOffset: '(UTC)',
    organizer: true,
  },
  {
    id: 2,
    name: 'Gene Cortez',
    timezone: 'America/Chicago',
    img: 'https://img.mobiscroll.com/demos/m1.png',
    utcOffset: 'UTC - 5',
  },
  {
    id: 3,
    name: 'Paula Bush',
    timezone: 'America/New_York',
    img: 'https://img.mobiscroll.com/demos/f2.png',
    utcOffset: 'UTC - 4',
  },
  {
    id: 4,
    name: 'Pete Nichols',
    timezone: 'Europe/London',
    img: 'https://img.mobiscroll.com/demos/m2.png',
    utcOffset: 'UTC + 1',
  },
  {
    id: 5,
    name: 'Jean Pearson',
    timezone: 'Europe/Berlin',
    img: 'https://img.mobiscroll.com/demos/m3.png',
    utcOffset: 'UTC + 2',
  },
  {
    id: 6,
    name: 'Thelma Cain',
    timezone: 'Europe/Bucharest',
    img: 'https://img.mobiscroll.com/demos/f3.png',
    utcOffset: 'UTC + 3',
  },
];

var calendar = mobiscroll.eventcalendar('#demo-timezone-meeting-planner', {
  timezonePlugin: mobiscroll.dayjsTimezone,
  dataTimezone: 'utc',
  displayTimezone: 'utc',
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  dragTimeStep: 60,
  view: {
    timeline: {
      type: 'week',
      timeLabelStep: 1440,
    },
  },
  data: [
    {
      start: '2026-10-25T13:00',
      end: '2026-10-25T15:00',
      title: 'General orientation',
      color: '#1ad404',
      resource: [1, 2, 3, 4, 5, 6],
    },
  ],
  resources: myResources,
  invalid: getInvalids(),
  extendDefaultEvent: function () {
    return { resource: [1, 2, 3, 4, 5, 6] };
  },
  onEventCreated: function () {
    mobiscroll.toast({
      message: 'Event created',
    });
  },
  onEventUpdated: function () {
    mobiscroll.toast({
      message: 'Event updated',
    });
  },
  onEventCreateFailed: function (args) {
    createUpdateEvent(args.event, true);
  },
  onEventUpdateFailed: function (args) {
    createUpdateEvent(args.event);
  },
  renderTimelineEvent: function (data) {
    var start = data.startDate.clone();
    var end = data.endDate.clone();

    start.setTimezone(data.currentResource.timezone);
    end.setTimezone(data.currentResource.timezone);

    return (
      '<div class="mds-meeting-planner-cont" style="background:' +
      data.color +
      '">' +
      '<div class="mds-meeting-planner-wrapper">' +
      '<div class="mds-meeting-planner-title">' +
      data.title +
      '</div>' +
      '<div class="mds-meeting-planner-time">' +
      formatDate('hh:mm A', start) +
      ' - ' +
      formatDate('hh:mm A', end) +
      '</div>' +
      '</div></div>'
    );
  },
  renderCell: function (args) {
    var hProps = getHourProps(args.date.getHours(), args.resource.timezone);
    return (
      '<div class="mds-meeting-planner-time-slot mbsc-flex mbsc-justify-content-center" style="background:' +
      hProps.color +
      '">' +
      hProps.title +
      (hProps.isAM ? ' AM' : ' PM') +
      '</div>'
    );
  },
  renderHeader: function () {
    return (
      '<div mbsc-calendar-nav></div>' +
      '<div class="mds-meeting-planner-header">' +
      '<div class="mds-meeting-planner-zone mds-meeting-planner-work">working hours</div>' +
      '<div class="mds-meeting-planner-zone mds-meeting-planner-flex">flex hours</div>' +
      '<div class="mds-meeting-planner-zone mds-meeting-planner-off">time off</div>' +
      '<div mbsc-calendar-prev></div>' +
      '<div mbsc-calendar-today></div>' +
      '<div mbsc-calendar-next></div>' +
      '</div>'
    );
  },
  renderResource: function (resource) {
    return (
      '<div class="mds-meeting-participant-cont">' +
      '<div class="mds-meeting-participant-name">' +
      resource.name +
      '</div>' +
      '<div>' +
      (resource.organizer ? '<span>Organizer </span>' : '') +
      '<span class="mds-meeting-participant-offset">' +
      resource.utcOffset +
      '</span></div>' +
      '<img class="mds-meeting-participant-avatar" src="' +
      resource.img +
      '"/>' +
      '</div>'
    );
  },
});

function createUpdateEvent(event, isNew) {
  mobiscroll.confirm({
    title: 'Are you sure you want to proceed?',
    message: "It looks like someone from the team won't be able to join the meeting.",
    okText: 'Yes',
    cancelText: 'No',
    callback: function (res) {
      if (res) {
        if (isNew) {
          calendar.addEvent(event);
        } else {
          calendar.updateEvent(event);
        }

        mobiscroll.toast({
          message: isNew ? 'Event added' : 'Event updated',
        });
      }
    },
  });
}

function getUtcOffset(timezone) {
  switch (timezone) {
    case 'America/Los_Angeles':
      return -7;
    case 'America/Chicago':
      return -5;
    case 'America/New_York':
      return -4;
    case 'Europe/London':
      return 1;
    case 'Europe/Berlin':
      return 2;
    case 'Europe/Bucharest':
      return 3;
    case 'Asia/Shanghai':
      return 8;
    case 'Asia/Tokyo':
      return 9;
    default:
      return 0;
  }
}

function getHourProps(h, timezone) {
  var offset = getUtcOffset(timezone);
  var hour = h + offset;
  var isAM = hour % 24 < 12;
  var title = ((hour % 12) + 12) % 12 || 12;
  var hForProps = title + ((title === 12 && !isAM) || (title !== 12 && isAM) ? 0 : 12);
  var color = '#f7f7bb4d';
  var invalid = false;

  if (hForProps < 6 || hForProps >= 22) {
    color = '#ffbaba4d';
    invalid = true;
  } else if (hForProps < 8 || (hForProps >= 18 && hForProps < 22)) {
    color = '#a5ceff4d';
  }

  return {
    hour: hour,
    isAM: isAM,
    title: title,
    color: color,
    invalid: invalid,
  };
}

function getInvalids() {
  var invalid = [];

  for (var j = 0; j < myResources.length; ++j) {
    var resource = myResources[j];

    for (var i = 0; i < 24; ++i) {
      if (getHourProps(i, resource.timezone).invalid) {
        var startTime = (i < 10 ? '0' : '') + i + ':00:00';
        var endTime = (i < 9 ? '0' : '') + (i + 1) + ':00:00';

        invalid.push({
          start: startTime,
          end: endTime,
          resource: resource.id,
          recurring: {
            repeat: 'daily',
          },
        });
      }
    }
  }
  return invalid;
}

<div id="demo-timezone-meeting-planner"></div>

.mds-meeting-planner-cont {
    font-size: 12px;
    font-weight: 600;
    height: 100%;
    background: #1ad404;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    border-radius: 6px;
    overflow: hidden;
}

.mds-meeting-planner-wrapper {
    background: rgba(255, 255, 255, .5);
    height: 100%;
    box-sizing: border-box;
    padding: 0 6px;
    transition: background .15s ease-in-out;
}

.mbsc-schedule-event-hover .mds-meeting-planner-wrapper {
    background: rgba(255, 255, 255, .3);
}

.mds-meeting-planner-title {
    padding-top: 3px;
    color: initial;
}

.mds-meeting-planner-time {
    color: #666;
}

.mds-meeting-planner-title,
.mds-meeting-planner-time {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mds-meeting-planner-header {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.mds-meeting-planner-zone {
    font-size: 12px;
    padding: 3px 6px;
    margin: 0 5px;
    border-radius: 16px;
    color: #888;
}

.mds-meeting-planner-work {
    background: #f7f7bb4d;
}

.mds-meeting-planner-flex {
    background: #a5ceff4d;
}

.mds-meeting-planner-off {
    background: #ffbaba4d;
}

.mds-meeting-participant-cont {
    position: relative;
    padding-left: 50px;
    max-height: 40px;
    line-height: 20px;
}

.mds-meeting-participant-avatar {
    position: absolute;
    max-height: 40px;
    max-width: 40px;
    top: 18px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 20px;
}

.mds-meeting-participant-name {
    font-size: 16px;
}

.mds-meeting-participant-offset {
    font-size: 12px;
    opacity: 0.6;
}

.mds-meeting-planner-time-slot {
  font-size: 12px;
  opacity: 0.7;
  line-height: 50px;
  height: 100%;
  pointer-events: none;
}

Timezone Meeting Planner

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session