ids-calendar
v0.1.3
Published
[](https://npmjs.com/package/ids-calendar) [](https://npmjs.com/package/ids-calendar)
Downloads
162
Readme
ids-calendar
Install
npm i ids-calendar
Exampe
<div style="height: 90%;padding: 10px;">
<ids-calendar [settings]="conf" (eventClick)="eventClick($event)" (requestClick)="requestClick($event)" (dayClick)="dayClick($event)" (moreEvents)="moreEvents($event)"></ids-calendar>
</div> @ViewChild(IdsCalendarComponent, {static: false}) calendar : IdsCalendarComponent | undefined;
conf : IdsCalendarConfig = {
"dateStart": new Date("2021-03-31T22:00:00.000Z"),
"dateEnd": new Date("2021-04-29T22:00:00.000Z"),
"props": {
"emoji": IdsCalendarEmojiSheet.APPLE,
"multiselect": true,
"defaultValue": "Riposo",
"columnWidth": 200,
"customBackground": [
{
"classes": [
"weekEnd"
],
"dayOfWeek": [
6,
0
]
}
],
"eventClick": false
},
"type": [
{
"id": "Shift",
"priority": 1,
"child": [
{
"id": "Ordinaria",
"style": {
"color": "black",
"background": "#B5EAD7"
}
}
]
},
{
"id": "Abs",
"priority": 0,
"child": [
{
"id": "Allattamento",
"style": {
"color": "black",
"background": "#FFF9AA"
}
}
]
}
],
"employee": [
{
"id": "XXXXXXXXXXXXXX-CCNL20",
"events": [
{
"idType": "Ordinaria",
"start": new Date("2021-04-01T08:00:00.000Z"),
"end": new Date("2021-04-01T12:00:00.000Z"),
"label": "Front Line",
"icons": [
"sw"
]
}
],
"activePeriod": {
"start": new Date("2020-11-09T00:00:00.000Z"),
"end": new Date("2021-09-06T00:00:00.000Z")
},
"attributes": {
"name": "XXXXXX XXXXXXX\nASDASDASDASASDASD",
"ccnl": "CCNL20",
"vincoli": ["book", {emoji: "book", tooltip:"TEST", description:"Descrizione"}]
},
"request": [
{
icon: "req",
start: new Date("2021-04-01T10:00:00"),
end: new Date("2021-04-20T10:00:00"),
other: {
test: "Mio attributo"
}
},
{
icon: "req",
start: new Date("2021-04-01T10:00:00"),
end: new Date("2021-04-02T10:00:00"),
other: {
test: "Mio attributo"
}
}
]
}
],
"columns": [
{
"label": "Operatori",
"attribute": "name",
"type": IdsCalendarColumnType.STRING,
"width": 150,
"block": true,
"filter": true
},
{
"label": "CCNL",
"attribute": "ccnl",
"type": IdsCalendarColumnType.STRING,
"width": 80,
"block": true,
"filter": true
},
{
"label": "Vincoli",
"attribute": "vincoli",
"type": IdsCalendarColumnType.EMOJI,
"width": 90,
"block": true,
"filter": true
}
],
"eventIcons": [
{
"id": "sw",
"type": IdsCalendarColumnType.EMOJI,
"icon": "book",
"tooltip": "Smart Working"
}
],
"requestIcons": [
{
"id": "req",
"type": IdsCalendarColumnType.EMOJI,
"icon": "book",
"tooltip": "Richieste di assenza"
}
]
}
eventClick(event: {id: string, event: EmployeeEvent}){
console.log("------- EVENT CLICK -----");
console.log(event);
//this.addRequest(event.id);
//this.addEvent(event.id, event.event.start!);
console.log("------------------");
}
requestClick(event: {id: string, date: Date, selected: EmployeeRequest[], info: {events: EmployeeEvent[], request: EmployeeRequest[]}}){
console.log("------- REQUEST CLICK -----");
console.log(event);
//this.addEvent(event.id, event.event.start!);
console.log("------------------");
}
dayClick(event: {id: string, date: Date, info: {events: EmployeeEvent[], request: EmployeeRequest[]}}){
console.log("-------- DAY CLICK --------");
console.log(event);
this.calendar.reloadEmployee(
{
id: "IdEmp",
attributes:{
surname: "TEST",
name: [{emoji: ":grinning:", tooltip: "Tooltippo", description: "Description PIPPO"}]
},
activePeriod:{
start: new Date("2021-12-16T12:00:00"),
end: new Date("2021-12-18T12:00:00")
},
events: [
{
idType: "Ord",
start: new Date("2021-12-15T08:00:00"),
end: new Date("2021-12-15T12:00:00"),
label: "Turno 1",
icons: ["sw", "form","sw_img"]
}
],
request:[
{
icon: "req",
start: new Date("2021-12-18T10:00:00"),
end: new Date("2021-12-20T10:00:00"),
other: {
test: "Mio attributo"
}
}
]
}
);
//this.deleteEventsDay(event.id, event.events.key);
//this.deleteEventsPeriod(event.id, event.events.key) ;
console.log("------------------");
}
moreEvents(events: {id: string, events: [Date, EmployeeEvent[]][]}){
console.log("-------- MULTI SELECT --------");
console.log(events);
this.addEvents(events.id);
console.log("------------------");
}
addEvent(idEmp: string, date: Date){
let dS = new Date(date.getTime());
let dE = new Date(dS.getTime());
dE.setDate(dE.getDate() +2);
this.calendar.addEventToEmployee(idEmp,{
idType: "Ordinaria",
allDay: true,
date: dS,
dateEnd: dE,
label: "New ABS"
})
}
addEvents(idEmp: string){
let listNewEvents = [
{
"idType": "Ordinaria",
"start": new Date("2021-04-02T05:45:00.000Z"),
"end": new Date("2021-04-02T11:45:00.000Z"),
"label": "Front Line",
"icons": [
"sw"
]
}
]
this.calendar.addEventsToEmployee(idEmp,listNewEvents);
}
deleteEventsDay(idEmp: string, date: Date){
this.calendar.removeEventsOfADay(idEmp, date, IdsCalendarOperation.REMOVE_ALL);
}
deleteEventsPeriod(idEmp: string, date: Date){
let dE = new Date(date.getTime());
dE.setDate(dE.getDate());
this.calendar.removeEventsOfAPeriod(idEmp, date, dE, IdsCalendarOperation.REMOVE_ONLY_DAY_EVENTS);
}
addRequest(idEmp: string){
let newReq : IdsCalendarRequest = {
icon: "req",
start: new Date("2021-12-18T10:00:00"),
end: new Date("2021-12-20T10:00:00"),
other: {
test: "Mio attributo"
}
};
let map : Map<IdsCalendarBulkOperation, IdsCalendarRequest[]> = new Map<IdsCalendarBulkOperation, IdsCalendarRequest[]>();
map.set(IdsCalendarBulkOperation.ADD, []);
map.get(IdsCalendarBulkOperation.ADD).push(newReq);
// map.set(IdsCalendarBulkOperation.REMOVE, []);
// map.get(IdsCalendarBulkOperation.REMOVE).push(newReq);
this.calendar.bulkOperationsRequest(idEmp, map);
//this.calendar.addRequest(idEmp, newReq);
}
Created by
###Ingegneria dei Sistemi