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 = [
        {
            id: 1,
            date: '2023-11-20',
            time: '',
            data: 'event 1'
        },
        {
            id: 2,
            date: '2023-9-22',
            time: '',
            data: 'event 2'
        },
        {
            id: 3,
            date: '2023-09-12',
            time: '',
            data: 'event 3',
            eventStyles: {
                background: 'rgb(255, 240, 227)'
            }
        },
        {
            id: 4,
            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 itemExist = (arr: any[], date: string) => {
        return arr.some((o) => {
            return o.date == date
        });
    };
 
    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`
                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) => {
                    // open the modal
                    openwin();
 
                    setModalFormData({
                        id: currentData.id,
                        content: currentData.data,
                        date: currentData.date
                    })
                }}
                onModalEditClose={(currentData: any) => {
                    setModalFormData(null);
                }}
                onModalDeleteOpen={(currentData: any) => {
                    setModalFormData({
                        id: currentData.id,
                        content: currentData.data,
                        date: currentData.date
                    })
                }}
                onModalEditEvent={(currentData: any, closewin: any) => {
                    console.log('currentData: ', currentData);
 
                    validate(formRef.current, {
                        success: 'Successfully',
                        empty: 'Do not empty'
                    }, (formData: any) => {
                        console.log('submit: ', formData);
 
 
       
                        // update data
                        const newData = {
                            id: Math.random(),
                            date: formData.post_date,
                            time: '',
                            data: formData.post_title,
                            eventStyles: {
                                background: 'rgb(203, 240, 207)'
                            }
                        };
       
                        setData((prevState: any[]) => {
                            const _data = prevState;
 
                            // delete old item
                            const currentItemIndex = _data.findIndex((o: any) => o.date == formData.post_date);
 
                            if (itemExist(_data, formData.post_date)) {
                                const _oldEventId = _data[currentItemIndex].id;
                                const _oldEventStyles = _data[currentItemIndex].eventStyles;
                                const _oldEventTime = _data[currentItemIndex].time;
 
                                _data.splice(currentItemIndex, 1);
                                newData.id = _oldEventId;
                                newData.eventStyles = _oldEventStyles;
                                newData.time = _oldEventTime;
                            }
 
                            // add new item
                            _data.push(newData);
 
                            // remove Duplicate objects from JSON Array
                            const clean = _data.filter((item, index, self) => index === self.findIndex((t) => (t.date === item.date)));
 
                            return clean;
                        });
 
 
                        // close the modal
                        closewin();
                    });
 
 
                }}
                onModalDeleteEvent={(currentData: any, closewin: any) => {
                    validate(formDeleteRef.current, {
                        success: 'Successfully',
                        empty: 'Do not empty'
                    }, (formData: any) => {
                        console.log('submit: ', formData);
 
                        // delete data
                        setData((prevState) => {
                            const _data = prevState;
                            const currentItemIndex = _data.findIndex((o) => o.id == formData.post_id);
                            if (currentItemIndex >= 0) {
                                _data.splice(currentItemIndex, 1);
                            }
 
                            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'}
                }}
 
            />       
 
                  
        </>
    );
}