fullcalendar/examples/js/theme-chooser.js

function initThemeChooser(settings) {
  var isInitialized = false;
  var currentThemeSystem; // don't set this directly. use setThemeSystem
  var currentStylesheetEl;
  var loadingEl = document.getElementById('loading');
  var systemSelectEl = document.querySelector('#theme-system-selector select');
  var themeSelectWrapEls = Array.prototype.slice.call( // convert to real array
    document.querySelectorAll('.selector[data-theme-system]')
  );

  systemSelectEl.addEventListener('change', function() {
    setThemeSystem(this.value);
  });

  setThemeSystem(systemSelectEl.value);

  themeSelectWrapEls.forEach(function(themeSelectWrapEl) {
    var themeSelectEl = themeSelectWrapEl.querySelector('select');

    themeSelectWrapEl.addEventListener('change', function() {
      setTheme(
        currentThemeSystem,
        themeSelectEl.options[themeSelectEl.selectedIndex].value
      );
    });
  });


  function setThemeSystem(themeSystem) {
    var selectedTheme;

    currentThemeSystem = themeSystem;

    themeSelectWrapEls.forEach(function(themeSelectWrapEl) {
      var themeSelectEl = themeSelectWrapEl.querySelector('select');
      var themeSystems = (themeSelectWrapEl.getAttribute('data-theme-system') || '').split(',')

      if (themeSystems.includes(themeSystem)) {
        selectedTheme = themeSelectEl.options[themeSelectEl.selectedIndex].value;
        themeSelectWrapEl.style.display = 'inline-block';
      } else {
        themeSelectWrapEl.style.display = 'none';
      }
    });

    setTheme(themeSystem, selectedTheme);
  }


  function setTheme(themeSystem, themeName) {
    var stylesheetUrl = generateStylesheetUrl(themeSystem, themeName);
    var stylesheetEl;

    function done() {
      if (!isInitialized) {
        isInitialized = true;
        settings.init(themeSystem);
      }
      else {
        settings.change(themeSystem);
      }

      showCredits(themeSystem, themeName);
    }

    if (stylesheetUrl) {
      stylesheetEl = document.createElement('link');
      stylesheetEl.setAttribute('rel', 'stylesheet');
      stylesheetEl.setAttribute('href', stylesheetUrl);
      document.querySelector('head').appendChild(stylesheetEl);

      loadingEl.style.display = 'inline';

      whenStylesheetLoaded(stylesheetEl, function() {
        if (currentStylesheetEl) {
          currentStylesheetEl.parentNode.removeChild(currentStylesheetEl);
        }
        currentStylesheetEl = stylesheetEl;
        loadingEl.style.display = 'none';
        done();
      });
    } else {
      if (currentStylesheetEl) {
        currentStylesheetEl.parentNode.removeChild(currentStylesheetEl);
        currentStylesheetEl = null
      }
      done();
    }
  }


  function generateStylesheetUrl(themeSystem, themeName) {
    if (themeSystem === 'bootstrap') {
      if (themeName) {
        return 'https://bootswatch.com/4/' + themeName + '/bootstrap.min.css';
      }
      else { // the default bootstrap theme
        return 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
      }
    } else if (themeSystem === 'bootstrap5') {
      if (themeName) {
        return 'https://bootswatch.com/5/' + themeName + '/bootstrap.min.css';
      }
      else { // the default bootstrap theme
        return 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
      }
    }
  }


  function showCredits(themeSystem, themeName) {
    var creditId;

    if (themeSystem.match('bootstrap')) {
      if (themeName) {
        creditId = 'bootstrap-custom';
      }
      else {
        creditId = 'bootstrap-standard';
      }
    }

    Array.prototype.slice.call( // convert to real array
      document.querySelectorAll('.credits')
    ).forEach(function(creditEl) {
      if (creditEl.getAttribute('data-credit-id') === creditId) {
        creditEl.style.display = 'block';
      } else {
        creditEl.style.display = 'none';
      }
    })
  }


  function whenStylesheetLoaded(linkNode, callback) {
    var isReady = false;

    function ready() {
      if (!isReady) { // avoid double-call
        isReady = true;
        callback();
      }
    }

    linkNode.onload = ready; // does not work cross-browser
    setTimeout(ready, 2000); // max wait. also handles browsers that don't support onload
  }
}