Event Calendar

import React from "react";
import EventCalendar from 'funda-ui/EventCalendar';
 
// component styles
import 'funda-ui/EventCalendar/index.css';
 
export default () => {
 
    return (
        <>
            
            <EventCalendar />
            <EventCalendar customTodayDate="2023-02-14" />
                  
        </>
    );
}

import React from "react";
import EventCalendar from 'funda-ui/EventCalendar';
 
// component styles
import 'funda-ui/EventCalendar/index.css';
 
export default () => {
 
    return (
        <>
            <EventCalendar 
                langWeek={['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']}
                langMonths={['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']}
                langMonthsFull={['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']}
                langToday="今天"
                ...
            />
                  
        </>
    );
}

import React, { useState, useEffect, useRef } from "react";
import EventCalendar from 'funda-ui/EventCalendar';
import Input from 'funda-ui/Input';
 
// component styles
import 'funda-ui/EventCalendar/index.css';
 
 
/**
 * Serialize form values
 * @param  {Array} types   - An array of field strings.
 * @param {HTMLFormElement} form      - Element
 * @returns Array
 */
function serializeArray(form: HTMLFormElement, types: string[] = ['input', 'textarea', 'select', 'checkbox', 'progress', 'datalist']) {
 
    const objects: any[] = [];
    const fieldsTypes = types;
 
    fieldsTypes.map((item, index) => {
        const fields: any = form.getElementsByTagName(item);
        for (let i = 0; i < fields.length; i++) {
 
            const _name = fields[i].getAttribute("name");
            let _value = fields[i].value;
 
            // if field is Array
            if (_name !== null && _name.match(/(\[.*?\])/gi)) {
                const inputs = form.querySelectorAll("[name='" + _name + "']");
                const _arrFieldValue = [];
                for (let j = 0; j < inputs.length; j++) {
                    const _arrField: any = inputs[j];
                    _arrFieldValue.push(_arrField.value);
                }
 
                _value = _arrFieldValue;
            }
 
 
            //if checkbox or radio
            if (fields[i].type === 'radio' || fields[i].type === 'checkbox') {
                if (fields[i].checked === true) {
                    objects[objects.length] = {
                        name: _name,
                        value: _value
                    };
                }
            } else {
                objects[objects.length] = {
                    name: _name,
                    value: _value
                };
            }
 
 
        }
    });
 
    // remove Duplicate objects from JSON Array
    const clean = objects.filter((item, index, self) => index === self.findIndex((t) => (t.name === item.name)));
 
    return clean;
}
 
/**
 * Object validation
 * @param {String} input
 * @return {boolean}
 */
 
function isEmpty(input: string | any[]) {
    if (Array.isArray(input)) {
        return input.some((str) => !str.replace(/\s/g, '').length === true)
    } else {
        return !input.replace(/\s/g, '').length === true;
    }
}
 
