reactjs - 在时间段的时间之间反应大日历
问题描述
我用过 React big calendar 的资源调度器,我想知道时隙的中间步骤是否也可以变得透明,但概述仍然存在。
使用此代码:
import React , {useEffect} from "react";
import { useState } from 'react';
import { makeStyles } from "@material-ui/core/styles";
import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";
import 'react-big-calendar/lib/css/react-big-calendar.css'
import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
import moment from 'moment';
import 'moment/locale/nl';
import Firebase from 'firebase';
moment.locale('nl');
const localizer = momentLocalizer(moment);
const newEvents = [];
export default function CalendarDesk() {
const [eventDb, setEventDb] = useState([]);
useEffect(() => {
let ref = Firebase.database().ref('/events');
ref.on('value' , snapshot => {
snapshot.forEach((childSnap) => {
let state = childSnap.val();
console.log(state);
//newEvents.push({title: state.title, id: state.id, resourceId: state.resourceId,start: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourStart,state.minuteStart,state.secondStart),end: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourEnd,state.minuteEnd,state.secondEnd)});
setEventDb(eventDb => [...eventDb,{title: state.title, id: state.id, resourceId: state.resourceId,start: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourStart,state.minuteStart,state.secondStart),end: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourEnd,state.minuteEnd,state.secondEnd)}]);
});
})
console.log(newEvents);
},[] );
const resourceMap = [
{ resourceId: 1, resourceTitle: 'Robin Frissen' },
{ resourceId: 2, resourceTitle: 'Raoul Frissen' },
{ resourceId: 3, resourceTitle: 'Joppe Meijers' },
]
let today = new Date();
let formats ={
timeGutterFormat: (date, culture, localizer) =>
localizer.format(date, 'H:mm', culture),
}
const onSelectEvent = function(pEvent) {
const r = window.confirm("Weet je zeker dat je de afspraak wilt verwijderen?'")
if(r === true){
//const idx = indexOf(pEvent)
console.log(pEvent);
var ref = Firebase.database().ref('events');
ref.orderByChild('id').equalTo(pEvent.id).on('child_added', (snapshot) => {
snapshot.ref.remove()
});
setEventDb(eventDb.filter(item => item.id !== pEvent.id));
}
}
return (
<div>
<Container>
<h3>Agenda</h3>
<Row >
<Col md={12} >
<Calendar
events={eventDb}
localizer={localizer}
defaultView={'day'}
views ={['day', 'work_week']}
timeslots={4}
step={15}
defaultDate={new Date()}
formats={formats}
onSelectEvent = {event => onSelectEvent(event)}
min={new Date(today.getFullYear(),today.getMonth(), today.getDate(), 8)}
max={new Date(today.getFullYear(), today.getMonth(), today.getDate(), 18)}
resources={resourceMap}
resourceIdAccessor="resourceId"
resourceTitleAccessor="resourceTitle"
culture={moment.locale('nl')}
messages={{
today: "Vandaag",
previous: "<",
next: ">",
month: "Maand",
week: "Week",
day: "Dag"
}}
/>
</Col>
</Row>
</Container>
</div>
);
}
我知道->
timeslots={1} step={10}
我可以添加更多的插槽,但这不清楚,因为所有东西都放在彼此相同的大小下。
解决方案
推荐阅读
- flutter - 在颤振上调整 web 的大小
- c# - 如何使用 AWS Bamboo 的 MSBuild 一次构建调试和发布
- database - 如何在 WordPress 中使用 SQL 查询语言中的变量
- mongodb - MongoDB查找包含具有连续匹配值的数组的所有对象
- c++ - 从 NtQueryInformationThread 获取线程名称
- java - ClassCastException:com.nambimobile.widgets.efab.ExpandableFabLayout 无法转换为 Activity onCreate
- amazon-web-services - 如何使用基于 Ruby 中的前缀和多个标签的过滤器更新生命周期配置?
- flutter - 如何在 ListView.builder Flutter 中选择特定的单选按钮并获取其值
- python - Discord.Py / Bot 起初运行良好。现在机器人已经上线,但是当我尝试发出命令时,什么都没有发生,也没有显示任何错误
- javascript - 移动平均线交叉直方图