Appointment Picker Examples

Render custom template

Time

Define your own template containing a custom JavaScript invocation (via a custom button):

templateOuter: frame html template, contains wrapper, title and optional functions; must contain {{innerHtml}} placeholder
templateInner: iterated input html template (optionally wrapped in some list item); must contain {{time}} placeholder and an optional {{disabled}} placeholder

// Create picker reference
var ap = new AppointmentPicker(document.getElementById('time'), {
	interval: 15,
	startTime: 10,
	endTime: 18,
	disabled: ['11:20', '13:30', '14:00', '15:30', '16:45', '17:00'],
	templateInner: '<li class="appo-picker-list-item {{disabled}}"><input type="button" value="{{time}}" {{disabled}}></li>',
	templateOuter: '<div class="your-wrapper"><button class="your-close" onclick="closePicker()">Close</button><span class="your-title">Custom Markup</span><ul class="appo-picker-list">{{innerHtml}}</ul><button class="your-set-time" onclick="setTime('15:00')">Set 15:00</button></div>'
});

function setTime(timeString) {
	ap.setTime(timeString);
}

function closePicker() {
	ap.close();
}