Event Grouping & Bulk Actions

When managing a large volume of events across multiple clients and time periods, handling items one by one quickly becomes inefficient. Users often need to move entire sets of related tasks together, not individual events. To support this, grouping and bulk interaction are essential.

The starting point is being able to look at the same dataset through different lenses. The demo supports switching between an assignee view, where each row represents a person responsible for the work, and a work type view, where each row represents a task category. A segmented control in the header allows adjusting the time granularity of the timeline while keeping a full year in view, enabling users to switch between quarterly, monthly, or weekly breakdowns. The view selector, grouping toggle, and segmented control are all rendered via the renderHeader function, keeping the controls integrated into the timeline header. The renderResource function adapts the resource column accordingly, displaying employee avatars and job titles in assignee view, and work type color indicators in type view.

Once the right perspective is selected, individual events are not rendered one by one. Using the renderTimelineEvent function, related tasks are automatically grouped into consolidated blocks per client and per quarter. These blocks can be expanded to reveal the individual tasks inside, or collapsed to keep the timeline readable at scale.

With grouping in place, bulk interaction becomes natural. An entire grouped block can be dragged along the timeline, moving all underlying events simultaneously. The system calculates the time delta and applies it uniformly to every event in the group. At the same time, individual tasks within a group remain accessible and can be edited through the edit button, which opens a range picker to update the event dates. Because both views are projections of the same event store, a change made in one view is immediately reflected in the other.

Download and try example

Demo

Loading the live demo

Preview in full screen

Group Timeline events into collapsible client/quarter blocks and bulk-drag groups — switch between assignee and work-type views on a full-year layout.

Code

View code on GitHub 
mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

var defaultEvents = [
  {
    id: 1,
    title: 'Office Tower HVAC System Overhaul',
    start: '2026-01-05T00:00',
    end: '2026-03-15T00:00',
    resource: 1,
    type: 'upgrade',
    clientGroup: 'Enterprise Solutions Group',
  },
  {
    id: 2,
    title: 'Executive Floor Climate Control Installation',
    start: '2026-01-10T00:00',
    end: '2026-03-20T00:00',
    resource: 1,
    type: 'installation',
    clientGroup: 'Enterprise Solutions Group',
  },
  {
    id: 3,
    title: 'Headquarters Heating System Maintenance',
    start: '2026-02-01T00:00',
    end: '2026-03-31T00:00',
    resource: 1,
    type: 'maintenance',
    clientGroup: 'Enterprise Solutions Group',
  },
  {
    id: 4,
    title: 'Building Infrastructure Assessment',
    start: '2026-01-15T00:00',
    end: '2026-03-25T00:00',
    resource: 2,
    type: 'inspection',
    clientGroup: 'Enterprise Solutions Group',
  },
  {
    id: 5,
    title: 'Campus Facilities Modernization',
    start: '2026-02-05T00:00',
    end: '2026-03-31T00:00',
    resource: 2,
    type: 'upgrade',
    clientGroup: 'Enterprise Solutions Group',
  },
  // Showing partial data. Download full source.
];

var assigneeResources = [
  {
    id: 1,
    name: 'Sarah Johnson',
    title: 'Senior HVAC Technician',
    color: '#4a7c9e',
    img: 'https://img.mobiscroll.com/demos/f1.png',
  },
  {
    id: 2,
    name: 'Mike Chen',
    title: 'Lead Facilities Engineer',
    color: '#7fa650',
    img: 'https://img.mobiscroll.com/demos/m1.png',
  },
  {
    id: 3,
    name: 'Emily Rodriguez',
    title: 'Electrical Systems Specialist',
    color: '#c76b8a',
    img: 'https://img.mobiscroll.com/demos/f2.png',
  },
  {
    id: 4,
    name: 'James Wilson',
    title: 'Master Electrician',
    color: '#4a9dad',
    img: 'https://img.mobiscroll.com/demos/m2.png',
  },
  {
    id: 5,
    name: 'Lisa Anderson',
    title: 'Building Automation Technician',
    color: '#d4a056',
    img: 'https://img.mobiscroll.com/demos/f3.png',
  },
  {
    id: 6,
    name: 'David Kim',
    title: 'HVAC Project Manager',
    color: '#5a9d76',
    img: 'https://img.mobiscroll.com/demos/m3.png',
  },
];

