Vue.js 全日历点击日期

Question

我正在尝试 return 使用 vue.js 来自 fullCalendar 的 onDateClick 函数的日期值，并将数据传递给道具，然后我可以通过 laravel 存储在我的后端.我能想到的每一种方法都会返回各种未定义的错误。我可以获得弹出式插入的模态，只是从来没有 return 我能看到的值。不确定如何将 onclick 设置为 prop 已经尝试了数十种组合这里没有任何工作是一些代码。

import { Table, TableColumn, Select, Option } from 'element-ui';
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import Modal from '@/components/Modal'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import BaseInput from '@/components/Inputs/BaseInput'
import flatPicker from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import DropzoneFileUpload from '@/components/Inputs/DropzoneFileUpload';

const today = new Date();
const y = today.getFullYear();
const m = today.getMonth();
const d = today.getDate();
export default {
  name: 'CalendarForm',
  components: {
    FullCalendar,
    Modal,
    BaseInput,
    flatPicker,
    DropzoneFileUpload,
    [TableColumn.name]: TableColumn,
    [Table.name]: Table,
  },
  data(){
    let yearAndMonth = `${y}-${m + 1}`
    return {
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      formData: new FormData(),
      tableData: [],
      deleteNotice: false,
      deleteId: false,
      canAdd: false,
      canDelete: false,
      events: {
        type: 'POST',
        url: 'calendar/show',
        failure: function(response) {
          console.log(response);
        },
      },
      header: {
        left: 'title',
        center: false,
        right: 'prev, next today',
      },
      showAddModal: false,
      showEditModal: false,
        model: {
          name: null,
          className: 'bg-default',
          description: null,
          start: '',
          end: '',
          files: [],
        },
        eventColors: ['bg-info', 'bg-orange', 'bg-red', 'bg-green', 'bg-default', 'bg-blue', 'bg-purple', 'bg-yellow']
    };
  },
  methods: {
      created() {
         this.init();
      },
      init() {
        window.axios.post('calendar/show')
        .then((response) => {
          this.tableData = response.data.events.data;
          this.canAdd = response.data.can_add;
          this.canDelete = response.data.can_delete;
        });
      },
      calendarApi() {
        return this.$refs.fullCalendar.getApi()
      },
      changeView(viewType) {
        this.defaultView = viewType
        this.calendarApi().changeView(viewType)
      },
      next() {
        this.calendarApi().next()
      },
      prev() {
        this.calendarApi().prev()
      },
      onDateClick({ date }) {
        this.showAddModal = true
        this.model.start = date
        this.model.end = date
      },
      save() {
      this.formData.append('name', this.model.name);
      this.formData.append('date', this.onDateClick(date));
      this.formData.append('description', this.model.description);
      for (var i = 0; i < this.model.files.length; i++) {
        const file = this.model.files[i];
        this.formData.append('files[' + i + ']', file);
      }

      window.axios.post(window.location.origin + '/calendar/store',
        this.formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        })
        .then((response) => {
          this.init();
        }).catch((err) => {
          console.log(err);
        });
    },
    previewFiles(val) {
      this.model.files.push(val);
    },
    confirmDelete(id) {
      this.deleteNotice = true;
      this.deleteId = id;
    },
    handleDelete() {
      window.axios.post('calendar/destroy', { id: this.deleteId })
        .then((response) => {
          this.deleteNotice = false;
          this.deleteId = false;
          this.init();
        });
    },
    },
};
</script>```

Answer 1

moment("your date").format('YYYY-MM-DD')

这个如果你想格式化 return 日期。

使用moment.js

https://momentjs.com/

Answer 2

您的 onDateClick 函数没问题，将 Full Calendar 返回的日期保存到 this.model 应该可以（此时您应该添加一个 console.log 以验证日期是否正确）。您应该收到一个 javascript 普通日期。未格式化。

在您的 save() 方法中，您需要将此日期转换为您的 Laravel 后端期望的格式。大概'YYYY-MM-DD HH:mm'。为此，您可以按照@renato 的建议使用 moment.js，或者自己进行格式化。

On another note, and since I am the author it is worth having a look at Vue Cal a Vue.js full calendar with no dependency.

您可能会发现它更适合 Vue 项目，并且更易于使用。这不是一个完整的 Vue.js 库的 Vue 包装器。

Vue.js 全日历点击日期

Vue.js Fullcalendar on date click

javascript

fullcalendar

vue.js