We’ve been using Ticketure for the last year to sell tickets to special events. As far as I know, they’ve been great. But I did hear yesterday that we’d received some calls from people confused about whether an event this weekend was sold out. It sounds like there’s some confusion over the legend for their calendar date picker:
Some people see that “Fully booked” and read it not as a key to the calendar below, but as an indication that the event is fully booked. I’m not sure what they think “Venue closed” and “Tickets not yet available” mean in that context, but that’s not relevant to the immediate problem, which is that I’d like to just remove the key entirely. I’d also like to remove the date picker for April (and, unseen to the right, May) because this event only runs on March 3rd and 4th; there’s no reason to have any other months available for selection.
There’s no reason to have any other days, for that matter, but that is one small limitation with Ticketure — you can either have a one-off event, which runs for one day, or you can have an event which runs for multiple days but for which you have the entire calendar available for selection. If you have a special event which only runs for a weekend, you either need to create it as two separate one-off events or (as we’ve done) as a timed event where you are closed every day except for the two days of the event.
So, Ticketure doesn’t provide any way of styling the date picker. Apparently when we asked, they told us it was not possible. Except… they do allow you to enter HTML in the event description field. And they aren’t (as of right now, anyway) stripping <style> tags out. So I can add whatever CSS I want. I might even be able to ad javascript; I didn’t test that. What I did is add the following CSS to our event description:
<style>
#SelectSessionStep div.SelectSessionStep__header h3::after {
content: " (March 3 or 4)";
}
div.DatePicker + div.DatePicker {
display: none !important;
}
.DatePickerKey {
display: none;
}
.SelectSessionStep__body.calendars {
margin-top: 1em;
}
</style>
That results in this:
No confusing key, reinforcement of the two available dates, and no extra calendar months. I’m particularly pleased with the hiding the extra months; it took me a while to figure out how to do it. The “div.DatePicker + div.DatePicker” construction selects every div with the DatePicker class whose immediate preceding sibling is also a div with the DatePicker class. In effect, it selects all but the first div of that type, which is exactly what I wanted. I couldn’t get div.DatePicker:first-of-type or div.DatePicker:nth-of-type to work; I suspect they only work at the element level, and adding the class selector breaks it.
It’s entirely possible this won’t work in the future — Ticketure could change their layout, or start sanitizing HTML in event descriptions. But for now it works, and since this is our last event ticketed through them, I don’t have to worry about whether it will keep working. (We’ve moved to Patron Manager for future events and regular admissions.)