如何在我的模式下处理理智的模态

时间:2019-11-13 09:32:45

标签: reactjs fullcalendar sanity

我创建日历(基于fullCalendar的自定义输入插件),并希望使用Sanity的模式来添加新事件,而仅使用日历来显示它。可以嵌入日历,可以,但是如何在架构上处理理智的模式?

详细信息:

schemas/calendar.js:

import Schedule from '../components/Schedule/Schedule'

export default {
  name: 'schedule',
  title: 'Расписание',
  type: 'array',
  of: [
    {
      name: 'event',
      type: 'object',
      title: 'Событие',
      fields: [
        {
          name: 'start',
          title: 'start',
          type: 'datetime',
        },
        {
          name: 'end',
          title: 'end',
          type: 'datetime',
        },
        {
          name: 'title',
          title: 'title',
          type: 'string',
        },
        {
          name: 'allDay',
          title: 'allDay',
          type: 'boolean',
        },
      ]
    }
  ],
  preview: { select: { title: 'title' } },
  inputComponent: Schedule
}

components/Schedule/Schedule

import React from 'react';
import {PatchEvent, set, unset} from 'part:@sanity/form-builder/patch-event'

import FullCalendar from '@fullcalendar/react'
import ruLocale from '@fullcalendar/core/locales/ru';
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction' // needed for dayClick
import rrulePlugin from '@fullcalendar/rrule'

import '../../node_modules/@fullcalendar/core/main.css?raw';
import '../../node_modules/@fullcalendar/daygrid/main.css?raw';
import '../../node_modules/@fullcalendar/timegrid/main.css?raw';
import './Schedule.css';

const createPatchEvent = value => PatchEvent.from(value === '' ? unset() : set(value))

export default class Schedule extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      events: this.props.value || [],
    };
  }

  calendarComponentRef = React.createRef()

  render() {
    const { onChange } = this.props;
    const { events } = this.state;

    return (
      <div>
        <button
          type="button"
          onClick={() => { this.setState({ events: {} }); onChange( createPatchEvent('') ) } }
        >
          Clear
        </button>
        <FullCalendar
          defaultView="dayGridMonth"
          header={{
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
          }}
          plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin, rrulePlugin ]}
          ref={ this.calendarComponentRef }
          events={ events }
          dateClick={ this.handleDateClick }
          locale={ ruLocale }
          timeZone='Europe/Moscow'
          />
      </div>
    )
  }

  handleDateClick = (arg) => {
    const { onChange } = this.props;
    const { events = [] } = this.state;

    if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
      const start = new Date(arg.date);
      const end = new Date(arg.date);
      end.setHours(end.getHours() + 1, 30);

      const newState = [
        ...events,
        {
          title: 'New Event ' + arg.dateStr,
          start: start.toISOString(),
          end: end.toISOString(),
          allDay: false,
        }
      ];

      console.log( 'newState', newState );

      this.setState({ events: newState }, onChange(createPatchEvent(newState)));
    }
  }
}

我的日历基于fullCalendar。我需要使用Sanity的模式在日历中添加新事件,并在此日历中显示事件。日历已实现。如何在我的架构上处理理智的模态?

0 个答案:

没有答案