我创建日历(基于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的模式在日历中添加新事件,并在此日历中显示事件。日历已实现。如何在我的架构上处理理智的模态?