Help with setting CSS styles for schedule sharing widget

[Rvandersteen]

I'm trying to leverage the schedule sharing widget on a new site. On the Scheduling Events Tutorial page (http://www.bandhelper.com/tutorials/scheduling_events.html), under the 'SHOWING EVENTS ON YOUR WEBSITE' section, step 9 describes how to customize the appearance using the web style sheet. I've set up a new site using squarespace and I'm able to add the widget via a block of html code that I insert into a page. However, I can't seem to figure out how to actually set the styles for the div.bandhelper_events and div.bandhelper_events p, as described in the tutorial. I'm specifically looking to change the font color to white.

If someone has done this before, would you mind sharing an example of the html code that you used to style this widget?

Thanks in advance for any help!

[arlo]

Adding this HTML to your page should work:

Code Select Expand


<style type="text/css">
    div.bandhelper_events {
        color: white;
    }
</style>


[Rvandersteen]

Worked perfectly. Thanks!

[Rvandersteen]

One follow up question... Is it possible to set the css style for individual lines of the schedule widget output? For example, if I wanted to bold the bandhelper_date and bandhelper_name lines, but leave the other lines not bold. 

[arlo]

Yes, try this:

Code Select Expand


<style type="text/css">
    .bandhelper_events {
        color: white;
    }
    .bandhelper_date {
        font-weight: bold;
    }
    .bandhelper_name {
        font-weight: bold;
    }
</style>


This should work for either the table or paragraph layout options.

[Rvandersteen]

Thanks Arlo. Those style settings worked, but I'm still struggling with getting schedule sharing to work for a band like ours. We play somewhere between 40-70 gigs a year, most of which we are starting to put into BH. This means our list of public gigs is very long and would not look that great on our website b/c the user would have to scroll vertically for a long time.

I tried to switch to your table view, but ran into some additional formatting issues. The biggest issue here is that your table output doesn't include any table headers. I couldn't figure out a way to add these in to the html, as the table is dynamically adding the html code and I think the header info needs to be a part of that. If you know of a way to add in the table headers with HTML code that can be used with your script generate code, please let me know. Otherwise, do you think it might be possible to add the headers to the script generated html code?

The other issue I'm running into when trying to implement this is private events. Our band plays for a lot of wedding and corporate functions and we are starting to use the functionality in BH that allows for us to mark the gig as private. The problem with this is that there still tremendous value in including private gigs on the schedule sharing export. It lets our site visitors know that we are book for a certain date and it let's them know that we keep busy playing gigs, when it might otherwise look like we aren't playing much. We want to show that we are playing a gig, but not disclose the name of the event.

I've considered creating an event and naming it "Private Event", but then the rest of the awesome functionality that you built into the events page gets kind of messy. For example, if I'm sending out event updates to my bandmates for the "Private Event" and we have 4 of those in a month, how are they supposed to know which private event they are getting an update for.

It would be great if BH could help us with this private/public paint point (quite the alliteration!). My suggestion would be to add a new checkbox to the event page/schema called "Include in Schedule Sharing". Add some logic that if the existing "Public" checkbox is checked, it checks and disables the "Include in Schedule Sharing" checkbox. So any public gig is always shared. Then if the existing "Public" checkbox is unchecked, add some logic to uncheck the "Include in Schedule Sharing" checkbox, but enable it. This way the user can elect to check it off. The last piece of this would be to determine how to mask the name (and other fields) that needed to be masked. I think the simplest approach might be to replace the name with "Private Event", but that may not work for all your users. I'm sure there are other ways to skin this cat, but this is an example of how I envision this working. 

So yea, those two things (table headers and private events) are really the two things that are preventing our band from diving deep into using the BH scheduling functionality. Thanks for your consideration and I very much look forward to your reply!!


P.S. If there's a better medium that you'd like me to use other than this forum to submit these requests, please let me know. I'd be happy to submit them in whatever is easiest for you to consume.

[arlo]

