The upcoming events HTML widget

Let Muzodo keep your website up-to-date.

This is the easiest way to add events to your website. Note, however, your group identifier will be transmitted to the browser.

A simple example

Add the following line to the place in your HTML page where you want the events to appear. <div id="upcomingEventsDiv"></div> Note: You can find your Group Api Key in your Group properties on the Groups tab
Then add this code to the bottom of the page.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://muzodo.com/api/muzodoApi-v2.js"></script>

<script type="text/javascript">
	getMuzodoEvents("your group API key", "upcomingEventsDiv");
</script>

The above dynamically creates an ordered list of the following format (note the default classes)

<ol class="myEventList">
	<li class="myEventListItem">
		<div class="myEventTitle">Event name</div>
		<div class="myEventDetail">Event date and time</div>
		<div class="myEventDetail">Address</div>
	</li>
	<li class="myEventListItem">..</li>
</ol>

Define these classes in your CSS to style the events.

Using your own classes

To better and more seamlessly integrate the events list into your website, you can map the default classes to classes you already have defined.

<html>
	<head>
		<style>
			.myEventList {
				list-style-type: none;
			}

			.myEventListItem {
			}

			.myEventTitle {
				color: red;
				font-weight: bold;
			}

			.myEventDetail {
				font-size: smaller;
			}

			.myEventDetail:nth-child(3) {
				margin-bottom: 10px;
			}
		</style>
	</head>

	<body>
		<div style="text-align:center; vertical-align: middle">
			<h2>Upcoming Gigs</h2>
			<div id="upcomingEventsDiv"></div>
		</div>
	</body>

	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="https://muzodo.com/api/muzodoApi.js"></script>

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail",
				}
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>
</html>

No upcoming events

Some thought needs to be given to what to show on your website when you have no upcoming events planned. Muzodo provides 3 options:

Don't display anything - including the title.
Display the title with some appropriate text.
Display all events from the beginning of the month, quarter or year.

Don't display anything

Update the code above, adding the text in italics below. Including the 'display:none' style ensures the title doesn't appear briefly while the page is loading.

		<div style="text-align:center; vertical-align: middle; display:none"
				class="muzodo-show-if-events">
			<h2>Upcoming Gigs</h2>
			<div id="upcomingEventsDiv"></div>
		</div>

Display some appropriate text

Update the code above, adding a new option as shown in italics below. You can set the styling of this using the 'noEvents' CSS class or mapping the class to one you have already (see above). In this example, this option is shown along side the classMap option however both options can be used independently.

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail",
					noEvents: "myNoEvents"
				},
				noEventsText: "No events are currently planned."
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>

In the case where you have no upcoming events, you can display all events from the beginning of the current month, quarter or year. To enable this, add the noEventsDisplayFrom option, with a value of MONTH, LASTMONTH, QUARTER, YEAR as shown below. Hint: Do not attempt to substitute a numeric value for this, the only available options are: 'MONTH', 'LASTMONTH', 'QUARTER' or 'YEAR'.

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail",
					noEvents: "myNoEvents"
				},
				noEventsDisplayFrom: "YEAR"
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>

Displaying non-public events

By default, only public events are shown. However, you may have a member-only page where you'd like to display private events or rehearsals. This is done by adding an eventType option (shown in italics) and may take the values PRIVATE, REHEARSAL, MEETING and/or PUBLIC as a comma separated list. In this example, this option is shown along side the classMap option however both options can be used independently.

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail"
				},
				eventType: "PRIVATE,REHEARSAL"
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>

Confirmed events

By default, confirmed and unconfirmed events are shown. To exclude unconfirmed events, add the exclude option (shown in italics) with the value UNCONFIRMED. In this example, this option is shown along side the classMap option however both options can be used independently.

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail"
				},
				exclude: "UNCONFIRMED"
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>

Limiting events

If you wish to limit the number of events shown, this is done by adding the maxEvents option (shown in italics below) with the maximum number of events to be displayed.

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail"
				},
				maxEvents: 3
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>

Changing the start date

You can display all events from the beginning of the current month, quarter or year. To do this, add the displayFrom option, with a value of MONTH, LASTMONTH, QUARTER, YEAR as shown below. Hint: Do not attempt to substitute a numeric value for this, the only available options are: 'MONTH', 'LASTMONTH', 'QUARTER' or 'YEAR'.

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail"
				},
				displayFrom: "YEAR"
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>

Reversing event order

When displaying events for the year, it is generally preferable to have the most recent event at the top. To reverse the order add the reverseOrder option.

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail",
					eventCancelled: "myEventCancelled"
				},
				reverseOrder: true
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>

Setting the date format

