myprojectpackageprav
Version:
My package in npm
101 lines • 4.69 kB
JavaScript
import React, { useState } from "react";
import Buttons from "../../components/buttons/buttons";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
export default function Calendar() {
var _a = useState({
events: [],
}), state = _a[0], setState = _a[1];
var calendarComponentRef = React.createRef();
var handleDateClick = function (arg) {
alert(arg.dateStr);
};
var handleSelectedDates = function (info) {
setState({
events: [
{ id: 1, title: "event 1", date: "2019-12-01" },
{
title: "event 2",
start: "2019-12-01",
end: "2019-12-05",
allDay: true,
HostName: "William"
},
{
title: "event 3",
start: "2019-12-05",
end: "2019-12-07",
allDay: true
},
{
title: "event 4",
start: "2019-12-05",
end: "2019-12-07",
allDay: true
},
{
title: "event 5",
start: "2019-12-05",
end: "2019-12-07",
allDay: true
},
{
title: "event 6",
start: "2019-12-05",
end: "2019-12-07",
allDay: true
}
]
});
alert("selected " + info.startStr + " to " + info.endStr);
var title = prompt("What's the name of the title");
console.log(info);
if (title != null) {
var newEvent = {
title: title,
start: info.startStr,
end: info.endStr
};
var data = [state === null || state === void 0 ? void 0 : state.events, newEvent];
setState({ events: data });
console.log("here", data);
}
else {
console.log("nothing");
}
};
var redirecttoHome = function () {
window.location.href = "#";
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "py-2 px-3 whitebg shadow1 d-flex flex-column flex-sm-row align-items-md-center" },
React.createElement("div", { className: "d-flex align-items-center py-1" },
" ",
React.createElement("h2", { tabIndex: 0, className: "poppins-semibold font-18", "aria-label": "Calendar" }, " Calendar")),
React.createElement("div", { className: "ms-auto d-flex align-items-center " },
React.createElement(Buttons, { label: "Back", "aria-label": "Back", icon: "icon-left-arrow me-1", className: 'btn-sm font-14 btn-bgcolor7 whitetext text-nowrap border-radius', onClick: function (e) { return redirecttoHome(); } }))),
React.createElement("div", { className: "container" },
React.createElement("div", { className: "mt-3" },
React.createElement("div", { className: "whitebg border-radius p-3 " },
React.createElement("div", { className: "SettingCalendar" },
React.createElement(FullCalendar, { schedulerLicenseKey: "GPL-My-Project-Is-Open-Source", ref: calendarComponentRef, defaultView: "dayGridMonth", dateClick: handleDateClick, displayEventTime: true, header: {
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
}, selectable: true, plugins: [
dayGridPlugin,
interactionPlugin,
timeGridPlugin,
resourceTimeGridPlugin
], eventClick: function (event) {
console.log(event.event._def.publicId);
}, events: state === null || state === void 0 ? void 0 : state.events, select: handleSelectedDates, eventLimit: 3 })))))));
}
//# sourceMappingURL=calendar.js.map