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 2 options:
  1. Don't display anything - including the title.
  2. Display the title with some appropriate text.

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. 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"
				},
				noEventsText: "No events are currently planned."
			};
			
		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 inbetween):
                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 2017</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.