var typeResources = [
  {
    id: 'installation',
    name: 'installation',
    color: '#3b5998',
  },
  {
    id: 'maintenance',
    name: 'maintenance',
    color: '#2d7a4f',
  },
  {
    id: 'repair',
    name: 'repair',
    color: '#b8621b',
  },
  {
    id: 'inspection',
    name: 'inspection',
    color: '#6b4fa3',
  },
  {
    id: 'upgrade',
    name: 'upgrade',
    color: '#a03a3a',
  },
];

var groupedEvents = [];
var groupBy = 'assignee'; // 'assignee' or 'type'
var groupByClient = false;
var zoomLevel = 'month'; // 'quarter', 'month', 'week'
var rawEvents = defaultEvents.slice();
// Edit popup state
var editingEventId = null;

function groupEventsByClientQuarter(events) {
  var groups = {};
  var result = [];

  // Save old collapsed states including year and quarter
  var oldCollapsedStates = {};
  groupedEvents.forEach(function (ge) {
    var stateKey = ge.resource + '-' + ge.clientGroup + '-' + ge.year + '-' + ge.quarter;
    oldCollapsedStates[stateKey] = ge.collapsed;
  });

  // Group events by resource (assignee or type) + client + quarter
  events.forEach(function (event) {
    var resourceId = groupBy === 'assignee' ? event.resource : event.type;
    var eventStart = new Date(event.start);
    var month = eventStart.getMonth();
    var year = eventStart.getFullYear();
    var quarter = Math.floor(month / 3);
    var groupKey = resourceId + '-' + event.clientGroup + '-' + year + '-' + quarter;

    if (!groups[groupKey]) {
      groups[groupKey] = {
        resource: resourceId,
        clientGroup: event.clientGroup,
        year: year,
        quarter: quarter,
        events: [],
      };
    }

    groups[groupKey].events.push(event);
  });

  // Create grouped events
  Object.keys(groups).forEach(function (groupKey) {
    var groupData = groups[groupKey];
    var quarterEvents = groupData.events.sort(function (a, b) {
      return new Date(a.start).getTime() - new Date(b.start).getTime();
    });

    // Get color based on groupBy mode
    var color;
    if (groupBy === 'assignee') {
      var resourceItem = assigneeResources.find(function (r) {
        return r.id === groupData.resource;
      });
      color = resourceItem.color;
    } else {
      var typeObj = typeResources.find(function (r) {
        return r.id === groupData.resource;
      });
      color = typeObj.color;
    }

    var eventIds = quarterEvents
      .map(function (e) {
        return e.id;
      })
      .join('-');

    var earliestStart = quarterEvents[0].start;
    var latestEnd = quarterEvents.reduce(function (latest, event) {
      return new Date(event.end).getTime() > new Date(latest).getTime() ? event.end : latest;
    }, quarterEvents[0].end);

    var newId = 'group-' + groupKey + '-' + eventIds;

    // Use full key including year and quarter
    var stateKey = groupData.resource + '-' + groupData.clientGroup + '-' + groupData.year + '-' + groupData.quarter;
    var collapsedState = stateKey in oldCollapsedStates ? oldCollapsedStates[stateKey] : true;

    result.push({
      id: newId,
      title: groupData.clientGroup,
      resource: groupData.resource,
      clientGroup: groupData.clientGroup,
      year: groupData.year,
      quarter: groupData.quarter,
      start: earliestStart,
      end: latestEnd,
      color: color,
      count: quarterEvents.length,
      originalEvents: quarterEvents,
      collapsed: collapsedState,
    });
  });

  return result;
}

function prepareEventsForDisplay(events, colorByType) {
  return events.map(function (event) {
    return {
      id: event.id,
      title: event.title,
      start: event.start,
      end: event.end,
      resource: colorByType ? event.resource : event.type,
      type: event.type,
      assignee: event.resource,
      clientGroup: event.clientGroup,
      color: '#f8f9fa',
    };
  });
}

