v-col(cols=12)
.text-center
v-btn-toggle.v-col-6.flex-column.flex-sm-row(v-model='type' color='primary' @change='type => change("type", type)')
v-btn(value='normal' label="normal") {{ $t('event.normal') }}
v-btn(value='multidate' label='multidate') {{ $t('event.multidate') }}
v-btn(v-if='settings.allow_recurrent_event' value='recurrent' label="recurrent") {{ $t('event.recurrent') }}
p {{ $t(`event.${type}_description`) }}
v-btn-toggle.v-col-6.flex-column.flex-sm-row(v-if='type === "recurrent"' color='primary' :value='value.recurrent.frequency' @change='fq => change("frequency", fq)')
v-btn(v-for='f in frequencies' :key='f.value' :value='f.value') {{ f.text }}
client-only
.datePicker.mt-3
v-input(:value='fromDate' :rules="[$validators.required('common.when')]")
vc-date-picker(
v-model='fromDate'
:is-range='type === "multidate"'
@input="date => change('date', fromDate)"
:timezone='settings.instance_timezone'
:attributes='attributes'
:locale='$i18n.locale'
:is-dark="settings['theme.is_dark']"
is-inline
is-expanded
:min-date='type !== "recurrent" && new Date()')
div.text-center.mb-2(v-if='type === "recurrent"')
span(v-if='value.recurrent.frequency !== "1m" && value.recurrent.frequency !== "2m"') {{ whenPatterns }}
v-btn-toggle.mt-1.flex-column.flex-sm-row(v-else :value='value.recurrent.type' color='primary' @change='fq => change("recurrentType", fq)')
v-btn(v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key' small) {{ whenPattern.label }}
v-row.mt-3.col-md-6.mx-auto
v-col.col-12.col-sm-6
v-menu(
v-model="menuFromHour"
:close-on-content-click="false"
offset-y
:value="fromHour"
transition="scale-transition")
template(v-slot:activator="{ on, attrs }")
v-text-field(
clearable
:clear-icon='mdiClose'
@click:clear='() => change("fromHour")'
:label="$t('event.from')"
:value="fromHour"
:disabled='!value.from'
readonly
:prepend-icon="mdiClockTimeFourOutline"
:rules="[$validators.required('event.from')]"
v-bind="attrs"
v-on="on")
v-time-picker(
v-if="menuFromHour"
v-model="fromHour"
:allowedMinutes='allowedMinutes'
format='24hr'
@click:minute='menuFromHour = false'
@change='hr => change("fromHour", hr)')
v-col.col-12.col-sm-6
v-menu(
v-model="menuDueHour"
:close-on-content-click="false"
offset-y
:value="dueHour"
transition="scale-transition")
template(v-slot:activator="{ on, attrs }")
v-text-field(
clearable
:clear-icon='mdiClose'
@click:clear='() => change("dueHour")'
:label="$t('event.due')"
:value="dueHour"
:disabled='!fromHour'
readonly
:prepend-icon="mdiClockTimeEightOutline"
v-bind="attrs"
v-on="on")
v-time-picker(
v-if="menuDueHour"
v-model="dueHour"
:allowedMinutes='allowedMinutes'
format='24hr'
@click:minute='menuDueHour = false'
@change='hr => change("dueHour", hr)')
List(v-if='type === "normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')