47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
import React from "react";
|
|
import FullCalendar from '@fullcalendar/react'
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
|
import interactionPlugin from '@fullcalendar/interaction'
|
|
import {useTranslation} from "react-i18next";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faHandPointer} from "@fortawesome/free-regular-svg-icons";
|
|
|
|
const ServerCalendar = ({series, firstDay, onSelect}) => {
|
|
const {t} = useTranslation();
|
|
|
|
const explainerStyle = {
|
|
position: "absolute",
|
|
top: "0.5rem",
|
|
right: "1rem"
|
|
};
|
|
|
|
return (
|
|
<div id={'server-calendar'}>
|
|
<p style={explainerStyle}><FontAwesomeIcon icon={faHandPointer}/> {t('html.text.clickAndDrag')}</p>
|
|
<FullCalendar
|
|
plugins={[interactionPlugin, dayGridPlugin]}
|
|
timeZone="UTC"
|
|
themeSystem='bootstrap'
|
|
eventColor='#2196F3'
|
|
// dayMaxEventRows={4}
|
|
firstDay={firstDay}
|
|
initialView='dayGridMonth'
|
|
navLinks={true}
|
|
height={800}
|
|
contentHeight={800}
|
|
headerToolbar={{
|
|
left: 'title',
|
|
center: '',
|
|
right: 'dayGridMonth dayGridWeek dayGridDay today prev next'
|
|
}}
|
|
editable={false}
|
|
selectable={Boolean(onSelect)}
|
|
select={onSelect}
|
|
unselectAuto={true}
|
|
events={(_fetchInfo, successCallback) => successCallback(series)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ServerCalendar |