myprojectpackageprav
Version:
My package in npm
103 lines • 5.02 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");
var Calendar = function () {
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");
}
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "mb-2 d-flex align-items-center bgcolor-primary px-2 py-1 whitetext border-radius1 " },
react_1.default.createElement("div", { className: "d-flex align-items-center py-2" },
react_1.default.createElement("h2", { tabIndex: 0, "aria-label": 'Calendar', className: "font-14 d-flex align-items-center" },
" ",
react_1.default.createElement("span", { className: "icon-calendar font-13 pe-2" }),
" Calendar")),
react_1.default.createElement("div", { className: 'ms-auto' },
react_1.default.createElement(buttons_1.default, { label: "Add Event", className: "btn-xs montserratBold font-12 text-uppercase text-color1 addbtn border-radius px-2", icon: "icon-add font-10 pe-1", type: "button" }))),
react_1.default.createElement("div", { className: "shadow card" },
react_1.default.createElement("div", { className: "card-body " },
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