myprojectpackageprav
Version:
My package in npm
105 lines • 5.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var buttons_1 = tslib_1.__importDefault(require("../../components/buttons/buttons"));
var react_2 = tslib_1.__importDefault(require("@fullcalendar/react"));
var daygrid_1 = tslib_1.__importDefault(require("@fullcalendar/daygrid"));
var interaction_1 = tslib_1.__importDefault(require("@fullcalendar/interaction"));
var timegrid_1 = tslib_1.__importDefault(require("@fullcalendar/timegrid"));
var resource_timegrid_1 = tslib_1.__importDefault(require("@fullcalendar/resource-timegrid"));
require("@fullcalendar/core/main.css");
require("@fullcalendar/daygrid/main.css");
require("@fullcalendar/core/main.css");
require("@fullcalendar/daygrid/main.css");
function Calendar() {
var _a = (0, react_1.useState)({
events: [],
}), state = _a[0], setState = _a[1];
var calendarComponentRef = react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "py-2 px-3 whitebg shadow1 d-flex flex-column flex-sm-row align-items-md-center" },
react_1.default.createElement("div", { className: "d-flex align-items-center py-1" },
" ",
react_1.default.createElement("h2", { tabIndex: 0, className: "poppins-semibold font-18", "aria-label": "Calendar" }, " Calendar")),
react_1.default.createElement("div", { className: "ms-auto d-flex align-items-center " },
react_1.default.createElement(buttons_1.default, { 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_1.default.createElement("div", { className: "container" },
react_1.default.createElement("div", { className: "mt-3" },
react_1.default.createElement("div", { className: "whitebg border-radius p-3 " },
react_1.default.createElement("div", { className: "SettingCalendar" },
react_1.default.createElement(react_2.default, { 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: [
daygrid_1.default,
interaction_1.default,
timegrid_1.default,
resource_timegrid_1.default
], eventClick: function (event) {
console.log(event.event._def.publicId);
}, events: state === null || state === void 0 ? void 0 : state.events, select: handleSelectedDates, eventLimit: 3 })))))));
}
exports.default = Calendar;
//# sourceMappingURL=calendar.js.map