Want some respite from the cold, yet some place that’s warm and entertaining? Head over to the New York Theatre District and grab tickets to the best Broadway shows running this January. Best prices. Easy tickets. 100% entertainment! <\/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”: “”, }; 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 (currentObject == “Opening Date”) { result[“Opening Date”] = element.content.text; } else if (currentObject == “Closing Date”) { result[“Closing Date”] = 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 getRatingStar = (rating) => { let starMarkup = “”; const coloredStar = Math.floor(rating); const isRatingDecimal = rating – coloredStar != 0; const uncoloredStar = Math.floor(5 – rating); for (let i = 1; i <= coloredStar; i++) { starMarkup += `<i aria-hidden=”true”><\/i>`; } if (isRatingDecimal) { starMarkup += `<i aria-hidden=”true”><\/i>`; } for (let i = 1; i <= uncoloredStar; i++) { starMarkup += `<i aria-hidden=”true”><\/i>`; } return starMarkup; }; const functionsAfterDataUpdate = () => { allTours.forEach((tour, index) => { if (tour?.listingPrice) { 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}”> <a href=”https:\/\/www.headout.com\/tour\/${ tour.id }” target=”_blank” data-id=”${index}”><span><\/span><\/a> <div> <picture> <source type=”image\/webp” data-srcset=”${tourImageUrl}”> <img data-src=”${tourImageUrl}” data-sizes=”auto” alt=”${ tour.name }” sizes=”275px” loading=”lazy” src=”${tourImageUrl}”> <\/picture> <\/div> <div> <div> <div> <div>${ tour.primaryCategory.displayName }<\/div> <div>${tour.name}<\/div> <\/div> ${ tour.averageRating != 0 ? `<div> <div> <div><span>${getRatingStar( tour.averageRating )} <\/span><\/div> <\/div> <\/div>` : `<div>New Arrival<\/div>` } <\/div> <div> <div> ${ tour.listingPrice.bestDiscount != 0 ? `<div> <div><span>upto ${tour.listingPrice.bestDiscount}% off<\/span><\/div> <\/div>` : “” } <\/div> <div> ${tour.tags .map( (item) => `<div data-cat=”${item}”>${categoryNameMap[item]}<\/div>` ) .join(” “)} <\/div> <div> <div><span>from<\/span><\/div> <div> ${ tour.listingPrice.originalPrice != tour.listingPrice.finalPrice && tour.listingPrice.originalPrice > tour.listingPrice.finalPrice ? `<span>\u00a3${tour.listingPrice.originalPrice}<\/span>` : “” } <span>\u00a3${tour.listingPrice.finalPrice}<\/span> <\/div> <\/div> <\/div> <\/div> <\/div> `; const htmlObject = `${mainCard}<\/div> `; jQuery(“.page-card-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 = `<divhide-tab” : “” }” 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”); }); } jQuery(“.page-card-wrapper”).append( `<a href=”https:\/\/www.headout.com\/broadway-tickets-c-24\/” target=”_blank” rel=”noopener”><p>Show More<\/p><\/a>` ); }; 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<\/a> running through the year? Our month-on-month guide has 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