clone code

src/views/TestView.vue

@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <div>TEST VIEW</div>
+    <q-btn color="primary" label="TEST" @click="testCancel" />
+    <data-table
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+    >
+      <!-- :nornmalData="true" -->
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            {{ col.value }}
+          </q-td>
+        </q-tr>
+      </template>
+    </data-table>
+
+    <FullCalendar
+      ref="fullCalendar"
+      class="demo-app-calendar"
+      :options="calendarOptions"
+    >
+      <template v-slot:eventContent="arg">
+        <b>{{ arg.timeText }}</b>
+        <i>{{ arg.event.title }}</i>
+      </template>
+    </FullCalendar>
+    <!-- publicData เป็นสถานะ "เผยแพร่" ต้องใส่ตลอด(ถ้าไม่ใส่ จะเป็นสถานะ"ยังไม่เผยแพร่") จัดการที่ state child ได้เลย -->
+  </div>
+</template>
+<script setup lang="ts">
+import { defineComponent, ref } from "vue";
+import { useQuasar } from "quasar";
+// import { useCounterStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import allLocales from "@fullcalendar/core/locales-all";
+import listPlugin from "@fullcalendar/list";
+
+const props = defineProps({});
+
+const mixin = useCounterMixin();
+const { success } = mixin;
+const $q = useQuasar();
+const columns = ref<any>([
+  {
+    name: "name",
+    label: "Dessert (100g serving)",
+    align: "left",
+    field: (row: any) => row.name,
+    format: (val: any) => `${val}`,
+    sortable: true,
+  },
+  {
+    name: "calories",
+    align: "center",
+    label: "Calories",
+    field: "calories",
+    sortable: true,
+  },
+  { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
+  { name: "carbs", label: "Carbs (g)", field: "carbs" },
+  { name: "protein", label: "Protein (g)", field: "protein" },
+  { name: "sodium", label: "Sodium (mg)", field: "sodium" },
+  {
+    name: "calcium",
+    label: "Calcium (%)",
+    field: "calcium",
+    sortable: true,
+    sort: (a: any, b: any) => parseInt(a, 10) - parseInt(b, 10),
+  },
+  {
+    name: "iron",
+    label: "Iron (%)",
+    field: "iron",
+    sortable: true,
+    sort: (a: any, b: any) => parseInt(a, 10) - parseInt(b, 10),
+  },
+]);
+
+const rows = ref<any>([
+  {
+    name: "Frozen Yogurt",
+    calories: 159,
+    fat: 6.0,
+    carbs: 24,
+    protein: 4.0,
+    sodium: 87,
+    calcium: "14%",
+    iron: "1%",
+  },
+  {
+    name: "Ice cream sandwich",
+    calories: 237,
+    fat: 9.0,
+    carbs: 37,
+    protein: 4.3,
+    sodium: 129,
+    calcium: "8%",
+    iron: "1%",
+  },
+  {
+    name: "Eclair",
+    calories: 262,
+    fat: 16.0,
+    carbs: 23,
+    protein: 6.0,
+    sodium: 337,
+    calcium: "6%",
+    iron: "7%",
+  },
+  {
+    name: "Cupcake",
+    calories: 305,
+    fat: 3.7,
+    carbs: 67,
+    protein: 4.3,
+    sodium: 413,
+    calcium: "3%",
+    iron: "8%",
+  },
+  {
+    name: "Gingerbread",
+    calories: 356,
+    fat: 16.0,
+    carbs: 49,
+    protein: 3.9,
+    sodium: 327,
+    calcium: "7%",
+    iron: "16%",
+  },
+  {
+    name: "Jelly bean",
+    calories: 375,
+    fat: 0.0,
+    carbs: 94,
+    protein: 0.0,
+    sodium: 50,
+    calcium: "0%",
+    iron: "0%",
+  },
+  {
+    name: "Lollipop",
+    calories: 392,
+    fat: 0.2,
+    carbs: 98,
+    protein: 0,
+    sodium: 38,
+    calcium: "0%",
+    iron: "2%",
+  },
+  {
+    name: "Honeycomb",
+    calories: 408,
+    fat: 3.2,
+    carbs: 87,
+    protein: 6.5,
+    sodium: 562,
+    calcium: "0%",
+    iron: "45%",
+  },
+  {
+    name: "Donut",
+    calories: 452,
+    fat: 25.0,
+    carbs: 51,
+    protein: 4.9,
+    sodium: 326,
+    calcium: "2%",
+    iron: "22%",
+  },
+  {
+    name: "KitKat",
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: "12%",
+    iron: "6%",
+  },
+]);
+const filter = ref<string>("");
+const visibleColumns = ref<String[]>([]);
+["name", "calories", "fat", "carbs", "protein", "sodium", "calcium", "iron"];
+const edit = ref<boolean>(false);
+const calendarOptions = ref<any>({
+  plugins: [
+    dayGridPlugin,
+    timeGridPlugin,
+    interactionPlugin, // needed for dateClick
+  ],
+  headerToolbar: {
+    left: "prev,next today",
+    center: "title",
+    right: "dayGridMonth,timeGridWeek,timeGridDay",
+  },
+  initialView: "dayGridMonth",
+  initialEvents: [
+    {
+      id: 1,
+      title:
+        "All-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day eventAll-day event",
+      start: new Date().toISOString().replace(/T.*$/, ""),
+    },
+    {
+      id: 2,
+      title:
+        "Timed event Timed eventTimed eventTimed eventTimed eventTimed eventTimed eventTimed eventTimed event Timed eventTimed eventTimed eventTimed event",
+      start: new Date().toISOString().replace(/T.*$/, "") + "T12:00:00",
+    },
+  ], // alternatively, use the `events` setting to fetch from a feed
+  editable: true,
+  selectable: true,
+  selectMirror: true,
+  dayMaxEvents: true,
+  weekends: true,
+  // select: this.handleDateSelect,
+  // eventClick: this.handleEventClick,
+  // eventsSet: this.handleEvents
+  /* you can update a remote database when these fire:
+        eventAdd:
+        eventChange:
+        eventRemove:
+        */
+});
+
+const testAdd = () => {
+  //   console.log("test");
+};
+const testCancel = () => {
+  edit.value = false;
+  console.log("testCancel");
+  success($q, "asd");
+};
+</script>
+<style>
+.fc-event {
+  overflow: hidden;
+}
+</style>