function updateView() {
  var currentResources = groupBy === 'assignee' ? assigneeResources : typeResources;
  var currentEvents;

  if (groupByClient) {
    groupedEvents = groupEventsByClientQuarter(rawEvents);
    currentEvents = groupedEvents;
  } else {
    groupedEvents = [];
    currentEvents = prepareEventsForDisplay(rawEvents, groupBy === 'assignee');
  }

  var timelineConfig;

  switch (zoomLevel) {
    case 'quarter':
      timelineConfig = { type: 'year', resolutionHorizontal: 'quarter', eventHeight: 'variable' };
      break;
    case 'month':
      timelineConfig = { type: 'year', resolutionHorizontal: 'month', eventHeight: 'variable' };
      break;
    case 'week':
      timelineConfig = { type: 'year', resolutionHorizontal: 'week', eventHeight: 'variable' };
      break;
  }

  calendar.setOptions({
    data: currentEvents,
    resources: currentResources,
    renderTimelineEvent: groupByClient ? renderGroupedEvent : renderSimpleEvent,
    view: { timeline: timelineConfig },
    dragBetweenResources: !groupByClient,
  });
}

function renderGroupedEvent(event) {
  var origEvent = event.original;
  var isExpanded = !origEvent.collapsed;

  // Get unique items (opposite of groupBy)
  var uniqueItems = {};
  origEvent.originalEvents.forEach(function (ev) {
    if (groupBy === 'assignee') {
      var typeObj = typeResources.find(function (r) {
        return r.id === ev.type;
      });
      if (typeObj) {
        uniqueItems[typeObj.id] = typeObj;
      }
    } else {
      var emp = assigneeResources.find(function (r) {
        return r.id === ev.resource;
      });
      if (emp) {
        uniqueItems[emp.id] = emp;
      }
    }
  });

  var itemCount = Object.keys(uniqueItems).length;
  var itemLabel = groupBy === 'assignee' ? 'type' : 'employee';

  // Generate expanded content HTML if expanded
  var expandedHTML = '';
  if (isExpanded) {
    var groupStart = new Date(origEvent.start).getTime();
    var groupEnd = new Date(origEvent.end).getTime();
    var groupDuration = groupEnd - groupStart;

    expandedHTML = origEvent.originalEvents
      .map(function (ev) {
        var evStart = new Date(ev.start).getTime();
        var evEnd = new Date(ev.end).getTime();
        var leftPercent = groupDuration > 0 ? ((evStart - groupStart) / groupDuration) * 100 : 0;
        var widthPercent = groupDuration > 0 ? ((evEnd - evStart) / groupDuration) * 100 : 100;

        var detailText = '';
        var typeDotColor = '';
        var avatarUrl = '';

        if (groupBy === 'assignee') {
          var typeObj = typeResources.find(function (r) {
            return r.id === ev.type;
          });
          if (typeObj) {
            detailText = typeObj.name;
            typeDotColor = typeObj.color;
          }
        } else {
          var employee = assigneeResources.find(function (r) {
            return r.id === ev.resource;
          });
          if (employee) {
            detailText = employee.name;
            avatarUrl = employee.img;
          }
        }

        return (
          '<div class="mds-event-group-original-event" title="' +
          ev.title +
          ', ' +
          mobiscroll.formatDate('MM/DD/YYYY', new Date(ev.start)) +
          ' - ' +
          mobiscroll.formatDate('MM/DD/YYYY', new Date(ev.end)) +
          '" style="margin-left:' +
          leftPercent +
          '%; width:' +
          widthPercent +
          '%;">' +
          '<div class="mbsc-flex mds-event-group-event-content">' +
          '<div class="mds-event-group-event-title mds-event-group-text-truncate">' +
          ev.title +
          '</div>' +
          '<div class="mbsc-flex mds-event-group-event-right">' +
          '<div class="mds-event-group-event-date mds-event-group-text-truncate">' +
          mobiscroll.formatDate('DD MMM', new Date(ev.start)) +
          ' - ' +
          mobiscroll.formatDate('DD MMM', new Date(ev.end)) +
          '</div>' +
          '<div class="mbsc-flex mds-event-group-event-detail">' +
          (avatarUrl ? '<img src="' + avatarUrl + '" alt="' + detailText + '" class="mds-event-group-event-avatar" />' : '') +
          (typeDotColor ? '<span class="mds-event-group-type-dot" style="background-color: ' + typeDotColor + '"></span>' : '') +
          '<div class="mds-event-group-event-info mds-event-group-text-truncate">' +
          detailText +
          '</div>' +
          '</div>' +
          '</div>' +
          '<div class="mds-event-group-edit-btn mbsc-flex mbsc-icon mbsc-font-icon mbsc-icon-pencil" data-event-id="' +
          ev.id +
          '"></div>' +
          '</div>' +
          '</div>'
        );
      })
      .join('');
  }

  return (
    '<div class="mbsc-flex mds-event-group-task mds-event-group-task-client' +
    (isExpanded ? ' expanded' : '') +
    '" style="border-left-color: ' +
    origEvent.color +
    '">' +
    '<div class="mbsc-flex mds-event-group-content">' +
    '<div class="mds-event-group-title-text mds-event-group-text-truncate">' +
    origEvent.clientGroup +
    '</div>' +
    '<div class="mbsc-flex mds-event-group-right">' +
    '<div class="mbsc-flex mds-event-group-meta">' +
    '<div class="mds-event-group-date-range">' +
    mobiscroll.formatDate('DD MMM', new Date(origEvent.start)) +
    ' - ' +
    mobiscroll.formatDate('DD MMM', new Date(origEvent.end)) +
    '</div>' +
    '<div class="mds-event-group-count">' +
    origEvent.count +
    ' task' +
    (origEvent.count > 1 ? 's' : '') +
    ', ' +
    itemCount +
    ' ' +
    itemLabel +
    (itemCount > 1 ? 's' : '') +
    '</div>' +
    '</div>' +
    '<div class="mbsc-flex mds-event-group-icon mbsc-icon mbsc-font-icon mbsc-icon-material-keyboard-arrow-down"></div>' +
    '</div>' +
    '</div>' +
    '<div class="mds-event-group-events"><div class="mds-event-group-events-inner">' +
    expandedHTML +
    '</div></div>' +
    '</div>'
  );
}

