Hide event end times on month layout

Ask the Community Customization
3

Hey there, @lilykgamble :waving_hand:

This script should do the trick:

const SELECTOR = '.fc-dayGridMonth-view .fc-event-time'; 
const observed = new WeakSet();

const collectRoots = (root, acc = []) => {
  acc.push(root);
  root.querySelectorAll('*').forEach((el) => {
    if (el.shadowRoot) collectRoots(el.shadowRoot, acc);
  });
  return acc;
};

const stripEndTime = (root) => {
  root.querySelectorAll(SELECTOR).forEach((el) => {
    let dashPassed = false;

    Array.from(el.childNodes).forEach((node) => {
      if (node.nodeType === Node.TEXT_NODE) {
        const value = node.nodeValue.replace(/\u00A0/g, ' ');

        if (!dashPassed) {
          if (value.includes('-')) {
            dashPassed = true;
            const start = value.split('-')[0];
            if (node.nodeValue !== start) node.nodeValue = start;
          }
          return;
        }

        if (node.nodeValue !== '') node.nodeValue = '';
        return;
      }

 
      if (dashPassed && node.style) node.style.display = 'none';
    });
  });
};

let scheduled = false;
const scan = () => {
  if (scheduled) return;
  scheduled = true;

  requestAnimationFrame(() => {
    scheduled = false;

    collectRoots(document).forEach((root) => {
      stripEndTime(root);

      if (observed.has(root)) return;
      observed.add(root);

      new MutationObserver(scan).observe(root, {
        childList: true,
        subtree: true,
        characterData: true
      });
    });
  });
};

scan();

Please add it to the Custom JS field on the Settings tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

We also have a Wishlist request to add a Hide end time option to the settings. Please upvote this idea if you’d like to see it in the future: Hide end time (Month layout)