For table headers, do you think your site visitors won't understand what the information means without them? Can you show me your website so we are both talking about the same thing?

For private events, the Public checkbox is meant to indicate the you're ready to publish the event on your website, not that it's a public gig versus a private party or wedding or something. So you can use the Public checkbox to limit what displays on your website to the next month or whatever to keep that list from getting too long.

There is no built-in function to identify private events of the kind you're talking about, but that's on my to do list. Meanwhile, it might help your bandmates identify them if you name them something a little more specific like "Wedding" or "Corporate Event". Otherwise you will have to leave them off your public website until I can add a feature for that.

[Rvandersteen]

The site, which is not finished and in it's early design stages, can be viewed here: https://rob-vandersteen.squarespace.com/. Click the "Calendar" link in the nav bar, or just scroll down one page.

You are probably right that not having the headers won't impede the site visitors from understanding the information. I just thought it would make sense to export the headers from the event in the widget, especially with the ability to add custom fields. I'm sure there is someone else out there using this widget where adding these headers would be less desirable to them. So, I think we can live with no headers.

The other thing I noticed is that the columns aren't static. I'm using your Custom Fields and I'm seeing that the schedule sharing widget only outputs data if the event field is filled out in the event. So on my site, the first gig ("Hody Bar& Grill") doesn't have the custom "Venue" field filled out, but does have the custom field named "Public Notes" filled out. The other gig, "Occupaws Fundraiser" has the "Venue" field filled out, doesn't have anything for the "Public Notes" field. The result is a grid where the columns are different. The 3rd column for the first event is a custom field that is different than the 3rd column for the second gig. Because this is a table, I would expect that the grid would include any and all public custom fields, even if they are blank, to maintain the table column structure.

I've attached copies of the two events in question to this post. Hopefully you can see the problem that I'm seeing by using those and the actual site.

Thanks for the tip on the public checkbox and for letting me know the private events request is on your roadmap.

[arlo]

Good point, the table columns shouldn't be skipped if the values are empty. I just fixed that.

Madison, cool, I used to live there. Used to play in the coffeeshops on State Street.

[Rvandersteen]

Arlo - Thanks for much for your quick replies. I'll be sure to keep my eye out for any future enhancements re: the schedule sharing.

Cool to know you used to live and play in Madison. It's a great town .

[Rvandersteen]

Hi Arlo,

As I'm testing this, I'm still seeing some issue in how the widget code is being displayed in different browsers.

I've moved back to the paragraph view of the events. I'm expecting that all of the fields that are public, in my case Date, Name and two custom fields, will be displayed. What is actually happening is that on some browsers it's only displaying some of the fields.

When rendered in Chrome, I'm seeing the date, name, and two custom fields (what I expect to see). When rendered in IE or mobile Safari, I'm only seeing the date and name, but no custom fields. When I inspect the page in IE, the html code for the custom fields is straight up missing. It's there for Chrome. I can't / don't know how to inspect from mobile Safari, but I suspect it's the same as IE.

Below is the code that I have in my site, as well as the HTML from IE and Chrome. The site is: https://rob-vandersteen.squarespace.com/.

Is this something that can be fixed from your end?

Script/CSS from site:
<script type="text/javascript" src="https://www.bandhelper.com/schedule/widget/6050"></script>
<style type="text/css">
  .bandhelper_events {
        color: white;
    }
    .bandhelper_date {
        font-weight: bold;
    }
    .bandhelper_name {
        font-weight: bold;
    }
</style>

IE HTML:
<div class="sqs-block-content"><script src="https://www.bandhelper.com/schedule/widget/6050" type="text/javascript"></script><div class="bandhelper_events">

<p><span class="bandhelper_date">Fri 3/3/17</span><br>
<span class="bandhelper_name">Private Event </span><br>
</p>

<p><span class="bandhelper_date">Sat 3/11/17, 9:00 pm</span><br>
<span class="bandhelper_name">Hody Bar &amp; Grill</span><br>
</p>