function renderSimpleEvent(event) {
  var origEvent = event.original;
  var detailText = '';
  var avatarUrl = '';
  var typeDotColor = '';

  if (groupBy === 'assignee') {
    // Show type with colored dot
    var typeObj = typeResources.find(function (t) {
      return t.id === origEvent.type;
    });
    if (typeObj) {
      detailText = typeObj.name;
      typeDotColor = typeObj.color;
    }
  } else {
    // Show assignee with avatar
    var employee = assigneeResources.find(function (r) {
      return r.id === origEvent.assignee;
    });
    if (employee) {
      detailText = employee.name;
      avatarUrl = employee.img;
    }
  }

  return (
    '<div class="mbsc-flex mds-event-simple">' +
    '<div class="mds-event-simple-title">' +
    '<div class="mds-event-simple-title-inner mds-event-group-text-truncate">' +
    origEvent.title +
    '</div>' +
    '</div>' +
    '<div class="mbsc-flex mds-event-simple-right">' +
    '<div class="mds-event-simple-date">' +
    mobiscroll.formatDate('DD MMM', new Date(origEvent.start)) +
    ' - ' +
    mobiscroll.formatDate('DD MMM', new Date(origEvent.end)) +
    '</div>' +
    (detailText
      ? '<div class="mbsc-flex mds-event-simple-subtitle-wrapper">' +
        (avatarUrl ? '<img src="' + avatarUrl + '" alt="' + detailText + '" class="mds-event-simple-avatar" />' : '') +
        (typeDotColor ? '<span class="mds-event-simple-type-dot" style="background-color: ' + typeDotColor + '"></span>' : '') +
        '<div class="mbsc-flex mds-event-simple-subtitle" style="' +
        (groupBy === 'assignee' ? '' : 'margin-left: 25px;') +
        '">' +
        detailText +
        '</div>' +
        '</div>'
      : '') +
    '</div>' +
    '</div>'
  );
}

