# fullcalendar events with ajax
###### tags: `#work`

## keyword: [ajax 同步 & 非同步](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/274560/)

## bug: 日曆未顯示資料
> calendar.render() 執行時 event 是空list
> calendar.render() 結束後 event 才有資料


## code: old

    //FullCalendar
    document.addEventListener('DOMContentLoaded', function() {
        var event = [];
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prevYear,prev,next,nextYear today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,dayGridDay'
            },
            //initialDate: '2022-08-01T09:00',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            dayMaxEvents: true, // allow "more" link when too many events
            events: function(start, end, callback) {
                $.ajax({
                    url: 'api/Selectionperiod',
                    type: 'POST',
                    dataType: "json",
                    data: JSON.stringify(obj),
                    contentType: 'application/json',
                    success: function(result) {
                        var obj1 = result;
                        $.each(obj1, function(index, value) {
                            event.push({
                                //html: true,
                                title: value['class_name'],
                                start: value['class_day']
                            });
                        });
                        callback(event);
                        console.log("event:", event);
                    },
                    error: function(e, x, y) {
                        console.log(e);
                        console.log(x);
                        console.log(y);
                    }
                });
                return event
            }
        });
        console.log("event:", event);
        console.log("calendar.render()");
        calendar.render();
    });

## code: new

    let event = []; // 空list
    // ajax 從資料庫獲取資料
    async function post_api() {
        const url = 'api/Selectionperiod';
        const response = await fetch(url, {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            method: "POST",
            body: JSON.stringify(obj),
        })
        const res = await response.json();
        // ajax 結果新增到 event
        res.map(value => {
            // console.log(value);
            event.push({
                title: value['class_name'],
                start: value['class_day']
            })
        })
    }

    //FullCalendar
    document.addEventListener('DOMContentLoaded', async function() {
        await post_api()
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prevYear,prev,next,nextYear today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,dayGridDay'
            },
            //initialDate: '2022-08-01T09:00',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            dayMaxEvents: true, // allow "more" link when too many events
            events: event
        });
        console.log(event);
        console.log("render");
        calendar.render();
    });