<div class="popup calendar_popup calendar_event" style="display: none;">
	<div class="mask clear" data-bind="visible: dateEdit(), click: onMainPanelClick"></div>
	<div class="mask"></div>
	<div class="popup_panel" data-bind="css: {'show_left_side_panel': isTask(), 'show_side_panel': !isTask() && bAllowAppointments && (guestsEdit() || attendees().length > 0), 'editable': isEditable, 'offset': dateEdit()}">

		<div class="panel_wrap clearfix">
			<div class="left_side_panel fields">
				<div class="fieldset">
					<div class="row name">
						<label class="custom_checkbox round" data-bind="css: {'checked': status}">
							<span class="icon"></span>
							<input type="checkbox" data-bind="checked: status"/>
						</label>
					</div>
				</div>
			</div>

			<div class="side_panel fields">
				<div class="fieldset">
					<div class="row owner">
						<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_HOST'}"></span>:
						<span class="value" data-bind="
							  customTooltip: organizer,
							  text: organizer,
							  visible: organizer() !== '',
							  css: {'recivedAnim': recivedAnim() && organizer() === whomAnimate()}"
						></span>
						<span class="value" data-bind="
							  text: owner,
							  visible: organizer() === '',
							  css: {'recivedAnim': recivedAnim() && owner() === whomAnimate()}"
						></span>
					</div>
					<div class="row attendees" data-bind="foreach: attendees">
						<div class="attender" data-bind="css: {
								'pending': status === 0,
								'accepted': status === 1,
								'declined': status === 2,
								'tentative': status === 3
							 }">
							<span class="control remove" data-bind="visible: $parent.canEditAttendees(), click: $parent.removeGuest.bind($parent), customTooltip: 'COREWEBCLIENT/ACTION_REMOVE'"></span>
							<span class="name" data-bind="css: {'recivedAnim': $parent.recivedAnim() && email === $parent.whomAnimate()}">
								<span class="icon status" data-bind="customTooltip: function () { return $parent.getAttenderTextStatus(status); }"></span>
								<span class="text" data-bind="customTooltip: email, text: name, visible: name !== ''"></span>
								<span class="text" data-bind="text: email, visible: name === ''"></span>
							</span>
						</div>
					</div>
						<div class="row add_attender" data-bind="visible: canEditAttendees(), css: {'focused': guestEmailFocus()}">
						<span class="control add" data-bind="customTooltip: '%MODULENAME%/ACTION_ADD_GUESTS', click: onAddGuestClick"></span>
						<label for="add_attender_input" class="label placeholder" data-i18n="%MODULENAME%/LABEL_EMAIL_OR_NAME" data-bind="i18n: 'text', visible: guestAutocomplete() === ''"></label>
						<input id="add_attender_input" class="value input" spellcheck="false"  type="text" autocomplete="on" data-bind="value: guestAutocomplete, hasfocus: guestEmailFocus, valueUpdate: ['blur', 'afterkeydown', 'input'], autocompleteSimple: {callback: autocompleteCallback.bind($data), dataAccessor: guestAutocompleteItem}" />
					</div>
					<div class="row appointment" data-bind="visible: isAppointmentButtonsVisible">
						<div class="buttons">
							<span class="button button_decision"  data-bind="i18n: {'key': '%MODULENAME%/ACTION_ACCEPT_APPOINTMENT'}, css: {'selected_button': attenderStatus() === Enums.IcalConfigInt.Accepted},
									click: function(){ setAppointmentAction(Enums.IcalConfig.Accepted); }"></span>
							<span class="button button_decision" data-bind="i18n: {'key': '%MODULENAME%/ACTION_TENTATIVE_APPOINTMENT'}, css: {'selected_button': attenderStatus() === Enums.IcalConfigInt.Tentative},
									click: function(){ setAppointmentAction(Enums.IcalConfig.Tentative); }"></span>
							<span class="button button_decision" data-bind="i18n: {'key': '%MODULENAME%/ACTION_DECLINE_APPOINTMENT'}, css: {'selected_button': attenderStatus() === Enums.IcalConfigInt.Declined},
									click: function(){ setAppointmentAction(Enums.IcalConfig.Declined); }"></span>
						</div>
					</div>
				</div>
			</div>

			<div class="main_panel">
				<!--<span class="icon repeat" data-bind="visible: repeatPeriod() !== Enums.CalendarRepeatPeriod.None"></span>-->
				<span class="icon appointment" data-bind="visible: attendees().length !== 0"></span>
				<span class="close" data-bind="click: cancelPopup"></span>
				<span class="popup_heading" data-bind="dropdown: {'control': false}, style: {backgroundColor: calendarColor}, css: {'calendar_selector': calendarsList().length > 1 && selectedCalendarIsEditable()}">
					<span class="current">
						<span data-bind="text: selectedCalendarName, fade: {color: calendarColor}"></span>
					</span>
					<span class="dropdown calendar_dropdown" data-bind="visible: calendarsList().length > 1 && selectedCalendarIsEditable()">
						<span class="dropdown_helper">
							<span class="dropdown_arrow"><span></span></span>
							<span class="dropdown_content" data-bind="foreach: calendarsList()">
								<span class="item" data-bind="visible: $parent.selectedCalendarId() !== id, text: name, style: { backgroundColor: color }, click: function () { $parent.selectedCalendarId(id); }"></span>
							</span>
						</span>
					</span>
				</span>

				<div class="fields">
					<div class="fieldset">
						<div class="row dates" data-bind="visible: withDate() || !isTask(), click: isEditable() ? showDates : '', css: {'editable': isEditable()}">
							<span class="value" data-bind="text: startDate()"></span>,
							<span class="value" data-bind="text: !allDay() ? ', ' : ' '"></span>
							<span class="value" data-bind="text: startTime, visible: !allDay()"></span>
							<span data-bind="visible: allDay() && !isEvOneDay() || !allDay() && (!isEvOneDay() || !isEvOneTime())">&nbsp;&ndash;&nbsp;</span>
							<span class="value" data-bind="text: endDate(), visible: !isEvOneDay()"></span>
							<span class="value" data-bind="text: !allDay() ? ', ' : ' ', visible: !isEvOneDay()"></span>
							<span class="value" data-bind="text: endTime, visible: !allDay() && (!isEvOneDay() || !isEvOneTime())"></span>
						</div>
						<span class="dates close" data-bind="style: {'float': 'none'}, visible: withDate() && isTask() && !rrule(), click: function(){withDate(false);}, customTooltip: '%MODULENAME%/ACTION_REMOVE_DATE'"></span>
						<div class="row dates" data-bind="visible: !withDate() && isTask() , click: function(){withDate(true);}"><a data-bind="i18n: {'key': '%MODULENAME%/ACTION_ADD_DATE'}"></a></div>

						<span data-bind="css: {'repeat': isRepeat()}, customTooltip: '%MODULENAME%/INFO_RECURRING_EVENT'"></span>

						<div class="subforms" data-bind="visible: dateEdit()">
							<div class="dates_form">
								<div class="form_content">
									<div class="row" data-bind="css: {'ampm_time': ampmTimeFormat()}">
										<input class="date input" type="text"  spellcheck="false" readonly="readonly" data-bind="initDom: startDom" />
										<span class="custom_selector" data-bind="visible: !allDay(), customSelect: {'control': false, 'input': true, 'options': timeOptions, value: startTime}">
											<input class="value time input"  spellcheck="false" type="text" data-bind="value: startTime" />
											<span class="dropdown">
												<span class="dropdown_helper">
													<span class="dropdown_arrow"><span></span></span>
													<span class="dropdown_content"></span>
												</span>
											</span>
										</span>
										<input class="date input" type="text" spellcheck="false"  readonly="readonly" data-bind="initDom: endDom" />
										<span class="custom_selector" data-bind="visible: !allDay(), customSelect: {'control': false, 'input': true, 'options': timeOptions, value: endTime}">
											<input class="value time input" spellcheck="false"  type="text" data-bind="value: endTime" />
											<span class="dropdown">
												<span class="dropdown_helper">
													<span class="dropdown_arrow"><span></span></span>
													<span class="dropdown_content"></span>
												</span>
											</span>
										</span>
									</div>

									<div class="row allday">
										<label data-bind="css: {'checked': allDay}" class="custom_checkbox">
											<span class="icon"></span>
											<input type="checkbox" data-bind="checked: allDay" id="allday">
										</label>
										<label for="allday" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ALL_DAY'}"></label>
									</div>

									<div class="repeat_panel" data-bind="visible: allEvents() === Enums.CalendarEditRecurrenceEvent.AllEvents">
										<div class="row" data-bind="visible: true">
											<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_REPEATS'}"></span>
											<select class="value input" data-bind="options: repeatPeriodOptions, optionsText: 'label', optionsValue: 'value', value: repeatPeriod"></select>

											<span class="" data-bind="visible: repeatPeriod() === Enums.CalendarRepeatPeriod.Weekly">
												<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_REPEAT_WEEKLY_ON_DAYS'}"></span>

												<span class="custom_switcher">
													<label data-bind="css: {'checked': weekMO}">
														<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_MON'}"></span>
														<input type="checkbox" data-bind="checked: weekMO" />
													</label>

													<label data-bind="css: {'checked': weekTU}">
														<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_TUE'}"></span>
														<input type="checkbox" data-bind="checked: weekTU" />
													</label>

													<label data-bind="css: {'checked': weekWE}">
														<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_WED'}"></span>
														<input type="checkbox" data-bind="checked: weekWE" />
													</label>

													<label data-bind="css: {'checked': weekTH}">
														<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_THU'}"></span>
														<input type="checkbox" data-bind="checked: weekTH" />
													</label>

													<label data-bind="css: {'checked': weekFR}">
														<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FRI'}"></span>
														<input type="checkbox" data-bind="checked: weekFR" />
													</label>

													<label data-bind="css: {'checked': weekSA}">
														<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SAT'}"></span>
														<input type="checkbox" data-bind="checked: weekSA" />
													</label>

													<label data-bind="css: {'checked': weekSU}">
														<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SUN'}"></span>
														<input type="checkbox" data-bind="checked: weekSU" />
													</label>
												</span>
											</span>

											<span data-bind="visible: repeatPeriod() === Enums.CalendarRepeatPeriod.Monthly && !allDay()">
												<span class="value" data-bind="text: monthlyDayText()"></span>
											</span>

											<span data-bind="visible: repeatPeriod() === Enums.CalendarRepeatPeriod.Yearly && !allDay()">
												<span class="value" data-bind="text: yearlyDayText()"></span>
											</span>

											<span data-bind="css: {'row_weeks': repeatPeriod() === Enums.CalendarRepeatPeriod.Weekly}">
												<label class="custom_radio" data-bind="visible: repeatPeriod() === Enums.CalendarRepeatPeriod.Daily || repeatPeriod() === Enums.CalendarRepeatPeriod.Weekly, css: { 'checked': always() === 1 }">
													<input type="radio" name="always" id="always_repeat" data-bind="checkedValue: 1, checked: always" />
													<span class="icon"></span>
												</label>
												
												<label for="always_repeat" class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_REPEAT_ALWAYS'}, visible: repeatPeriod() === Enums.CalendarRepeatPeriod.Daily || repeatPeriod() === Enums.CalendarRepeatPeriod.Weekly"></label>
												
												<label class="custom_radio" data-bind="visible: repeatPeriod() === Enums.CalendarRepeatPeriod.Daily || repeatPeriod() === Enums.CalendarRepeatPeriod.Weekly, css: { 'checked': always() === 0 }">
													<input type="radio" name="always" id="repeat_until" data-bind="checkedValue: 0, checked: always" />
													<span class="icon"></span>
												</label>

												<label for="repeat_until" class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_REPEAT_UNTIL'}, visible: repeatPeriod() === Enums.CalendarRepeatPeriod.Daily || repeatPeriod() === Enums.CalendarRepeatPeriod.Weekly"></label>
												
												<span data-bind="visible: repeatPeriod() === Enums.CalendarRepeatPeriod.Daily || repeatPeriod() === Enums.CalendarRepeatPeriod.Weekly">
													<input class="date input" spellcheck="false" type="text" readonly="readonly" data-bind="initDom: repeatEndDom, value: repeatEndDate" />
												</span>
											</span>
										</div>
									</div>
								</div>
								<span class="form_arrow"></span>
							</div>
						</div>
					</div>

					<div class="fieldset main">
						<div class="row name" data-bind="css: {'focused': subjectFocus(), 'filled': subject().length > 0}">
							<label for="event_subject" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SUBJECT'}"></label>
							<div class="value scrollable_field" data-bind="customScrollbar: {x: false}">
								<div class="scroll-inner">
									<span class="input" data-bind="text: subject, visible: !isEditable()"></span>
									<textarea id="event_subject" class="input autosize" data-bind="
										style: {'text-decoration': status() && isTask() ? 'line-through' : 'none'},
										autosize: {autosizeTrigger: autosizeTrigger, scrollableHeight: 110}, 
										valueUpdate: 'afterkeydown', onEnter: onSaveClick,
										value: subject, hasfocus: subjectFocus, visible: isEditable()"></textarea>
								</div>
							</div>
						</div>
						<!-- ko template: {data: descriptionView, name: descriptionView.PopupTemplate} --><!-- /ko -->
						<!-- ko template: {data: locationView, name: locationView.PopupTemplate} --><!-- /ko -->
						<!-- ko template: {data: linkPopupEditableView, name: linkPopupEditableView.PopupTemplate} --><!-- /ko -->
						<div class="row private_event" data-bind="visible: allowSetPrivateEvent">
							<label data-bind="css: {'checked': isPrivateEvent}" class="custom_checkbox">
								<span class="icon"></span>
								<input type="checkbox" data-bind="checked: isPrivateEvent" id="isPrivateEvent">
							</label>
							<label for="isPrivateEvent" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PRIVATE_EVENT'}"></label>
						</div>
					</div>
					<div class="alarms_helper" data-bind="foreach: displayedAlarms()">
						<div></div>
					</div>

					<div class="buttons clearfix">
						<div class="subforms">
							<div class="alarm_form" data-bind="visible: displayedAlarms().length > 0 && (withDate() || !isTask())">
								<div class="form_content">
									<div class="alarms" data-bind="foreach: displayedAlarms()">
										<span class="item alarm">
											<span class="link remove" data-bind="i18n: {'key': '%MODULENAME%/ACTION_REMOVE_ALARM'}, visible: $parent.isEditableReminders(), click: function(oItem) {$parent.removeAlarm(oItem);}"></span>
											<!-- ko foreach: $parent.aReminderPhrase -->
												<!-- ko if: $data !== 'REMINDERS' -->
													<span class="part" data-bind="text: $data"></span>
												<!-- /ko -->
												<!-- ko if: $data === 'REMINDERS' -->
													<span class="value" data-bind="text: $parent.text, visible: !$parents[1].isEditableReminders()"></span>
													<span class="custom_selector" data-bind="visible: $parents[1].isEditableReminders(), 
																customSelect: {'control': false, 'options': $parents[1].alarmOptions, value: $parent.alarm}">
														<span class="link value" data-bind="text: $parent.text"></span>
														<span class="dropdown" data-bind="visible: $parents[1].isEditableReminders()">
															<span class="dropdown_helper">
																<span class="dropdown_arrow"><span></span></span>
																<span class="dropdown_content">
																</span>
															</span>
														</span>
													</span>
												<!-- /ko -->
											<!-- /ko -->
										</span>
									</div>
									<span class="link" data-bind="i18n: {'key': '%MODULENAME%/ACTION_NEW_ALARM'}, click: addAlarm, visible: isEditableReminders() && (displayedAlarms().length < 5)"></span>
								</div>
								<span class="form_arrow" data-bind="css: {'arrorw_with_appointmens' : bAllowAppointments}"></span>
							</div>
						</div>

						<div class="additional_buttons" data-bind="visible: !selectedCalendarIsSubscribed()">
							<!-- ko foreach: additionalButtonControllers -->
								<!-- ko template: { name: $data.ViewTemplate, data: $data} --><!-- /ko -->
							<!-- /ko -->
							<span class="item task"  data-bind="
									visible: bAllowTasks && allowConvertEventToTask(),
									css: {'selected' : isTask()}, 
									customTooltip: '%MODULENAME%/LABEL_THIS_IS_A_TASK',
									click: switchTask(!isTask())">
								<span class="icon"></span>
								<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_THIS_IS_A_TASK'}"></span>
							</span>
							<span class="item alarm" data-bind="click: isEditableReminders() ? addFirstAlarm : '', 
									css: {'selected': displayedAlarms().length > 0, 'readonly': !isEditableReminders()},
									customTooltip: '%MODULENAME%/ACTION_ADD_FIRST_ALARM',
									visible: isEditableReminders() && (withDate() || !isTask())">
								<span class="icon"></span>
								<span class="text" data-bind="i18n: {'key': '%MODULENAME%/ACTION_ADD_FIRST_ALARM'}"></span>
							</span>
							<span class="item guests" data-bind="
									visible: isEditable() && bAllowAppointments && !isTask(),
									customTooltip: '%MODULENAME%/ACTION_EDIT_GUESTS',
									click: isEditable() ? showGuests : '',">
								<span class="icon"></span>
								<span class="text" data-bind="i18n: {'key': '%MODULENAME%/ACTION_EDIT_GUESTS'}"></span>
							</span>
						</div>
						<span class="button" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SAVE'}, click: onSaveClick, visible: isEditable() || isEditableReminders()"></span>
						<span class="link remove" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_REMOVE'}, click: onDeleteClick, visible: isEditForm() && canDeleteEvent()"></span>
					</div>

				</div>
			</div>
		</div>

	</div>
	<span class="helper"></span>
</div>

• [F] CalendarItemMenuView.html
  Delete
• [F] CalendarItemView.html
  Delete
• [F] CalendarSettingsFormView.html
  Delete
• [F] CalendarSharePopup.html
  Delete
• [F] CalendarView.html
  Delete
• [F] EditCalendarPopup.html
  Delete
• [F] EditEventPopup.html
  Delete
• [F] EditEventRecurrencePopup.html
  Delete
• [F] GetCalendarLinkPopup.html
  Delete
• [F] IcalAttachmentView.html
  Delete
• [F] ImportCalendarPopup.html
  Delete
• [F] LinkPopupEditableView.html
  Delete
• [F] MobileSyncSettingsView.html
  Delete
• [F] SelectCalendarPopup.html
  Delete
• [F] SimpleEditableView.html
  Delete