var calendar = mobiscroll.eventcalendar('#demo-event-grouping', {
  dragToMove: true,
  dragToResize: true,
  dragToCreate: false,
  clickToCreate: false,
  dragBetweenResources: true,
  view: {
    timeline: {
      type: 'year',
      resolutionHorizontal: 'month',
      eventHeight: 'variable',
    },
  },
  data: defaultEvents,
  resources: assigneeResources,
  renderTimelineEvent: renderSimpleEvent,
  renderResource: function (resource) {
    if (groupBy === 'assignee') {
      // Employee resource
      return (
        '<div class="mbsc-flex">' +
        '<img alt="' +
        resource.name +
        '" class="mds-event-group-avatar" src="' +
        resource.img +
        '"/>' +
        '<div class="mds-event-group-cont">' +
        '<div class="mds-event-group-name">' +
        resource.name +
        '</div>' +
        '<div class="mds-event-group-title">' +
        resource.title +
        '</div>' +
        '</div>' +
        '</div>'
      );
    } else {
      // Type resource
      return (
        '<div class="mbsc-flex mds-event-group-type-resource">' +
        '<div class="mds-event-group-type-badge" style="background-color: ' +
        resource.color +
        '"></div>' +
        '<div class="mds-event-group-type-name">' +
        resource.name +
        '</div>' +
        '</div>'
      );
    }
  },
  renderHeader: function () {
    return (
      '<div mbsc-calendar-nav></div>' +
      '<div class="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-end mds-event-group-header-controls">' +
      '<label>' +
      '<input mbsc-checkbox type="checkbox" id="group-by-client-quarter" data-theme="material" data-label="Group by Client/Quarter" />' +
      '</label>' +
      '<label>' +
      '<input mbsc-input id="event-grouping-input" class="mds-event-group-select" data-dropdown="true" data-input-style="box" />' +
      '</label>' +
      '<select id="group-by-select">' +
      '<option value="assignee" selected>View by Assignee</option>' +
      '<option value="type">View by Type</option>' +
      '</select>' +
      '</div>' +
      '<label>Quarterly<input mbsc-segmented type="radio" name="zoom-level" value="quarter"/></label>' +
      '<label>Monthly<input mbsc-segmented type="radio" name="zoom-level" value="month" checked/></label>' +
      '<label>Weekly<input mbsc-segmented type="radio" name="zoom-level" value="week"/></label>' +
      '<div mbsc-calendar-prev></div>' +
      '<div mbsc-calendar-today></div>' +
      '<div mbsc-calendar-next></div>'
    );
  },
  onEventUpdate: function (args) {
    var updatedEvent = args.event;
    var oldEvent = args.oldEvent;
    var newStart = new Date(updatedEvent.start).getTime();
    var newEnd = new Date(updatedEvent.end).getTime();

    if (groupByClient) {
      var oldStart = new Date(oldEvent.start).getTime();
      var oldEnd = new Date(oldEvent.end).getTime();
      var startDelta = newStart - oldStart;
      var endDelta = newEnd - oldEnd;

      // Nothing changed
      if (startDelta === 0 && endDelta === 0) return;

      var movedGroupedEvent = groupedEvents.find(function (ge) {
        return ge.id === oldEvent.id;
      });

      if (movedGroupedEvent) {
        var clientGroupName = movedGroupedEvent.clientGroup;
        var resourceId = movedGroupedEvent.resource;
        var wasCollapsed = movedGroupedEvent.collapsed;

        var isMove = startDelta === endDelta;

        var eventsToUpdate;

        if (isMove) {
          // MOVE: shift all original events by the same delta
          eventsToUpdate = movedGroupedEvent.originalEvents.map(function (originalEvent) {
            return {
              id: originalEvent.id,
              title: originalEvent.title,
              resource: originalEvent.resource,
              type: originalEvent.type,
              clientGroup: originalEvent.clientGroup,
              start: new Date(new Date(originalEvent.start).getTime() + startDelta),
              end: new Date(new Date(originalEvent.end).getTime() + startDelta),
            };
          });
        } else {
          // RESIZE: proportionally remap all child events within the new group span
          var oldGroupStart = oldStart;
          var oldGroupEnd = oldEnd;
          var oldGroupDuration = oldGroupEnd - oldGroupStart;
          var newGroupStart = newStart;
          var newGroupEnd = newEnd;
          var newGroupDuration = newGroupEnd - newGroupStart;

          eventsToUpdate = movedGroupedEvent.originalEvents.map(function (originalEvent) {
            var evStart = new Date(originalEvent.start).getTime();
            var evEnd = new Date(originalEvent.end).getTime();

            // Calculate relative positions (0 to 1) within the old group span
            var relativeStart = oldGroupDuration > 0 ? (evStart - oldGroupStart) / oldGroupDuration : 0;
            var relativeEnd = oldGroupDuration > 0 ? (evEnd - oldGroupStart) / oldGroupDuration : 1;

            // Map to the new group span
            var mappedStart = newGroupStart + relativeStart * newGroupDuration;
            var mappedEnd = newGroupStart + relativeEnd * newGroupDuration;

            // Ensure minimum duration for each child event
            var childDurationDays = (mappedEnd - mappedStart) / (1000 * 60 * 60 * 24);
            if (childDurationDays < 1) {
              mappedEnd = mappedStart + 1000 * 60 * 60 * 24; // At least 1 day
            }

            return {
              id: originalEvent.id,
              title: originalEvent.title,
              resource: originalEvent.resource,
              type: originalEvent.type,
              clientGroup: originalEvent.clientGroup,
              start: new Date(mappedStart),
              end: new Date(mappedEnd),
            };
          });
        }

        // Sync into rawEvents
        var updatedIds = {};
        eventsToUpdate.forEach(function (e) {
          updatedIds[e.id] = e;
        });
        rawEvents = rawEvents.map(function (e) {
          return updatedIds[e.id] ? updatedIds[e.id] : e;
        });

        // Rebuild grouped view from updated rawEvents
        updateView();

        // Restore collapsed state
        var newYear = new Date(eventsToUpdate[0].start).getFullYear();
        var newQuarter = Math.floor(new Date(eventsToUpdate[0].start).getMonth() / 3) + 1;

        var newGroupedEvent = groupedEvents.find(function (ge) {
          return ge.resource === resourceId && ge.clientGroup === clientGroupName && ge.year === newYear && ge.quarter === newQuarter;
        });

        if (newGroupedEvent) {
          newGroupedEvent.collapsed = wasCollapsed;
          calendar.setEvents(groupedEvents);
        }

        var actionLabel = isMove ? 'moved' : 'resized';
        mobiscroll.toast({
          message: eventsToUpdate.length + ' event(s) for ' + clientGroupName + ' have been ' + actionLabel + '.',
        });
      }
    } else {
      var oldResource = args.oldEvent.resource;
      var newResource = updatedEvent.resource;
      var resourceChanged = oldResource !== newResource;

      // Sync into rawEvents (dates + resource if changed)
      rawEvents = rawEvents.map(function (e) {
        if (e.id === updatedEvent.id) {
          var update = { start: updatedEvent.start, end: updatedEvent.end };
          if (resourceChanged) {
            if (groupBy === 'assignee') {
              update.resource = newResource;
            } else {
              update.type = newResource;
            }
          }
          return Object.assign({}, e, update);
        }
        return e;
      });

      if (resourceChanged) {
        var fromName;
        var toName;
        if (groupBy === 'assignee') {
          var fromRes = assigneeResources.find(function (r) {
            return r.id === oldResource;
          });
          var toRes = assigneeResources.find(function (r) {
            return r.id === newResource;
          });
          fromName = fromRes ? fromRes.name : oldResource;
          toName = toRes ? toRes.name : newResource;
        } else {
          fromName = oldResource;
          toName = newResource;
        }
        mobiscroll.toast({
          message: '"' + updatedEvent.title + '" moved from ' + fromName + ' to ' + toName + '.',
        });
      }
    }
  },
});

