‍

In this resource:

1. Why Count down
2. How to

‍

1. Why Count down

• To show participants count down of your event start or any individual end/start of your event.

‍

2. How to

‍

Add block

Create a block of the type count down. Choose your date/time/timezone. We will automatically adjust for timezones and clients who have a miss aligned clocks.

‍

Choose the background style. Blur (default), light or dark.

‍

We will attempt to adjust the size of the countdown depending on the available width for the block. We use the classes large, medium and small. Note, this is automatic and you dont have to do anything. The size will change if the client resize their browser size.
There is also a special size, tiny, for when placed in a container with a maximum height of 50px.

‍

Choose if you want all four aspects of the countdown to be displayed, Days, Hours, Minutes and Seconds.The labels support translation.

‍

Also feel free to add any custom classes to your Countdown in order to adjust the look and feel.

‍

Once a block based count down has counted down to zero. The clock will stop (at 0) and remain in that fashion until you change the slot.

‍

Stream (to be released)

Similar to the count down block but initiated from a stream block

‍

Advanced

Add a code block and in the JS section initiate a CountDown object by:

PClient.instance.countDown(options);

Where options is an object that need a minimum of the following:

const options = {
	appendTo: '.targetElement',
	endDate: '2021-10-28T13:44:11.854Z',
};

the target element can be added with the HTML section of the code block or you simply target an existing element in the DOM

‍

Available options:

PClient.instance.countDown({appendTo: '.head', hide: true, style:'dark'})

‍

appendTo

‍A search string (css-search-like) indicating which element to which you wish to append the count down

‍

endDate

‍A ISOString date. ISO string dates are always provided in UTC (Zulu) indicated by z at the end.You can convert a Javascript Date object to ISOString by using the .toISOString() function.

new Date('2021-10-28T13:44:11').toISOString();

‍

day

‍Optional integer (number) value that will remove the day box if set to 0

‍

hour

‍Optional integer (number) value that will remove the hour box if set to 0

‍

minute

‍Optional integer (number) value that will remove the minute box if set to 0

‍

second

‍Optional integer (number) value that will remove the second box if set to 0

‍

overlay

‍if set to true the count down will be placed on top of the appendTo targetthe count down will try to position itself center of the element it is overlaying

‍

hide

‍if set to true, the count down object will be removed once the time reaches zero. It will otherwise remain visible with zero values.

‍

unhide

‍can only be used in combination with hide and does not support overlay (since hide removes the underlying element overlay would not work).If set to true, the countdown will remove the "appendTo" element and place it self in the same place. Once the time reaches zero it will transition away and fade back in the original element(s)

‍

Very Advanced

You can also take further control of the experience by adding the react element directly to your code. The main reason for this would be to get better control over the onEnd function.

Note that root is needed in order to calculate with and height

ReactDOM.render(
	(
		<CountDown
			targetTime={endDate}
			timeDiff={this.timeDiff}
			day={day}
			hour={hour}
			root={$(appendTo).get(0)}
			minute={minute}
			second={second}
			style={style}
			onEnd={() => {
				//what should happen when we reach zero
			}}
		/>
	),
	$(appendTo).get(0),
	()=> {
		//callback
	}
);