Full Calendar：含首尾30分钟出行时间的多色事件实现咨询

Hey Jagdish, great question! Let's break this down into two clear parts: locking the extended time window (including those 30-minute travel blocks before and after your main 3-hour event) and styling those travel segments with a different background color. Here's a practical, step-by-step implementation that works with FullCalendar's core features:

There are two solid approaches to handle this, depending on whether you want travel time to be a separate "reserved" block or part of the same event as your main meeting:

Option 1: Auto-Generate Background Events for Travel Time #

Background events are perfect for marking time as unavailable without acting like a regular editable event (you can make them editable if needed). When you create or update your main 3-hour event, programmatically add two additional background events for pre- and post-travel:

• One from start time - 30 mins to the main event's start
• Another from the main event's end to end time + 30 mins

Here's a code snippet for FullCalendar v5/v6 (using vanilla JS and Moment.js for date handling):

// Function to add main event + travel blocks
function addEventWithTravel(startDate, endDate, eventTitle) {
  // Calculate travel time boundaries
  const preTravelStart = moment(startDate).subtract(30, 'minutes').toDate();
  const preTravelEnd = startDate;
  const postTravelStart = endDate;
  const postTravelEnd = moment(endDate).add(30, 'minutes').toDate();

  // Add the main 3-hour event
  calendar.addEvent({
    title: eventTitle,
    start: startDate,
    end: endDate,
    className: 'main-event' // For custom styling
  });

  // Add pre-travel background event
  calendar.addEvent({
    title: 'Travel to Client',
    start: preTravelStart,
    end: preTravelEnd,
    display: 'background',
    className: 'travel-event pre-travel',
    editable: false // Prevent users from moving/deleting this block
  });

  // Add post-travel background event
  calendar.addEvent({
    title: 'Travel Back',
    start: postTravelStart,
    end: postTravelEnd,
    display: 'background',
    className: 'travel-event post-travel',
    editable: false
  });
}

// Example usage: Add a 14:00-17:00 client meeting
addEventWithTravel(
  new Date('2024-05-20T14:00:00'),
  new Date('2024-05-20T17:00:00'),
  'Client Consultation'
);

To prevent users from booking over these travel blocks, enable selectOverlap: false in your FullCalendar config—this stops users from selecting times that overlap with background events.

Option 2: Extend the Main Event & Visually Split It #

If you prefer the entire 13:30–16:30 window to be one event (for easier editing), set the main event's start/end to the full window, then use the eventContent callback to split it into three visual sections (pre-travel, main meeting, post-travel).

Once you've added custom class names (like travel-event or main-event), use CSS to set distinct colors for each segment:

For Background Events (Option 1) #

/* Style for main meeting event */
.main-event .fc-event-main {
  background-color: #2563eb; /* Deep blue for main event */
  border-color: #1e40af;
  color: white;
}

/* Style for travel blocks */
.travel-event {
  background-color: #fbbf24; /* Soft yellow for travel */
  opacity: 0.7; /* Optional: Make travel blocks semi-transparent */
}

For Split Visual Sections (Option 2) #

First, the eventContent callback to split the event:

eventContent: function(info) {
  return {
    html: `
      <div class="event-split-container">
        <div class="travel-segment">Travel</div>
        <div class="main-segment">${info.event.title}</div>
        <div class="travel-segment">Travel</div>
      </div>
    `
  };
}

Then the CSS to make the sections flex horizontally:

.event-split-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.travel-segment {
  background-color: #fbbf24;
  flex: 1; /* Takes 1 part of the width (30 mins) */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8em;
}

.main-segment {
  background-color: #2563eb;
  flex: 6; /* Takes 6 parts of the width (3 hours = 6 x 30 mins) */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

• Event Edits/Deletions: If users can edit the main event, listen to eventChange or eventRemove callbacks to update/delete the corresponding travel events automatically.
• Timezones: Use FullCalendar's built-in timeZone config instead of raw date methods to avoid inconsistencies if your app handles multiple timezones.
• Legacy Versions: If you're using FullCalendar v4 or earlier, use eventRender instead of eventContent, but the core logic remains the same.

内容的提问来源于stack exchange，提问作者Jagdish Khantwal