Adding a class to an item in an array in Javascript

Recently I was asked to help finish up a website that had a list of events on it. Using Ajax, you could explore events from months past, and if the event required a ticket, there was a button right there to take you to the page to purchase it. The problem i was brought on to help with was hiding that button if the event was old.

The system was build using the Event Manager plugin, and as I started digging through the code, I found a horror story. I normally work with The Event Calendar, and they have great documentation about every function and how to customize and override their templates, Event Manager has a few paragraphs on how to create your own customizations, but very little on how the function works.

The root of my problem was that the developer before me generated the list view of events using a shortcode that spit out the list(not each individual post). That shortcode generated the event post wrapper using a textarea on the settings page that accepts html, and a shorthand that seemed similar to handlebars.

Without an easy and clear way to override the shortcode, I created a Javascript function that looks at the current date, and if that individual event is older than the current date, add a class of hide to the button.

Now i’m more familiar with PHP’s date function that is wonderful to work with. Unfortunately, its not as easy to just spit out the the current date in a Ymd format. First, I created a variable that holds todays date, then created three other variables that pull the day, year, month.

//Get todays date and create a variable for the year, month and day (0 - 31)
var current = new Date();
var cYear  = current.getFullYear();
var cMonth  = current.getMonth();
var cDate  = current.getDate();

Next, since the page has a maximum of 10 posts per page, and each of them have the same class of .event-event, I created an array node list composed of each post and named it matches. I then set up a for loop to loop through the nodelist.

var matches = document.querySelectorAll(".event-event");
for (var i = 0; i < matches.length; i++) {
			
}

Here’s an overview of the finished function.

function btnHide(){
	
           //Get todays date and create a variable for the year, month and day (0 - 31)
	    var current = new Date();
	    var cYear 	= current.getFullYear();
	    var cMonth 	= current.getMonth();
	    var cDate 	= current.getDate();

	var matches = document.querySelectorAll(".event-event");
		for (var i = 0; i < matches.length; i++) {
			
		    var event = matches[i].getElementsByClassName('date');
		    var btn   = matches[i].getElementsByClassName('button');
		    //If the Date exists (has atleast 1 occurance), set attributes
		    if (event.length > 0) {
		        for (var j = 0; j < event.length; j++) {
			        var eventYear = event[0].getAttribute('data-year');
		            var eventDate = event[0].getAttribute('data-date');
		            var eventMonth = event[0].getAttribute('data-month');
		            
		        }
		    }
		    if(btn.length > 0){
			    if(cYear >= eventYear){
				    if(cMonth >= eventMonth){
					    if(cDate >= eventDate){
						   btn[0].classList.add('hide');
					    }
				    }
			    }//end if to add year
			}
		}
    }
    btnHide();

This isn’t the prettiest method and probably not the most efficient. If you have recommendations, feel free to leave to comment.