refactor: migrate frontend datetimepicker

frontend/src/views/Calendar.vue

@@ -1,8 +1,26 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import DateTimePicker, { TabType } from '@/components/DateTimePicker.vue';
+
+// NOTE: This is a temporary test harness for the DateTimePicker.
+// It will be removed when the Calendar page is migrated for real.
+const picker = ref<InstanceType<typeof DateTimePicker>>();
+const testDate = ref<Date>(new Date());
+
+const openPicker = () => {
+  picker.value?.modal(testDate.value, TabType.Minute);
+}
+
+const onConfirm = (d: Date) => {
+  testDate.value = d;
+}
+</script>
 
 <template>
-  <h1>Congratulations</h1>
-  <p>This is calendar.</p>
+  <div class="container" style="margin-top: 1.25rem;">
+    <a class="button is-primary" @click="openPicker">{{ testDate.toLocaleString() }}</a>
+  </div>
+  <DateTimePicker ref="picker" @confirm="onConfirm" />
 </template>
 
 <style scoped></style>