Vue.js Fullcalendar на дату нажмите - PullRequest
0 голосов
/ 24 октября 2019

Я пытаюсь вернуть значение даты из функции onDateClick в fullCalendar с помощью vue.js и передать данные в реквизит, который затем можно сохранить в моем бэкэнде через laravel. Каждый способ, о котором я могу думать, просто возвращается с различными неопределенными ошибками. Я могу получить модал для всплывающей вставки, он просто никогда не возвращает значение, которое я вижу. Не уверен, как заставить его щелкнуть мышью, чтобы попробовать десятки комбинаций, ничего не работает, вот какой-то код.

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>```

Ответы [ 2 ]

1 голос
/ 25 октября 2019

Ваша функция onDateClick в порядке, и сохранение даты, возвращенной Full Calendar, в this.model должно работать (вы должны добавить console.log на этом этапе, чтобы убедиться, что дата в порядке). Вы должны получить javascript plain Date. Который не отформатирован.

В вашем методе save() вам необходимо преобразовать эту дату в формат, ожидаемый вашим бэкэндом Laravel. Вероятно, «ГГГГ-ММ-ДД ЧЧ: мм». Для этого вы можете использовать moment.js , как предложено @renato, или выполнить форматирование самостоятельно.


В другой заметке, так как я являюсь автором стоит взглянуть на Vue Cal полный календарь Vue.js без каких-либо зависимостей.

Возможно, вы найдете это более подходящим для проекта Vue, ипроще в использовании. Это не оболочка Vue, а полная библиотека Vue.js.

0 голосов
/ 25 октября 2019

момент ("ваша дата"). Формат ('ГГГГ-ММ-ДД')

Этот, если вы хотите отформатировать дату возвращения.

использовать момент.js

https://momentjs.com/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...