Here’s a quick taste of which Broadway shows have raised the curtain this May. Choose your pick and grab tickets before they sell out. The best Broadway shows in May are waiting for you! <\/p>\n
[tcb-script src=”https:\/\/cdn.jsdelivr.net\/npm\/dayjs@1.10.7\/dayjs.min.js”][\/tcb-script][tcb-script src=”https:\/\/unpkg.com\/dayjs@1.8.21\/plugin\/isSameOrAfter.js”][\/tcb-script][tcb-script src=”https:\/\/unpkg.com\/dayjs@1.8.21\/plugin\/isSameOrBefore.js”][\/tcb-script] [tcb-script] dayjs.extend(window.dayjs_plugin_isSameOrAfter); dayjs.extend(window.dayjs_plugin_isSameOrBefore); const getTGIDListForMonth = (allTours,displayMonth) => { const allToursArray = Object.values(allTours); const startMonthDate = dayjs( `${displayMonth}\/01\/${dayjs().year()}`, “MMMM\/DD\/YYYY” ); const endMonthDate = startMonthDate.add( startMonthDate.daysInMonth() – 1, “days” ); const startMonthNextYearDate = startMonthDate.add(1,”years”); const endMonthNextYearDate = endMonthDate.add(1,”years”); return allToursArray.reduce((accumulator,element) => { const endTourDate = dayjs(element[“Closing Date”],”YYYY-MM-DD”); const startTourDate = dayjs(element[“Opening Date”],”YYYY-MM-DD”); if ( compareDates( startMonthDate, endMonthDate, startTourDate, endTourDate ) || compareDates( startMonthNextYearDate, endMonthNextYearDate, startTourDate, endTourDate ) ) { return […accumulator,element[“id”]]; } return accumulator; },[]); }; [\/tcb-script] [tcb-script] document.addEventListener(“DOMContentLoaded”,function (event) { \/\/ Listicle Entry Animation let slideInShows = function (animEleClass,animationClass) { jQuery(“.show-wrapper .accBody:visible”).slideToggle(“slow”); jQuery(“.show-wrapper .invert”).removeClass(“invert”); jQuery(“.show-wrapper”) .removeClass(animationClass) .fadeOut() .finish() .promise() .done(function () { jQuery(“.” + animEleClass).each(function (i) { jQuery(this) .addClass(animationClass) .removeClass(animEleClass) .delay((i + 1) * 100) .fadeIn(); }); }); }; \/\/ Loads All Listed Products as in Months Tab let showTab = function (tabId) { showTgids = []; jQuery(“.show-wrapper”).removeClass(“tabbed”); jQuery(“[data-infotab]”).removeClass(“active”); jQuery(‘[data-infotab=”broadway musicals”]’).addClass(“active”); if (tabId == 0) { jQuery(“.show-wrapper”).addClass(“prepare tabbed”); } else if (typeof tabId === “string”) showTgids = tabId?.split(“,”); else showTgids.push(tabId); for (let i = 0; i < showTgids.length; i++) jQuery( “.show-wrapper[data-tgid=” + parseInt(showTgids[i]) + “]” ).addClass(“tabbed prepare”); slideInShows(“prepare”,”active”); }; const msToTime = (duration) => { let milliseconds = parseInt((duration % 1000) \/ 100), seconds = Math.floor((duration \/ 1000) % 60), minutes = Math.floor((duration \/ (1000 * 60)) % 60), hours = Math.floor((duration \/ (1000 * 60 * 60)) % 24); return hours + ” hrs ” + minutes + ” mins”; }; \/\/ HTML Stars Generation let getStars = function (rating) { rating = rating < 0 ? 0 : rating; if (rating < 0.25) return; let round = Math.floor(rating); let full = rating > round + 0.5 ? true : false; let half = rating > round + 0.25 ? true : false; let template = “”; let i; \/\/ Populate Complete Stars for (i = 0; i < round && i < 5; i++) { template += “<span class=’fas fa-star’><\/span>”; } \/\/ Add Partial Star (for floating ratings) if (full && i < 5 && ++i) template += “<span class=’fas fa-star’><\/span>”; else if (half && i < 5 && ++i) template += “<span class=’fas fa-star-half-alt’><\/span>”; \/\/ Populate Remaining With Empty Stars while (i++ < 5) template += “<span class=’far fa-star’><\/span>”; return template; }; const getMicroBrandsHighlightsData = (microBrandsHighlight) => { const result = { “Opening Date”: “”, “Closing Date”: “”, “Blog Summary”: “”, “Seating Plan”: null, “Read More”: “”, “Theatre Name”: null, “Getting There”: null, }; let currentObject = “”; microBrandsHighlight.forEach((element) => { if ( element.type == “heading6” && element.content.text == “Opening Date” ) { currentObject = “Opening Date”; } else if ( element.type == “heading6” && element.content.text == “Closing Date” ) { currentObject = “Closing Date”; } else if ( element.type == “heading6” && element.content.text == “Blog Summary” ) { currentObject = “Blog Summary”; } else if ( element.type == “heading6” && element.content.text == “Blog Theatre Seating Plan” ) { currentObject = “Seating Plan”; } else if ( element.type == “heading6” && element.content.text == “Blog Show Page” ) { currentObject = “Read More”; } else if ( element.type == “heading6” && element.content.text == “Theatre Name” ) { currentObject = “Theatre Name”; } else if ( element.type == “heading6” && element.content.text == “Getting There Map Link” ) { currentObject = “Getting There”; } else { if (currentObject == “Opening Date”) { result[“Opening Date”] = element.content.text; } else if (currentObject == “Closing Date”) { result[“Closing Date”] = element.content.text; } else if (currentObject == “Blog Summary”) { result[“Blog Summary”] = element.content.text; } else if (currentObject == “Seating Plan”) { result[“Seating Plan”] = element.content.text; } else if (currentObject == “Read More”) { result[“Read More”] = element.content.spans?.[0]?.data.url; } else if (currentObject == “Theatre Name”) { result[“Theatre Name”] = element.content.text; } else if (currentObject == “Getting There”) { result[“Getting There”] = element.content.text; } currentObject = “”; } }); return result; }; const monthSubCategoryFilter = jQuery(“.month-sub-category-filter”); const filterEnabled = monthSubCategoryFilter.data(“filter-enabled”) === 1; const categoryNameMap = {}; const filterHeading = monthSubCategoryFilter?.[0].getAttribute( “data-filter-heading” ); const subCategoryIds = monthSubCategoryFilter?.[0] .getAttribute(“data-sub-category-ids”) ?.split(“,”); const monthCSV = monthSubCategoryFilter?.[0] ?.getAttribute(“data-months”) ?.split(“,”)?.filter(d => d !== ”); const firstMonth = monthCSV?.[0]; let allTours = []; const functionsAfterDataUpdate = () => { allTours.forEach((tour,index) => { if(tour.listingPrice){ const showBody = tour[“Blog Summary”] || tour.shortSummary; const opening = getMicroBrandsHighlightsData(tour.microBrandsHighlight)[“Opening Date”]; const tourImageUrl = `${tour.imageUrl }?auto=compress&w=500&h=250&crop=faces&fit=min` const mainCard = `<div data-rating=”${tour.averageRating}” data-tgid=”${tour.id}” data-open=”${opening}”> <div data-id=”${index}”> <div> <div> <div> <picture> <source type=”image\/webp” data-srcset=”${tourImageUrl}&fm=webp”> <img data-src=”${tourImageUrl}&fm=pjpg” data-sizes=”auto” data-cover-image=”” alt=${tour.name}” title=”${tour.name}”> <\/picture> <div div>${tour.name}<\/div> <div> ${tour.tags.map((item) => `<div data-cat=”${item}”>${categoryNameMap[item]}<\/div>`).join(” “)} <\/div> <div data-show-ratings=”${tour.averageRating}”><\/div> <div>${showBody ? `<span><\/span>` : “”}<\/div> <div> <span> <span>from<\/span> <span>$${tour.listingPrice ? tour.listingPrice.finalPrice : “”}<\/span> <\/span> <\/div> <div><\/div> <div><\/div> <\/div> <\/div> <\/div> <\/div> `; const htmlObject = ` ${showBody ? mainCard : `<a href=”https:\/\/www.headout.com\/tour\/${tour.id}” target=”_blank” style=”text-decoration: none;”>${mainCard}<\/a>`} ${showBody ? `<div data-id=”${index}”> <div> <div> <div> <div> ${tour.microBrandsDescriptor?.split(“rn”)?.map((item) => (`<div>${item?.trim()}<\/div>`)).join(” “)} <\/div> <div> <div><span>Duration:<\/span> ${msToTime(tour.maxDuration)}<\/div> <\/div> <\/div> <div> ${tour[“Blog Summary”] || tour.shortSummary} <\/div> <div> <div> <div> ${tour[“Seating Plan”] || tour[“Getting There”] ? `<a href=”${tour[“Seating Plan”] || tour[“Getting There”]}” target=”_blank”> <div> <div> <i><\/i> <span>${tour[“Theatre Name”]}<\/span> <span>${tour[“Seating Plan”] ? “Seating Plan” : “Getting There”}<\/span> <\/div> <\/div> <\/a>` : “”} <a href=”${tour[“Read More”] || `https:\/\/www.headout.com\/tour\/${tour.id}`}” target=”_blank”> <div>READ MORE<\/div> <\/a> <a href=”https:\/\/www.headout.com\/book\/${tour.id}\/seatmap-select\/” target=”_blank”> <div>BOOK NOW<\/div> <\/a> <\/div> <\/div> <\/div> <\/div> <\/div>` : “” }<\/div> `; jQuery(“.product-wrapper”).append(htmlObject); jQuery(`.show-wrapper[data-tgid=${tour.id}]`) .find(“[data-show-ratings]”) .html(getStars(tour.averageRating)); }}); jQuery(“.accCtrl”).on(“click”,function (e) { selEle = jQuery(e.target).closest(“.show-wrapper”); jQuery(selEle).find(“.listicle-item-arrow”).toggleClass(“invert”); target = jQuery(selEle).find(“.accBody”); console.log(target) jQuery(target).slideToggle(“slow”); }); filterEnabled && monthCSV.forEach((month,index) => { const monthName = month.trim(); const isSingleMonth = monthCSV?.length === 1; console.log(isSingleMonth) let htmlObject; let ids = “0”; if (monthName != “ALL SHOWS”) { ids = getTGIDListForMonth(allTours,monthName).join(); } if (index == 0) { htmlObject = `<div”}” data-tab=”${index + 1}” data-ids=”${ids}” data-active=”1″ > ${monthName}<\/div> `; } else { htmlObject = `<div data-tab=”${index + 1 }” data-ids=”${ids}” data-active=”0″>${monthName}<\/div>`; } jQuery(“.shows-filters .tab-wrapper .mobi-text .mobi-wrap”).append( htmlObject ); }); \/\/ Page Init Products List Generation showTab( jQuery(“.tab-item[data-active=’1′]”).addClass(“active”).data(“ids”) ); \/\/ Months Tab Change Handler jQuery(“.tab-item”).click(function () { jQuery(“.tab-item”).data(“active”,0).removeClass(“active”); jQuery(this).data(“active”,1).addClass(“active”); jQuery(this) .closest(“.mobi-text”) .find(“.text”) .text(jQuery(this).text()); showTab(jQuery(this).data(“ids”)); jQuery(jQuery(“input.filter-chckbox:checked”).prop(“checked”,false)); jQuery(“.cat-filter label:first-child”).delay(500).trigger(“click”); }); \/\/ On Window Resize Hide Mobile Months Tab. jQuery(window).resize(function (e) { if (jQuery(window).width() > 630) jQuery(“.mobi-wrap”).attr(“style”,””); }); if (monthCSV?.length === 1) { jQuery(“.mobi-text”).addClass(“hide-tab”) } \/\/ Mobile Months Tabs Change Handler jQuery(“.mobi-text”).click(function (e) { if ( jQuery(“.mobi-wrap”).is(“:hidden”) || jQuery(this).hasClass(“active”) ) jQuery(this) .closest(“.mobi-text”) .toggleClass(“active”) .find(“.mobi-wrap”) .slideToggle(“slow”); }); \/\/ Category Change Handler jQuery(“[data-filter-cat]”).change(function (e) { jQuery(“[data-cat]”).removeClass(“mobi-active-filter”); jQuery(“[data-infotab].active”).removeClass(“active”); let catName = jQuery(this).data(“filter-cat”); jQuery(`[data-infotab=’${catName.toLowerCase()}’]`).addClass(“active”); jQuery(“[data-filter-cat]”).each(function (ele) { if (jQuery(this).find(“input”).is(“:checked”)) { cat = jQuery(this).data(“filter-cat”).toLowerCase(); const activeMonth = jQuery(“.tab-item.active”).text(); if ( activeMonth != “All Shows” && (cat == “new arrivals” || cat == “shows reopening”) ) { const elements = jQuery(“.show-wrapper.tabbed”).has(`[data-cat=”${cat}”]`); for (i = 0; i < elements.length; i++) { ele = elements[i]; const condition = dayjs(jQuery(ele).data(“open”),”MM\/DD\/YYYY”).format(“MMMM”) === activeMonth; if (condition) { jQuery(ele) .addClass(“prepare”) .find(`[data-cat=”${cat}”]`) .addClass(“mobi-active-filter”); } }; } else { jQuery(“.show-wrapper.tabbed”) .has(`[data-cat=”${cat}”]`) .addClass(“prepare”) .find(`[data-cat=”${cat}”]`) .addClass(“mobi-active-filter”); } } }); slideInShows(“prepare”,”active”); }); \/\/ Page init default Category Handler & Default Open Listicle filterEnabled && setTimeout(function () { jQuery(“[data-filter-cat]”).each(function (ele) { if (jQuery(this).find(“input”).is(“:checked”)) { cat = jQuery(this).data(“filter-cat”).toLowerCase(); jQuery(“.show-wrapper.tabbed”) .has(`[data-cat=”${cat}”]`) .addClass(“prepare”); } }); slideInShows(“prepare”,”active”); jQuery(“.cat-filter label:first-child”).delay(500).trigger(“click”); jQuery(“.show-wrapper:first-child .accCtrl”) .eq(0) .delay(1000) .trigger(“click”); },300); \/\/ Lower Case All Data Attributes. let lowerCaseAll = function (ele) { jQuery(ele).each(function () { var $this = jQuery(this), data = $this.data(); for (var k in data) $this.attr(“data-” + k,data[k].toLowerCase().trim()); }); }; lowerCaseAll(jQuery(“[data-filter-cat], [data-cat], [data-infotab]”)); if (!filterEnabled) { jQuery(“.show-wrapper”).each(function (i) { jQuery(this).addClass(“active”).css(“display”,”block”); }); } }; filterEnabled && monthSubCategoryFilter.append(`<div> <div> <h3>${filterHeading}<\/h3> <div> <\/div> <\/div> <\/div>`); filterEnabled && monthSubCategoryFilter.prepend(`<div> <div> <div> <div> <span>${firstMonth}<\/span><span><\/span><\/div> <div> <\/div> <\/div> <\/div> <\/div>`); async function getData() { for (const [index,subCategory] of subCategoryIds.entries()) { subCategoryId = subCategory.trim(); if (subCategoryId != “”) { await jQuery.get( { url: `https:\/\/vivillion.netlify.app\/api\/parsed-tours\/?primarySubCategory=${subCategoryId}&limit=100&city=New York`, }, function (res) { const displayName = res.subCategory.displayName; const subCategoryId = res.subCategory.id; const subCategoryDiscription = monthSubCategoryFilter.data( `${subCategoryId.toString()}-des` ); const subCategoryName = monthSubCategoryFilter.data( `${subCategoryId.toString()}-name` ); categoryNameMap[displayName] = subCategoryName ? subCategoryName : displayName; res.pageData.items.forEach((item) => { item.tags = [displayName]; if (allTours.filter((x) => x.id === item.id).length === 0) { allTours.push(item); } else { allTours .filter((x) => x.id === item.id)[0] .tags.push(displayName); } }); jQuery(“.filter-combo .new-filters .cat-filter”) .append(`<label data-filter-cat=”${displayName.toLowerCase()}” data-filtercat=”${displayName.toLowerCase()}”> <input type=”radio” name=”cat”> <div><span><\/span>${categoryNameMap[displayName] }<\/div> <\/label> `); jQuery(“.info-tab”).append( `<div data-infotab=”${displayName}”> <h2>${displayName}<\/h2> <p>${subCategoryDiscription}<\/p> <\/div>` ); if (index == subCategoryIds.length – 1) { allTours = allTours.map((tour) => { const result = getMicroBrandsHighlightsData( tour.microBrandsHighlight ); return { …result, …tour, }; }); functionsAfterDataUpdate(); } } ); } } } getData(); }); [\/tcb-script]<\/p>\n
Wondering what are the best Broadway shows currently playing<\/a> ? Our guides have you covered. <\/p>\n Best Broadway Shows in January<\/a><\/p>\n Best Broadway Shows in February<\/a><\/p>\n Best Broadway Shows in March<\/a><\/p>\n Best Broadway Shows in April<\/a><\/p>\n Best Broadway Shows in May<\/a><\/p>\n Best Broadway Shows in June<\/a><\/p>\n Best Broadway Shows in July<\/a><\/p>\n Best Broadway Shows in August<\/a><\/p>\n Best Broadway Shows in September<\/a><\/p>\n Best Broadway Shows in October<\/a><\/p>\n