var editDatePicker = mobiscroll.datepicker('#event-grouping-dates', {
  controls: ['calendar'],
  select: 'range',
  display: 'center',
  touchUi: false,
  showRangeLabels: false,
  onChange: function (args) {
    var dates = args.value;
    var startVal = dates[0];
    var endVal = dates[1];

    if (editingEventId !== null && startVal && endVal) {
      var oldEvent = rawEvents.find(function (e) {
        return e.id === editingEventId;
      });

      if (!oldEvent) {
        return;
      }

      var eventTitle = oldEvent.title;
      var oldQuarter = Math.floor(new Date(oldEvent.start).getMonth() / 3);
      var newQuarter = Math.floor(new Date(startVal).getMonth() / 3);
      var oldYear = new Date(oldEvent.start).getFullYear();
      var newYear = new Date(startVal).getFullYear();
      var quarterChanged = groupByClient && (oldQuarter !== newQuarter || oldYear !== newYear);

      var applyUpdate = function () {
        rawEvents = rawEvents.map(function (e) {
          if (e.id === editingEventId) {
            return Object.assign({}, e, { start: startVal, end: endVal });
          }
          return e;
        });
        updateView();
        return true;
      };

      if (quarterChanged) {
        var quarterNames = ['Q1', 'Q2', 'Q3', 'Q4'];
        var fromLabel = quarterNames[oldQuarter] + ' ' + oldYear;
        var toLabel = quarterNames[newQuarter] + ' ' + newYear;

        mobiscroll.confirm({
          title: 'Move to different group',
          message: '"' + eventTitle + '" will move from ' + fromLabel + ' to ' + toLabel + '. Do you want to continue?',
          okText: 'Move',
          cancelText: 'Cancel',
          callback: function (result) {
            if (result) {
              applyUpdate();
              mobiscroll.toast({
                message: '"' + eventTitle + '" moved to ' + toLabel + '.',
              });
            }
          },
        });
      } else {
        if (applyUpdate()) {
          mobiscroll.toast({
            message: '"' + eventTitle + '" dates updated.',
          });
        }
      }
    }
  },
});

