DHTMLX Scheduler：如何在事件框显示多选标签并获取完整多选标签？

Let's tackle your two DHTMLX Scheduler issues one by one — I've run into similar headaches before, so here's how to fix them:

1. Display Multiselect Labels in Event Boxes #

By default, DHTMLX Scheduler stores multiselect values as comma-separated key IDs (not labels) in your event object. To show the actual labels in event boxes, you need to override the event text template to convert those keys into human-readable labels.

First, define your multiselect options somewhere accessible (e.g., a global array or config object):

// Your multiselect options (match what you use in the lightbox)
const multiSelectOptions = [
  { key: 1, label: "Marketing" },
  { key: 2, label: "Development" },
  { key: 3, label: "Design" },
  { key: 4, label: "Support" }
];

Next, create a helper function to convert key strings to labels:

function getMultiselectLabels(keyString) {
  if (!keyString) return "";
  // Split comma-separated keys into an array
  const keys = keyString.split(",").map(key => parseInt(key));
  // Match keys to their labels and join into a readable string
  return multiSelectOptions
    .filter(opt => keys.includes(opt.key))
    .map(opt => opt.label)
    .join(", ");
}

Finally, override the event_text template to use this function:

scheduler.templates.event_text = function(start, end, event) {
  // Replace "multiselect_keys" with your actual event field name
  return getMultiselectLabels(event.multiselect_keys);
};

This will automatically render the labels in every event box instead of the raw key IDs.

2. Retrieve Multiselect Labels & Fix Text Update Issues #

Getting Full Label Sets #

If you're only getting a single label right now, it's likely because you're trying to match a single key instead of handling the comma-separated string. Use the same getMultiselectLabels function from above to get all selected labels as an array or string:

// Example: Get labels when saving an event
scheduler.attachEvent("onAfterLightboxSave", function(eventId, event, isNew) {
  const selectedLabels = getMultiselectLabels(event.multiselect_keys);
  console.log("Selected Labels:", selectedLabels); // e.g., "Development, Design"
  
  // Optional: Store labels directly on the event object if needed
  event.multiselect_labels = selectedLabels;
  return true;
});

Fixing Stale Text When Multiple Options Are Selected #

If the event box text doesn't update when you check multiple options, it's because Scheduler isn't automatically re-rendering the event after the multiselect changes. You can fix this by listening for changes in the lightbox's multiselect control and triggering an update:

// Wait until the scheduler is initialized
scheduler.attachEvent("onSchedulerReady", function() {
  // Get reference to the multiselect section in the lightbox
  const multiselectSection = scheduler.formSection("multiselect");
  
  // Listen for changes to the multiselect
  multiselectSection.attachEvent("onChange", function(newValue, oldValue) {
    const currentEvent = scheduler.getEvent(scheduler.getState().lightbox_id);
    // Update the event's multiselect field with the new key string
    currentEvent.multiselect_keys = newValue;
    // Force the scheduler to re-render the event
    scheduler.updateEvent(currentEvent.id);
  });
});

This will make the event box update in real-time as you check/uncheck multiselect options, instead of waiting until you save the lightbox.

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