function validate(form: any, lang: any, callback: any) {
 
    const formData: any = {};
    const fieldsData: any = serializeArray(form);
    let fieldsCheck: boolean = true;
    let customFieldsCheck: boolean = true;
 
    // Step 1: everything is ok  
    //-------------
    // required fields
    const emptyFieldsCheck = fieldsData.every((item: any, index: number) => {
 
        if (item.name !== null && item.name !== '') {
            formData[item.name] = item.value;
 
            const _field = form.querySelector('[name="' + item.name + '"]');
            const fieldRequired = _field.getAttribute('required');
            if (fieldRequired !== null && fieldRequired !== 'false') {
                if (item.value === '' || isEmpty(item.value)) {
 
                    const _label = _field.dataset.requiredTitle;
                    window.alert(`${_label}${lang.empty}`);
                    return false;
                }
            }
        }
 
        return true;
    });
 
    //  merged result
    fieldsCheck = [emptyFieldsCheck, customFieldsCheck].every((item: boolean) => {
        return item;
    });
 
 
    // Step 2: everything is ok  
    //-------------
    if (fieldsCheck) {
        callback?.(formData);
    }
}
 
 
export default () => {
    // default data       
    const defaultData = [
        {
            "date": "2023-11-20", "list": [{
                "id": 1,
                "date": "2023-11-20",
                "time": "",
                "data": "<span class=\"text-warning\">event 1 </span>",
                "eventStyles": {
                    "background": "rgb(255, 240, 227)"
                }
            }]
        },
        {
            "date": "2023-09-22", "list": [{
                "id": 2,
                "date": "2023-09-22",
                "time": "",
                "data": "event 2",
            },
            {
                "id": 3,
                "date": "2023-09-22",
                "time": "",
                "data": "event 2_2",
            }]
        },
        {
            "date": "2023-09-12", "list": [{
                "id": 4,
                "date": "2023-09-12",
                "time": "",
                "data": "event 3",
                "eventStyles": {
                    "background": "rgb(255, 240, 227)"
                }
            }]
        },
        {
            "date": "2023-11-24", "list": [{
                "id": 5,
                "date": "2023-11-24",
                "time": "",
                "data": "<del>very long event string</del> here, very long event string here ",
                "eventStyles": {
                    "background": "rgb(203, 228, 240)"
                }
            }]
        }
    ];
    const defaultCustomTodayDate = '2023-11-16';
 
 
    //----
    const LABEL_WIDTH = '100px';
    const formRef = useRef<any>(null);
    const formDeleteRef = useRef<any>(null);
 
    const [data, setData] = useState<any>(null);
    const [updateCalendarData, setUpdateCalendarData] = useState<boolean>(false);
    const [modalFormData, setModalFormData] = useState<any>(null);
    const [modalOpenType, setModalOpenType] = useState<string>(''); // It is used to determine whether it is NEW or EDIT
 
    const updateOrginalData = (orginalData: any[], currentData: any, date: string, queryId: string, upadteData: Record<string, any>) => {
 
        const _perData = orginalData.filter((item: any) => item.date === date);
 
 
        //-------------------------
        // add new item
        //-------------------------
        if (modalOpenType === 'new') {
 
            if (_perData.length === 0) {
 
                // update current row data
                orginalData.push({
                    date: upadteData.date,
                    list: [upadteData]
                });
 
            } else {
 
                if (_perData[0]) {
                    _perData[0].list.push(upadteData);
                }
            }
 
        } else {
            //-------------------------
            // update item
            //-------------------------
            if (_perData[0]) {
                const _items = _perData[0].list;
                const currentItemObj = _items.find((o: any) => o.id == queryId);
 
                if (currentItemObj) {
                    for (let key in upadteData) {
                        currentItemObj[key] = upadteData[key];
                    }
                }
 
 
                // remove Duplicate objects from JSON Array
                const clean = _items.filter((item: any, index: number, self: any[]) => index === self.findIndex((t) => (t.id === item.id)));
 
                // update current row data
                _perData[0].list = clean;
            }
 
        }
    };
 
 
    const deleteTargetData = (orginalData: any[], currentData: any, date: string, queryId: string) => {
 
        const _perData = orginalData.filter((item: any) => item.date === date);
 
        //-------------------------
        // delete old item
        //-------------------------
        if (_perData[0]) {
            const _items = _perData[0].list;
 
            const currentItemIndex = _items.findIndex((o: any) => o.id == queryId);
            if (currentItemIndex >= 0) {
                _items.splice(currentItemIndex, 1);
            }
 
            // update current row data
            _perData[0].list = _items;
        }
    };
 
 
    useEffect(() => {
 
        // update calendar data
        if (!updateCalendarData && defaultData.length > 0) {
            setData(defaultData);
            setUpdateCalendarData(true);
        }
 
    }, [defaultData, defaultCustomTodayDate]);
 
 
    return (
        <>
 
            <EventCalendar
                customTodayDate={defaultCustomTodayDate}
                eventsValue={data}
                modalMaxWidth="850px"
                // cellCloseBtnClassName="d-none" // if hidden delete button, set it to `d-none`
                // cellAddBtnClassName="d-none" // if hidden add button, set it to `d-none`
                modalHeading={<>Settings</>}
                modalCloseBtnClassName={'btn btn-secondary'}
                modalSubmitBtnClassName={'btn btn-primary'}
                modalSubmitDeleteBtnClassName={'btn btn-danger'}
                modalSubmitBtnLabel={<>Confirm</>}
                modalCloseBtnLabel={<>Cancel</>}
                modalSubmitDeleteBtnLabel={<>Delete</>}
                modalDeleteContent={<>
 
                    <div ref={formDeleteRef}>
 
                        <Input
                            tabIndex={-1}
                            wrapperClassName=""
                            type="hidden"
                            value={modalFormData ? modalFormData.id : ''}
                            name="post_id"
                        />
                        Are you sure?（ID: {modalFormData ? modalFormData.id : ''}）
                    </div>
 
 
 
                </>}
                modalContent={<>
 
                    <div ref={formRef}>
 
 
 
                        <div className="row mb-3">
                            <div className="text-end" style={{ width: LABEL_WIDTH }}>
                                Content
                            </div>
                            <div className="col">
                                <Input
 
                                    type="text"
                                    value={modalFormData ? modalFormData.content : ''}
                                    name="post_title"
                                />
                            </div>
                        </div>
                        {/* ///////////// */}
 
 
 
                        <div className="row mb-3">
                            <div className="text-end" style={{ width: LABEL_WIDTH }}>
                                Post Date
                            </div>
                            <div className="col">
                                <Input
 
                                    type="date"
                                    value={modalFormData ? modalFormData.date : ''}
                                    name="post_date"
                                />
                            </div>
                        </div>
                        {/* ///////////// */}
 
 
                    </div>
 
 
                </>}
                onModalEditOpen={(currentData: any, openwin: any, type: 'normal' | 'new') => {
                    setModalOpenType(type);
 
                    // open the modal
                    openwin();
 
                    
                    console.log('onModalEditOpen: ', currentData);
                    setModalFormData({
                        id: currentData.id,
                        content: currentData.data,
                        date: currentData.date
                    })
                }}
                onModalEditClose={(currentData: any) => {
                    setModalFormData(null);
                }}
                onModalDeleteOpen={(currentData: any, openwin: any) => {
                    console.log('onModalDeleteOpen: ', currentData);
 
                    // open the modal
                    openwin();
 
                    setModalFormData({
                        id: currentData.id,
                        content: currentData.data,
                        date: currentData.date
                    })
                }}
                onModalEditEvent={(currentData: any, closewin: any) => {
                    console.log('edit event:currentData: ', currentData);
 
                    validate(formRef.current, {
                        success: 'Successfully',
                        empty: 'Do not empty'
                    }, (formData: any) => {
                        console.log('submit: ', formData);
 
 
 
                        // update data
                        const newData: Record<string, any> = {
                            id: Math.random(),
                            date: formData.post_date,
                            time: '',
                            data: formData.post_title,
                            eventStyles: {
                                background: 'rgb(203, 240, 207)'
                            }
                        };
 
                           
                        setData((prevState: any[]) => {
                            const _data = prevState;
 
                            updateOrginalData(_data, currentData, currentData.date, currentData.id, newData);
 
                            return _data;
                        });
 
 
                        // close the modal
                        closewin();
 
                    });
 
 
                }}
                onModalDeleteEvent={(currentData: any, closewin: any) => {
                    console.log('delete event:currentData: ', currentData);
                    
                    validate(formDeleteRef.current, {
                        success: 'Successfully',
                        empty: 'Do not empty'
                    }, (formData: any) => {
                        console.log('submit: ', formData);
 
                        setData((prevState: any[]) => {
                            const _data = prevState;
                            deleteTargetData(_data, currentData, currentData.date, currentData.id);
                    
                            return _data;
                        });
 
                        //
                        setModalFormData(null);
 
                        // close the modal
                        closewin();
 
                    });
 
 
                }}
                onChangeDate={(e: any, currentData: any) => {
                    console.log(e.currentTarget.dataset.date, e.currentTarget.dataset.week); // 2023-11-22, 2
                    console.log(currentData); // {id: 0, date: '2023-11-22'}  or {id: 1, date: '2023-11-20', time: '', data: 'event 1'}
                }}
                onChangeMonth={(currentData: any) => {
                    console.log(currentData); // {day: '14', month: '03', year: '2024'}
                }}
                onChangeYear={(currentData: any) => {
                    console.log(currentData); // {day: '14', month: '03', year: '2030'}
                }}
                onChangeToday={(currentData: any) => {
                    console.log(currentData); // {day: '26', month: '03', year: '2024'}
                }}
 
            />
 
        </>
    );
}