Calendar Widget

Filter settings

Notice The filter settings and filter itself will only work if you have more than one course set up in Zooza

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>
  const trainers = [...];
    
  window.ZOOZA = {
    callback: {
      event_tile_render: ( data, html ) => {
        console.log(data);
        trainers.forEach( ( trainer ) => {

          if( t.zooza_id === data.trainer_id )    {
                // do your stuff, insert HTML, remove node, etc.
          }
        } );
        return html;
      }
    }
};
</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 type='text/javascript'>
var zooza_places = [{
    place_id : 50,
    room_id : 25,
    name : 'Istropolis',
    region : 'Ružinov'
  }];
</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 type='text/javascript'>
var zooza_events = [{
    place_id : 50, // place_id must match imported place_id or valid zooza place_id
    room_id : 25, // same as for place_id
    schedule_id : null,
    event_id : null,
    name : 'Test',
    class_name : 'schedule_51',
    url : 'https://www.yoursite.com',
    registration_url : 'https://www.yoursite.com/registration'
    time : '09:50',
    date_start : '2019-09-12',
    date_end : '2019-12-12',
    course_id: 44, // must be valid zooza course_id
    trainer : 'Henri Miro',
    capacity : 8,
    event_count: 1,
    capacity_left: 10
  }, {
    place_id : 50,
    course_id: 44,
    event_count: 2,
    schedule_id : null,
    event_id : null,
    name : 'Test',
    class_name : 'schedule_51',
    url : 'https://www.yoursite.com',
    registration_url : 'https://www.yoursite.com/registration'
    time : '09:30',
    date_start : '2019-09-12',
    date_end : '2019-12-12',
    trainer : 'Albert Matisse',
    capacity : 8,
    capacity_left: 0
  }];
</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.