Here's a simple example with a handful of the public holidays calendars:
$("#selectCountry").change(function(e) {
$("#output").html("Loading...");
var country = $("#selectCountry").val();
var calendarUrl = 'https://www.googleapis.com/calendar/v3/calendars/en.' + country
+ '%23holiday%40group.v.calendar.google.com/events?key=<yourAPIKey>';
$.getJSON(calendarUrl)
.success(function(data) {
console.log(data);
$("#output").empty();
for (item in data.items) {
$("#output").append(
"<hr><h3>" + data.items[item].summary + "<h3>" +
"<h4>" + data.items[item].start.date + "<h4>"
);
}
})
.error(function(error) {
$("#output").html("An error occurred.");
})
});
$("#selectCountry").trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select id="selectCountry">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="bm">Bermuda</option>
<option value="swedish">Sweden</option>
</select>
<pre id="output"></pre>
<script type="text/javascript">
</script>
</body>
This strategy constructs a URL for the calendar from the option selected in the dropdown menu. It parses the holiday name and information from the raw JSON response, which is contained in the data
parameter of the $.getJSON
callback function.