<p><span class="bandhelper_date">Sat 5/20/17</span><br>
<span class="bandhelper_name">Occupaws Fundraiser</span><br>
</p>
</div>
<style type="text/css">.bandhelper_events { font-family: Arial, Helvetica, sans-serif; }</style>
<style type="text/css">
  .bandhelper_events {
        color: white;
    }
    .bandhelper_date {
        font-weight: bold;
    }
    .bandhelper_name {
        font-weight: bold;
    }
</style>

</div>

Chrome HTML:
<div class="sqs-block-content"><script type="text/javascript" src="https://www.bandhelper.com/schedule/widget/6050"></script><div class="bandhelper_events">

<p><span class="bandhelper_date">Fri 3/3/17</span><br>
<span class="bandhelper_name">Private Event </span><br>
<span class="bandhelper_custom_3187">The Brink Lounge</span><br>
<span class="bandhelper_custom_3188">Madison, WI</span><br>
</p>

<p><span class="bandhelper_date">Sat 3/11/17, 9:00 pm</span><br>
<span class="bandhelper_name">Hody Bar &amp; Grill</span><br>
<span class="bandhelper_custom_3188">Middleton, WI</span><br>
<span class="bandhelper_custom_3189">No Cover Charge~!</span><br>
</p>

<p><span class="bandhelper_date">Sat 5/20/17</span><br>
<span class="bandhelper_name">Occupaws Fundraiser</span><br>
<span class="bandhelper_custom_3187">Capital Brewery</span><br>
<span class="bandhelper_custom_3188">Middleton, WI</span><br>
</p>
</div>
<style type="text/css">.bandhelper_events { font-family: Arial, Helvetica, sans-serif; }</style>
<style type="text/css">
  .bandhelper_events {
        color: white;
    }
    .bandhelper_date {
        font-weight: bold;
    }
    .bandhelper_name {
        font-weight: bold;
    }
</style>

</div>

[arlo]

Okay, the custom fields were only showing in a browser that you were logged into. I just fixed that.

[Rvandersteen]

This looks good now. Thanks!

[Rvandersteen]

Hey Arlo,

Our Schedule Sharing URL/widget is outputting a field named "bandhelper_address" (see sample output below). There's no data in this field and it's causing an extra column to appear in the table. I looked through all the properties in the events section and our custom fields and I don't see any "address" field anywhere. Can you help me understand where this field is coming from and why is showing on the widget?

Code Select Expand

document.write("<td class=\"bandhelper_date\">Sun 5/28/17</td>\n");
document.write("<td class=\"bandhelper_name\">Private Wedding</td>\n");
document.write("<td class=\"bandhelper_address\"></td>\n");
document.write("<td class=\"bandhelper_custom_QE8Ckr\"></td>\n");
document.write("<td class=\"bandhelper_custom_nPVfEC\">Middleton, WI</td>\n");
document.write("<td class=\"bandhelper_custom_Uaa4MH\"></td>\n");
document.write("</tr>\n<tr>\n");
document.write("<td class=\"bandhelper_date\">Sat 6/3/17</td>\n");
document.write("<td class=\"bandhelper_name\">Private Wedding</td>\n");
document.write("<td class=\"bandhelper_address\"></td>\n");
document.write("<td class=\"bandhelper_custom_QE8Ckr\"></td>\n");
document.write("<td class=\"bandhelper_custom_nPVfEC\">Glendale, WI</td>\n");
document.write("<td class=\"bandhelper_custom_Uaa4MH\"></td>\n");
document.write("</tr>\n<tr>\n");

http://www.bandhelper.com/schedule/widget/6050

[Rvandersteen]

One more thing... I'm noticing that the widget is not including any event that is public/confirmed and is more than 6 months in the future. Any event 6 months or less is showing up. Is that expected? If so can that be changed? I would think that is you are choosing to make the event public, that you would want it to be included.

Thanks!