Filter settings

Controlling individual filter parts

You can toggle filter parts by using either GET parameter in the URL or initiate a javascript property. This will override any widget settings customised in Zooza.

Courses filter

				
					// GET parameter:
https://www.yoursite.com/calendar?courses_filter=true

// JS property
<script type='text/javascript'>
  window.zooza_courses_filter = true;
  
  // or alternatively
  window.ZOOZA = {
    hide_filter_course: true 
  };
</script>
				
			

Places filter

Just as above, this will override any settings stored in widget configuration within the Zooza app.

				
					// GET parameter:
https://www.yoursite.com/calendar?places_filter=true

// JS property
<script type='text/javascript'>
  window.zooza_places_filter = true;
</script>
				
			

Pre-setting the filter

You can pre-set or initialize calendar with GET parameters or or JS property:

				
					place_id, room_id
				
			

Presets the active location in the location selection.

You don’t need to provide room_id, although place_id is required in order for room_id to work properly.

You can also submit array of place_ids delimited by pipe character |:
				
					place_id=123|456|789
				
			
				
					course_id
				
			
Pass any valid course_id, or array of course_ids delimited by pipe character |.
Course can be also pre set via JS:
				
					<script>
window.ZOOZA = {
    course_ids: 1715, // or array [ 1715, 1716 ]
    hide_filter_course: true 
};
</script>
				
			

Customising the tiles

Minor customisations can be achieved by targeting individual tile’s elements and hiding them via CSS. Should you require more precise or heavier customisation, you can provide callback to calendar renderer and customise the tile by yourself:

The callback will pass two arguments, data – object representation of tile’s data. And HTML structure that will be inserted to the DOM.

The callback expects only the HTML code as return value. There’s no further processing by the calendar, the HTML goes straight into the output.

				
					<script>
window.ZOOZA = {
    course_ids: 1715, // or array [ 1715, 1716 ]
    hide_filter_course: true 
};
</script>
				
			

Import your own events

If you need to merge multiple data sources into the calendar, you can do that by importing the data at page load via JS property:

Adding places

Parameter

 

Mandatory

 

Note

 

place_id

yes

Unique ID that cannot be the same as in Zooza

room_id

yes

Unique ID that cannot be the same as in Zooza. You can provide 0 if you don’t require rooms.

name

yes

Name of the place

region

no

Name of the region/neighborhood.

				
					<script>
window.ZOOZA = {
    course_ids: 1715, // or array [ 1715, 1716 ]
    hide_filter_course: true 
};
</script>
				
			

Adding events

Parameter

 

Mandatory

 

Note

 

place_id

yes

This is the place_id used to filter the tiles. Place id has to be valid and be either pulled from zooza, or imported in previous step.

room_id

no

Same rules apply as for place_id.

schedule_id

no

Schedule/Group ID in Zooza or your external registration system

event_id

no

Event/Lesson ID in Zooza or your external registration system

course_id

no

Course ID in Zooza or your external registration system

name

yes

Name of the course

class_name

no

CSS class name applied to event’s tile

url

yes

URL to more information about the course (landing page). In case of courses managed in Zooza, this is pulled from Courses.url property

registration_url

no

URL to custom registration form

time

no

Time of the beginning of the lesson in HH:mm (H:i)

date_start

yes

Date of start of the course in YYYY-MM-DD format (Y-m-d)

date_end

no

Date of the end of the course in YYYY-MM-DD format (Y-m-d)

trainer

no

Name of lecturer

capacity

no

Total capacity of group

capacity_left

no

How many places are left to register

event_count

no

Count of the events in the group

				
					<script>
window.ZOOZA = {
    course_ids: 1715, // or array [ 1715, 1716 ]
    hide_filter_course: true 
};
</script>
				
			

In case of providing parameter: registration_url, calendar will append schedule_id, place_id, event_id as query parameters at the end of this URL to provide additional information to your custom registration form.