// Edit button click handler (on expanded subtasks)
document.addEventListener('click', function (event) {
  var editBtn = event.target.closest('.mds-event-group-edit-btn');
  if (editBtn) {
    event.stopPropagation();

    var eventId = Number(editBtn.getAttribute('data-event-id'));
    var rawEvent = rawEvents.find(function (e) {
      return e.id === eventId;
    });
    if (rawEvent) {
      editingEventId = eventId;
      editDatePicker.setOptions({ headerText: rawEvent.title });
      editDatePicker.setVal([new Date(rawEvent.start), new Date(rawEvent.end)]);
      editDatePicker.open();
    }
  }
});

mobiscroll.select('#group-by-select', {
  inputElement: document.getElementById('event-grouping-input'),
  touchUi: false,
  onChange: function (args) {
    groupBy = args.value;
    updateView();
  },
});

// Checkbox for client/quarter grouping
document.getElementById('group-by-client-quarter').addEventListener('change', function () {
  groupByClient = this.checked;
  updateView();
});

// Zoom level handler
document.addEventListener('change', function (event) {
  if (event.target && event.target.name === 'zoom-level') {
    zoomLevel = event.target.value;
    updateView();
  }
});

// Expand/collapse icon click handler
document.addEventListener('click', function (event) {
  if (event.target && event.target.classList.contains('mds-event-group-icon')) {
    event.stopPropagation();

    var task = event.target.closest('.mds-event-group-task');
    var eventEl = event.target.closest('.mbsc-schedule-event');
    var eventId = eventEl ? eventEl.getAttribute('data-id') : null;

    var groupedEvent = groupedEvents.find(function (e) {
      return e.id === eventId;
    });

    if (groupedEvent) {
      // Toggle collapsed state in data
      groupedEvent.collapsed = !groupedEvent.collapsed;

      // Toggle CSS class for animation
      if (task) {
        task.classList.toggle('expanded', !groupedEvent.collapsed);
      }

      // Refresh calendar after animation completes
      setTimeout(function () {
        calendar.refresh();
      }, 200);
    }
  }
});

updateView();

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.