If the default date format is not to your liking, you can change it. To do this, add the dateFormat option, with a value as the combination of 'd' (day), 'm' (month), and 'y' (year) as shown below.

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail"
				},
				dateFormat: "mmm d, yyyy"  // e.g. Sep 5, 2022
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>

Value	Meaning
d	Day of the month as digits; no leading zero for single-digit days.
dd	Day of the month as digits; leading zero for single-digit days.
ddd	Day of the week as a three-letter abbreviation.
dddd	Day of the week as its full name.
m	Month as digits; no leading zero for single-digit months.
mm	Month as digits; leading zero for single-digit months.
mmm	Month as a three-letter abbreviation.
mmmm	Month as its full name.
yy	Year as last two digits; leading zero for years less than 10.
yyyy	Year represented by four digits.

Credit to Steven Levithan for developing this code.

Including cancelled events

By default cancelled events are excluded. To include them add the includeCancelled option. Optionally, you can create a 'eventCancelled' CSS class for styling, or use the classMap to map it to an existing class, as below.

	<script type="text/javascript">
		var options = {
				classMap: {
					eventList: "myEventList",
					eventListItem: "myEventListItem",
					eventTitle: "myEventTitle",
					eventDetail: "myEventDetail",
					eventCancelled: "myEventCancelled"
				},
				includeCancelled: true
			};
			
		getMuzodoEvents("your group API key", "upcomingEventsDiv", options);
	</script>

Custom event fields

In addition to the standard fields, you're able to display your own custom event fields on your website. To allow Muzodo to provide this information over the API, you need to mark the field as public. See Custom Event Fields for how to set this.

In the example below, a custom field called 'Ticket Price' has been created. To enable Muzodo's web widget to display this on your website, the customFields must be added to the options on your website's HTML page as so (shown in bold):

        var options = {
                classMap: {
                    eventList: "myEventList",
                    eventListItem: "myEventListItem",
                    eventTitle: "myEventTitle",
                    eventDetail: "myEventDetail",
                },
                noEventsText: "No events are currently planned.",
                customFields: [
                    { field: "Ticket Price",
                      title: "Tix",
                      prefix: "£",
                      separator: ": ",
                      class: "myTicketPriceClass"
                    }
                ]
            };

Note that if the custom field has not been defined in your account or does not match the options, the customField spec is ignored. The only required option is the 'field' option. The 'title', 'prefix', 'class' and 'separator' parameters are optional. Please take note of the subtlety with the square and curly brackets. Square brackets denote a list, so if you have more than one customField you specify them as follows (with commas in-between):

                customFields: [
                    { field: "Ticket Price",
                      prefix: "£",
                      separator: ": ",
                      class: "myTicketPriceClass"
                    },
                    { field: "Another custom field",
                      class: "myAnotherClass"
                    },
                    { field: "And another",
                      class: "myAndAnotherClass"
                    }
                ]

Muzodo generates HTML for the 'Ticket Price' field as follows:

<li class="myEventListItem">
    <div class="myEventTitle">Test draft</div>
    <div class="eventDate myEventDetail">Fri 31 Mar 2018</div>
    <div class="eventAddress myEventDetail"></div>
    <div class="customFields">
        <span class="myTicketPriceClass eventCustomFieldName myEventDetail">Ticket Price</span>
        <span class="myTicketPriceClass eventCustomFieldSeparator myEventDetail">: </span>
        <span class="myTicketPriceClass eventCustomFieldValue myEventDetail">£  11.99</span>
    </div>
    <div class="eventSpacer"></div>
</li>

Note the class definitions which gives you fine-grained control over styling.

Templates

For the most flexible formatting, you can use a template. Provided you are reasonably proficient in HTML, the code should be self evident. The example below shows how to format your events as a table.

To do this, create a template ('eventitem' below) and reference it in the options. You can also include custom fields, which must be referenced in the options. In the template, use the name CustomField_{fieldname}_Value, where the {fieldname} is the name of your field with any spaces removed and the capitalization preserved.

	<script type="text/template" data-template="eventitem">
		<tr>
			<td>${Name}</td>
			<td>${FormattedDate}</td>
			<td>${TimeRange}</td>
			<td>
				<a href="${CustomField_DetailsURL_Value}">More info..</a>
			</td>
		</tr>
	</script>

	<body>
		<h2>Upcoming Events</h2>
		<div id="upcomingEventsDiv">
			<table id="upcomingEventsTable" class="table">
				<tr>
					<th>Name</th>
					<th>Date</th>
					<th>Time</th>
					<th>Link</th>
				</tr>
			</table>
		</div>
	</body>

	<script type="text/javascript">
		var options = {
			template: "eventitem",
			customFields: [
				{
					field: "Details URL"
				}
			]
		};
			
		getMuzodoEvents("your group API key", "upcomingEventsTable", options);
	</script>

API Fields

See here for details on the fields that are available.