<div class="item" data-test-id="calendar-item" data-bind="
	droppable: {valueFunc: function (oEvent, oUi) { $root.dropItem(oEvent, oUi); }},
	dropdown: {'callback': $parent.calendarDropdownToggle, 'trueValue': id, passClick: false},
	style: {backgroundColor: color},
	css: {'inactive': !active(), 'readonly': !isEditable()}">
	<div class="label-container" data-bind="click: $parent.calendarListClick">
		<label class="custom_checkbox" data-bind="css: {'checked': active}">
			<span class="icon"></span>
			<input type="checkbox" data-bind="checked: active" />
		</label>
		<span class="icon public" data-bind="visible: isPublic(), click: function (oItem, eEvent) {$parent.openGetLinkCalendarForm(oItem, eEvent);}"></span>
		<span class="title">
			<span data-bind="text: name() + (isShared() ? ' - ' + owner() : ''), fade: {color: color}"></span>
		</span>
	</div>
	<div class="button-container">
		<span class="control" data-test-id="calendar-item-menu"></span>
	</div>
</div>