ids-calendar v0.0.36

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