diff --git a/src/components/shared/forms/Time.vue b/src/components/shared/forms/Time.vue
new file mode 100644
index 0000000..5be933e
--- /dev/null
+++ b/src/components/shared/forms/Time.vue
@@ -0,0 +1,57 @@
+<template>
+    <semantic-form-dropdown v-model="time" :options="timeOptions" @dropdown-selected="selected"></semantic-form-dropdown>
+</template>
+
+<script>
+    /**
+     * Time picker component
+     *
+     * @example ./croud-time.md
+     */
+    export default {
+        name: 'croud-time',
+
+        props: {
+            /**
+             * v-model alias
+             */
+            value: {
+                type: String,
+                required: true,
+            },
+        },
+
+        computed: {
+            time() {
+                return this.value
+            },
+
+            timeOptions() {
+                let value
+                const arr = []
+                for (let i = 0; i < 24; i += 1) {
+                    for (let t = 0; t < 60; t += 15) {
+                        value = `${this.pad(i)}:${this.pad(t)}`
+                        arr.push({
+                            id: value,
+                            name: value,
+                        })
+                    }
+                }
+                arr.push({
+                    id: '23:59',
+                    name: '23:59',
+                })
+                return arr
+            },
+        },
+
+        methods: {
+            pad: value => (value < 10 ? `0${value}` : value),
+
+            selected(val) {
+                this.$emit('input', val)
+            },
+        },
+    }
+</script>
diff --git a/src/components/shared/forms/croud-time.md b/src/components/shared/forms/croud-time.md
new file mode 100644
index 0000000..00fd6c1
--- /dev/null
+++ b/src/components/shared/forms/croud-time.md
@@ -0,0 +1,3 @@
+### Basic usage
+
+    <croud-time v-model="time"/>
diff --git a/src/components/shared/schedule/Editor.vue b/src/components/shared/schedule/Editor.vue
new file mode 100644
index 0000000..8c50216
--- /dev/null
+++ b/src/components/shared/schedule/Editor.vue
@@ -0,0 +1,171 @@
+<template>
+    <div class="ui segment basic">
+
+    <div class="ui two column grid">
+        <div class="ui column">
+            <strong>Date Range</strong>
+        </div>
+        <div class="ui column">
+            <croud-date-range :start.sync="baseSchedule.range.start" :end.sync="baseSchedule.range.end"></croud-date-range>
+        </div>
+        <div class="ui column">
+            <strong>Time</strong>
+        </div>
+        <div class="ui column">
+            <croud-time v-model="baseSchedule.time_of_day" />
+        </div>
+        <div class="ui column">
+            <strong>Occurs</strong>
+        </div>
+        <div class="ui column">
+            <semantic-form-dropdown v-model="baseSchedule.occurance" :options="occuranceOptions"></semantic-form-dropdown>
+        </div>
+    </div>
+
+    <component :is="baseSchedule.occurance" :schedule.sync="baseSchedule" @reset-schedule="scheduleReset"></component>
+
+    <div class="ui basic right aligned segment">
+        <slot name="actions">
+            <button class="ui mini button" @click="cancelSchedule">
+                Cancel
+            </button>
+            <button class="ui mini yellow button" @click="updateSchedule">
+                Set Schedule
+            </button>
+        </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+    import { omit, pick } from 'lodash'
+    import moment from 'moment'
+
+    import Daily from './views/Daily'
+    import Weekly from './views/Weekly'
+    import SameDayEachMonth from './views/SameDayEachMonth'
+    import SameDayEachYear from './views/SameDayEachYear'
+    import SameWeekEachMonth from './views/SameWeekEachMonth'
+    import SameWeekEachYear from './views/SameWeekEachYear'
+
+    /**
+     * New schedule editor
+     *
+     * @example ./croud-schedule-editor.md
+     */
+    export default {
+        name: 'croud-schedule-editor',
+
+        components: {
+            Daily,
+            Weekly,
+            SameDayEachMonth,
+            SameDayEachYear,
+            SameWeekEachMonth,
+            SameWeekEachYear,
+        },
+
+        props: {
+            /**
+             * Pre-populate the schedule object
+             */
+            schedule: {
+                type: Object,
+                default() {
+                    return {}
+                },
+            },
+
+            /**
+             * Timezone value
+             */
+            timezone: {
+                type: String,
+                default: 'Europe/London',
+            },
+        },
+
+        data() {
+            return {
+                resetOmits: ['timezone', 'range', 'time_of_day', 'periodic'],
+                occurances: {
+                    Daily: 'Daily',
+                    Weekly: 'Weekly',
+                    SameDayEachMonth: 'Same day each month',
+                    SameWeekEachMonth: 'Same week each month',
+                    SameDayEachYear: 'Same day each year',
+                    SameWeekEachYear: 'Same week each year',
+                },
+
+                baseSchedule: {
+                    timezone: this.timezone,
+                    occurance: 'Daily',
+                    type: 'periodic',
+                    range: {
+                        start: moment().format('YYYY-MM-DD'),
+                        end: moment().add(3, 'months').endOf('month').format('YYYY-MM-DD'),
+                    },
+                    time_of_day: '09:00',
+                    interval: 1,
+                    period: 'days',
+                    day_of_month: false,
+                    week_of_month: false,
+                    days: {},
+                    months: {},
+                },
+            }
+        },
+
+        computed: {
+            occuranceOptions() {
+                return Object.keys(this.occurances).map(id => ({ id, name: this.occurances[id] }))
+            },
+        },
+
+        methods: {
+            scheduleUpdate(schedule) {
+                this.baseSchedule = schedule
+            },
+
+            scheduleReset(resets) {
+                this.baseSchedule = {
+                    ...pick(this.baseSchedule, this.resetOmits),
+                    ...omit(this.baseSchedule, this.resetOmits),
+                    ...resets,
+                }
+            },
+
+            /**
+             * Cancel changes to the schedule
+             *
+             * @public
+             * @returns void
+             */
+            cancelSchedule() {
+                this.$emit('cancelled', this.baseSchedule)
+                this.baseSchedule = {
+                    ...this.baseSchedule,
+                    ...this.schedule,
+                }
+            },
+
+            /**
+             * Emit update:schedule event
+             *
+             * @public
+             * @returns void
+             */
+            updateSchedule() {
+                this.baseSchedule.timezone = this.timezone
+                this.$emit('update:schedule', this.baseSchedule)
+            },
+        },
+
+        created() {
+            this.baseSchedule = {
+                ...this.baseSchedule,
+                ...this.schedule,
+            }
+        },
+    }
+</script>
diff --git a/src/components/shared/schedule/MonthView.vue b/src/components/shared/schedule/MonthView.vue
new file mode 100644
index 0000000..e1fc9a4
--- /dev/null
+++ b/src/components/shared/schedule/MonthView.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="ui center aligned column">
+        {{ title }}
+        <table class="ui tiny very basic fixed table">
+            <thead>
+                <th v-for="day in dayOptions" class="center aligned" :key="day">{{ day }}</th>
+            </thead>
+
+            <tbody>
+                <tr v-for="week in weeks" :key="week">
+                    <td class="center aligned" v-for="(day, i) in week.days" :key="i">
+                        <span class="ui tiny yellow circular" :class="{label: day.highlight}">{{ day.day }}</span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import moment from 'moment'
+
+    /**
+     * Quick summary view of events in a month
+     *
+     * @example ./month-view.md
+     */
+    export default {
+        name: 'month-view',
+
+        props: {
+
+            /**
+             * ISO string or Moment object of a date in the month
+             */
+            month: {
+                type: [String, Object],
+                default: moment(),
+            },
+
+            /**
+             * Array of dates to highlight
+             */
+            highlight: {
+                type: Array,
+                default: () => [],
+            },
+        },
+
+        computed: {
+            title() {
+                return moment(this.month).format('MMMM')
+            },
+
+            daysInMonth() {
+                return moment(this.month).daysInMonth()
+            },
+
+            firstWeekday() {
+                return moment(this.month).startOf('month').weekday()
+            },
+
+            dayOptions() {
+                return moment.weekdaysMin()
+            },
+
+            weeks() {
+                const month = moment(this.month).month()
+                const startWeek = moment(this.month).startOf('month').week()
+                let endWeek = moment(this.month).endOf('month').week()
+
+                if (endWeek === 1) endWeek = startWeek + 5
+
+                const calendar = []
+                for (let week = startWeek; week <= endWeek; week += 1) {
+                    calendar.push({
+                        week,
+                        days: Array(7).fill(0).map((n, i) => {
+                            const day = moment().week(week).startOf('week').add(n + i, 'day')
+                            if (month !== day.month()) return {}
+                            return {
+                                day: day.format('D'),
+                                highlight: this.highlightDates.indexOf(day.format('D')) !== -1,
+                            }
+                        }),
+                    })
+                }
+
+                return calendar
+            },
+
+            highlightDates() {
+                const month = moment(this.month).month()
+                return this.highlight.filter(d => d.month() === month).map(d => d.format('D'))
+            },
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '../../../resources/sass/variables/_all.scss';
+
+    .ui.table tr td {
+        border-top: none;
+        font-size: $croud-font-size-tiny;
+        padding: 1px;
+        height: auto;
+    }
+
+    .ui.table th {
+        font-size: $croud-font-size-small;
+        height: auto;
+    }
+
+    .ui.table.basic td.highlight {
+        border-radius: 50%;
+    }
+
+    .ui.grid>.column:not(.row) {
+        padding-bottom: 0;
+    }
+</style>
diff --git a/src/components/shared/schedule/SummaryView.vue b/src/components/shared/schedule/SummaryView.vue
new file mode 100644
index 0000000..bbb7321
--- /dev/null
+++ b/src/components/shared/schedule/SummaryView.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="ui four column center aligned grid">
+        <month-view v-for="month in months" :month="month" :highlight="highlight" :key="month"></month-view>
+    </div>
+</template>
+
+<script>
+    import moment from 'moment'
+    import MonthView from './MonthView'
+
+    /**
+     * Show an **at a glance** summary of your schedule
+     *
+     * @example ./summary-view.md
+     */
+    export default {
+        name: 'summary-view',
+
+        components: {
+            MonthView,
+        },
+
+        props: {
+            /**
+             * Date range object with **start** and **end** keys
+             */
+            range: {
+                type: Object,
+                default() {
+                    return {
+                        start: moment().startOf('year'),
+                        end: moment().endOf('year'),
+                    }
+                },
+            },
+
+            /**
+             * Array of dates to highlight
+             */
+            highlight: {
+                type: Array,
+                default() {
+                    return []
+                },
+            },
+        },
+
+        computed: {
+            months() {
+                const months = []
+                const start = moment(this.range.start).startOf('month')
+                while (start.isSameOrBefore(moment(this.range.end))) {
+                    months.push(moment(start).format('YYYY-MM-DD'))
+                    start.add(1, 'months')
+                }
+                return months
+            },
+        },
+    }
+</script>
diff --git a/src/components/shared/schedule/croud-schedule-editor.md b/src/components/shared/schedule/croud-schedule-editor.md
new file mode 100644
index 0000000..8e5ee5b
--- /dev/null
+++ b/src/components/shared/schedule/croud-schedule-editor.md
@@ -0,0 +1,18 @@
+### Basic usage
+
+    <croud-schedule-editor />
+
+### Slots
+You can replace the buttons by using the **actions** slot
+
+    <croud-schedule-editor>
+        <template slot="actions">
+            <button class="ui button">Foo</button>
+            <button class="ui yellow button">Bar</button>
+        </template>
+    </croud-schedule-editor>
+
+### Events
+This component emit's (.sync compatible) **update:schedule** and **cancelled** events
+
+    <croud-schedule-editor @update:schedule="$toasted.show('Schedule Set')" @cancelled="$toasted.error('Cancelled')"/>
diff --git a/src/components/shared/schedule/month-view.md b/src/components/shared/schedule/month-view.md
new file mode 100644
index 0000000..063b4c1
--- /dev/null
+++ b/src/components/shared/schedule/month-view.md
@@ -0,0 +1,5 @@
+### Basic usage
+
+    <div class="ui four column center aligned grid">
+        <month-view :highlight="[today]" />
+    </div>
diff --git a/src/components/shared/schedule/summary-view.md b/src/components/shared/schedule/summary-view.md
new file mode 100644
index 0000000..b93a7e4
--- /dev/null
+++ b/src/components/shared/schedule/summary-view.md
@@ -0,0 +1,6 @@
+### Basic usage
+
+    <summary-view
+        :highlight="[today, today.clone().add(-1, 'months'), today.clone().add(1, 'months')]"
+        :range="{start: today.clone().add(-1, 'months'), end: today.clone().add(1, 'months')}"
+    />
diff --git a/src/components/shared/schedule/views/Daily.vue b/src/components/shared/schedule/views/Daily.vue
new file mode 100644
index 0000000..6bdaf4f
--- /dev/null
+++ b/src/components/shared/schedule/views/Daily.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="ui two column grid">
+        <div class="ui column">
+            <strong>Every</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui right labeled input">
+                <input type="number" v-model="interval" min="1">
+                <div class="ui label">days</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Mixin from './EditorViews'
+
+    export default {
+        mixins: [Mixin],
+
+        data() {
+            return {
+                resets: {
+                    period: 'days',
+                    interval: 1,
+                },
+            }
+        },
+    }
+</script>
diff --git a/src/components/shared/schedule/views/EditorViews.js b/src/components/shared/schedule/views/EditorViews.js
new file mode 100644
index 0000000..ffc6135
--- /dev/null
+++ b/src/components/shared/schedule/views/EditorViews.js
@@ -0,0 +1,133 @@
+import moment from 'moment'
+import { zipWith } from 'lodash'
+
+export default {
+    props: {
+        schedule: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            resets: {},
+
+            periods: [
+                'First',
+                'Second',
+                'Third',
+                'Fourth',
+                'Last',
+            ],
+        }
+    },
+
+    computed: {
+        interval: {
+            get() {
+                return this.schedule.interval
+            },
+            set(val) {
+                this.$emit('update:schedule', {
+                    ...this.schedule,
+                    interval: val,
+                })
+            },
+        },
+
+        dayOfMonth: {
+            get() {
+                return this.schedule.day_of_month
+            },
+            set(val) {
+                this.$emit('update:schedule', {
+                    ...this.schedule,
+                    day_of_month: val,
+                })
+            },
+        },
+
+        weekOfMonth: {
+            get() {
+                return this.schedule.week_of_month
+            },
+            set(val) {
+                this.$emit('update:schedule', {
+                    ...this.schedule,
+                    week_of_month: val,
+                })
+            },
+        },
+
+        days: {
+            get() {
+                return Object.keys(this.schedule.days).filter(day => this.schedule.days[day]).join(',')
+            },
+            set(val) {
+                const days = {}
+
+                val.split(',').forEach((day) => {
+                    days[day.toLowerCase()] = true
+                })
+
+                this.$emit('update:schedule', {
+                    ...this.schedule,
+                    days,
+                })
+            },
+        },
+
+        months: {
+            get() {
+                return Object.keys(this.schedule.months).filter(month => this.schedule.months[month]).join(',')
+            },
+            set(val) {
+                const months = {}
+
+                val.split(',').forEach((month) => {
+                    months[month] = true
+                })
+
+                this.$emit('update:schedule', {
+                    ...this.schedule,
+                    months,
+                })
+            },
+        },
+
+        periodOptions() {
+            const periods = []
+            this.periods.forEach((period) => {
+                periods.push({ id: period.toLowerCase(), name: period })
+            })
+            return periods
+        },
+
+        dayOptions() {
+            return zipWith(moment.weekdaysShort().map(day => day.toLowerCase()), moment.weekdays(), (id, name) => ({ id, name }))
+        },
+
+        monthOptions() {
+            return zipWith(moment.monthsShort().map(month => month.toLowerCase()), moment.months(), (id, name) => ({ id, name }))
+        },
+
+        ordinal() {
+            return moment.localeData().ordinal(this.dayOfMonth).slice(-2)
+        },
+    },
+
+    methods: {
+        load() {
+            this.$emit('reset-schedule', this.resets)
+        },
+    },
+
+    ready() {
+        this.load()
+    },
+
+    mounted() {
+        this.load()
+    },
+}
diff --git a/src/components/shared/schedule/views/SameDayEachMonth.vue b/src/components/shared/schedule/views/SameDayEachMonth.vue
new file mode 100644
index 0000000..62a5a40
--- /dev/null
+++ b/src/components/shared/schedule/views/SameDayEachMonth.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="ui two column grid">
+        <div class="ui column">
+            <strong>Every</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui right labeled input">
+                <input type="number" v-model="interval" min="1">
+                <div class="ui label">months</div>
+            </div>
+        </div>
+        <div class="ui column">
+            <strong>Day</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui right labeled input">
+                <input type="number" v-model="dayOfMonth" min="1" max="31">
+                <div class="ui label">{{ ordinal }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Mixin from './EditorViews'
+
+    export default {
+        mixins: [Mixin],
+
+        data() {
+            return {
+                resets: {
+                    period: 'months',
+                    interval: 1,
+                    day_of_month: 1,
+                },
+            }
+        },
+    }
+</script>
diff --git a/src/components/shared/schedule/views/SameDayEachYear.vue b/src/components/shared/schedule/views/SameDayEachYear.vue
new file mode 100644
index 0000000..4fea7cf
--- /dev/null
+++ b/src/components/shared/schedule/views/SameDayEachYear.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="ui two column grid">
+        <div class="ui column">
+            <strong>On</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui right labeled input">
+                <input type="number" v-model="dayOfMonth" min="1" max="31">
+                <div class="ui label">{{ ordinal }}</div>
+            </div>
+
+            <semantic-form-dropdown v-model="months" :options="monthOptions" placeholder="Month"></semantic-form-dropdown>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Mixin from './EditorViews'
+
+    export default {
+        mixins: [Mixin],
+
+        data() {
+            return {
+                resets: {
+                    period: 'years',
+                    interval: 1,
+                    day_of_month: 1,
+                    months: {
+                        jan: true,
+                    },
+                },
+            }
+        },
+    }
+</script>
diff --git a/src/components/shared/schedule/views/SameWeekEachMonth.vue b/src/components/shared/schedule/views/SameWeekEachMonth.vue
new file mode 100644
index 0000000..e742498
--- /dev/null
+++ b/src/components/shared/schedule/views/SameWeekEachMonth.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="ui two column grid">
+        <div class="ui column">
+            <strong>Every</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui right labeled input">
+                <input type="number" v-model="interval" min="1">
+                <div class="ui label">months</div>
+            </div>
+        </div>
+        <div class="ui column">
+            <strong>On</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui right labeled input">
+                <semantic-form-dropdown v-model="weekOfMonth" :options="periodOptions" placeholder="Period"></semantic-form-dropdown>
+            </div>
+            <div class="ui right labeled input">
+                <semantic-form-dropdown v-model="days" :options="dayOptions" placeholder="Day"></semantic-form-dropdown>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Mixin from './EditorViews'
+
+    export default {
+        mixins: [Mixin],
+
+        data() {
+            return {
+                resets: {
+                    period: 'months',
+                    interval: 1,
+                    week_of_month: 'first',
+                    days: {
+                        mon: true,
+                    },
+                },
+            }
+        },
+    }
+</script>
diff --git a/src/components/shared/schedule/views/SameWeekEachYear.vue b/src/components/shared/schedule/views/SameWeekEachYear.vue
new file mode 100644
index 0000000..8d6b246
--- /dev/null
+++ b/src/components/shared/schedule/views/SameWeekEachYear.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="ui two column grid">
+        <div class="ui column">
+            <strong>On</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui right labeled input">
+                <semantic-form-dropdown v-model="weekOfMonth" :options="periodOptions" placeholder="Period"></semantic-form-dropdown>
+            </div>
+            <div class="ui right labeled input">
+                <semantic-form-dropdown v-model="days" :options="dayOptions" placeholder="Day"></semantic-form-dropdown>
+            </div>
+        </div>
+
+        <div class="ui column">
+            <strong>Month</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui right labeled input">
+                <semantic-form-dropdown v-model="months" :options="monthOptions" placeholder="Month"></semantic-form-dropdown>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Mixin from './EditorViews'
+
+    export default {
+        mixins: [Mixin],
+
+        data() {
+            return {
+                resets: {
+                    period: 'years',
+                    interval: 1,
+                    week_of_month: 'first',
+                    days: {
+                        mon: true,
+                    },
+                    months: {
+                        jan: true,
+                    },
+                },
+            }
+        },
+    }
+</script>
diff --git a/src/components/shared/schedule/views/Weekly.vue b/src/components/shared/schedule/views/Weekly.vue
new file mode 100644
index 0000000..9fb9426
--- /dev/null
+++ b/src/components/shared/schedule/views/Weekly.vue
@@ -0,0 +1,118 @@
+<template>
+    <div class="ui two column grid">
+        <div class="ui column">
+            <strong>Every</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui right labeled input">
+                <input type="number" v-model="interval" min="1">
+                <div class="ui label">weeks</div>
+            </div>
+        </div>
+
+        <div class="ui column">
+            <strong>On</strong>
+        </div>
+        <div class="ui column">
+            <div class="ui mini buttons">
+                <button class="ui button" :class="{basic: !allDays, blue: allDays}" @click="everyday">Everyday</button>
+                <button class="ui button" :class="{basic: !allWeekdays, blue: allWeekdays}" @click="weekdays">Weekdays</button>
+            </div>
+
+            <div>
+                <div class="ui day label" v-for="(active, day) in weekdayDays" :class="{basic: !active}" @click="localDays[day] = !localDays[day]">{{ day }}</div>
+            </div>
+
+            <div>
+                <div class="ui day label" v-for="(active, day) in weekendDays" :class="{basic: !active}" @click="localDays[day] = !localDays[day]">{{ day }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { omit, pick } from 'lodash'
+    import Mixin from './EditorViews'
+
+    export default {
+        mixins: [Mixin],
+
+        data() {
+            return {
+                weekend: ['sat', 'sun'],
+                resets: {
+                    period: 'days',
+                    interval: 1,
+                    days: {
+                        mon: true,
+                        tue: true,
+                        wed: true,
+                        thu: true,
+                        fri: true,
+                        sat: false,
+                        sun: false,
+                    },
+                },
+                localDays: {
+                    mon: true,
+                    tue: true,
+                    wed: true,
+                    thu: true,
+                    fri: true,
+                    sat: false,
+                    sun: false,
+                },
+            }
+        },
+
+        methods: {
+            everyday() {
+                Object.keys(this.localDays).forEach((day) => {
+                    this.localDays[day] = true
+                })
+            },
+
+            weekdays() {
+                Object.keys(this.localDays).forEach((day) => {
+                    this.localDays[day] = this.weekend.indexOf(day) === -1
+                })
+            },
+        },
+
+        computed: {
+            weekdayDays() {
+                return omit(this.localDays, this.weekend)
+            },
+
+            weekendDays() {
+                return pick(this.localDays, this.weekend)
+            },
+
+            allDays() {
+                return Object.keys(this.localDays).every(day => this.localDays[day])
+            },
+            allWeekdays() {
+                return !this.allDays && Object.keys(omit(this.localDays, this.weekend)).every(day => this.localDays[day])
+            },
+        },
+
+        watch: {
+            localDays: {
+                deep: true,
+                handler(val) {
+                    this.$emit('update:schedule', {
+                        ...this.schedule,
+                        days: val,
+                    })
+                },
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    .ui.day.label {
+        margin-top: 5px;
+        text-transform: capitalize;
+    }
+</style>
diff --git a/src/mixins/styleguidist.js b/src/mixins/styleguidist.js
index d58165f..6a4c8d1 100644
--- a/src/mixins/styleguidist.js
+++ b/src/mixins/styleguidist.js
@@ -46,6 +46,7 @@ export default {
             radio: 1,
             cleave: '123456789012345',
             telephone: '01743211176',
+            time: '09:00',
 
             showSchema: false,
             formSchema: [
diff --git a/styleguide.config.js b/styleguide.config.js
index e877c24..6570006 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -23,6 +23,10 @@ module.exports = {
                     name: 'Datatable',
                     components: 'src/components/shared/Datatable.vue',
                 },
+                {
+                    name: 'Schedule',
+                    components: 'src/components/shared/schedule/**/*.vue',
+                },
                 {
                     name: 'Modal',
                     content: 'src/components/shared/semantic/semantic-modal.md',