<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Calendar</title>
    <!-- FullCalendar CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <!-- FullCalendar JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
</head>

<body>

    <!-- カレンダー表示 -->
    <div id="calendar"></div>

    <!-- ボタンをクリックしてイベント追加 -->
    <button id="addEventBtn">Add Event</button>

    <!-- ボタンをクリックして選択されたイベント削除 -->
    <button id="deleteEventBtn">Delete Selected Event</button>

    <!-- ボタンをクリックしてイベント名変更 -->
    <button id="changeEventNameBtn">Change Event Name</button>

    <!-- 日付ジャンプ用のinput -->
    <input type="date" id="jumpToDateInput" />

    <!-- ボタンをクリックしてCSVで予定書き込み -->
    <button id="writeToCSVBtn">Write to CSV</button>

    <!-- ボタンをクリックしてCSVから予定読み込み -->
    <button id="readFromCSVBtn">Read from CSV</button>

    <style>
        #calendar {
            width: 80%;
            margin: 0 auto;
        }

        body {
            font-size: 14px;
        }

        button {
            margin: 5px;
        }

        .fc-event.selected {
            background-color: #c4e3f3 !important;
            border-color: #a8c8d8 !important;
            color: #16527a !important;
        }
    </style>

    <script>
        $(document).ready(function () {
            const calendar = $('#calendar');
            let selectedEventId;

            calendar.fullCalendar({
                editable: true,
                events: [
                    {
                        id: 'event1',
                        title: 'イベント1',
                        start: '2023-01-01',
                        end: '2023-01-03',
                    },
                    // 他のイベントデータをここに追加
                ],
                // その他のオプションをここに追加
                eventClick: function (calEvent) {
                    // イベントクリック時の処理
                    if (selectedEventId !== calEvent.id) {
                        clearSelectedEventHighlight();
                        selectedEventId = calEvent.id;
                        highlightSelectedEvent();
                        console.log('Selected Event:', calEvent);
                    }
                },
                eventRender: function (event, element) {
                    // イベントレンダリング時の処理
                    if (event.id === selectedEventId) {
                        element.addClass('selected');
                    }
                },
            });

            // イベント追加
            $('#addEventBtn').on('click', function () {
                const currentDate = calendar.fullCalendar('getDate');
                const newEvent = {
                    id: 'event' + (calendar.fullCalendar('clientEvents').length + 1),
                    title: '新しいイベント',
                    start: currentDate.format('YYYY-MM-DD'),
                    end: currentDate.format('YYYY-MM-DD'),
                    userId: '1111' // ユーザーIDを追加
                };
                calendar.fullCalendar('renderEvent', newEvent, true);
            });

            // イベント削除
            $('#deleteEventBtn').on('click', function () {
                const selectedEvent = calendar.fullCalendar('clientEvents', function (event) {
                    return event.id === selectedEventId;
                })[0];

                if (selectedEvent) {
                    calendar.fullCalendar('removeEvents', selectedEvent.id);
                    clearSelectedEventHighlight();
                }
            });

            // イベント名変更
            $('#changeEventNameBtn').on('click', function () {
                const selectedEvent = calendar.fullCalendar('clientEvents', function (event) {
                    return event.id === selectedEventId;
                })[0];

                if (selectedEvent) {
                    const newName = prompt('新しいイベント名を入力してください:', selectedEvent.title);
                    if (newName !== null) {
                        selectedEvent.title = newName;
                        calendar.fullCalendar('updateEvent', selectedEvent);
                    }
                }
            });

            // 日付ジャンプ
            $('#jumpToDateInput').on('change', function () {
                const jumpDate = $(this).val();
                if (jumpDate) {
                    calendar.fullCalendar('gotoDate', jumpDate);
                }
            });

            // CSVで予定書き込み
            $('#writeToCSVBtn').on('click', function () {
                const events = calendar.fullCalendar('clientEvents');
                const csvData = convertToCSV(events);

                // ここでCSVデータを書き込む処理を実装
                // 例えば、BlobやFileSaver.jsを使用してダウンロードさせる
                const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);

                link.setAttribute('href', url);
                link.setAttribute('download', 'calendar_data.csv');
                link.style.visibility = 'hidden';

                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });

            // CSVから予定読み込み
            $('#readFromCSVBtn').on('click', function () {
                // ファイル選択用のinputを作成
                const input = $('<input type="file">');
                input.on('change', function (e) {
                    const file = e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function (event) {
                            const csvData = event.target.result;
                            const events = convertFromCSV(csvData);
                            calendar.fullCalendar('removeEvents');
                            calendar.fullCalendar('renderEvents', events, true);
                        };
                        reader.readAsText(file);
                    }
                });
                input.click();
            });

            // イベントを選択時にハイライト
            function highlightSelectedEvent() {
                calendar.find('.fc-event[data-id="' + selectedEventId + '"]').addClass('selected');
            }

            // 選択中のイベントのハイライトをクリア
            function clearSelectedEventHighlight() {
                calendar.find('.fc-event').removeClass('selected');
                selectedEventId = null;
            }

            // CSV変換関数
            function convertToCSV(events) {
                const headers = ['ID', 'Title', 'Start', 'End', 'UserId'];
                const csvRows = [];

                csvRows.push(headers.join(','));

                events.forEach(event => {
                    const row = [
                        event.id,
                        event.title,
                        moment(event.start).format('YYYY-MM-DD'),
                        moment(event.end).format('YYYY-MM-DD'),
                        event.userId || '', // ユーザーIDを追加
                    ];
                    csvRows.push(row.join(','));
                });

                return csvRows.join('\n');
            }

            // CSVからデータを変換
            function convertFromCSV(csvData) {
                const rows = csvData.split('\n');
                const events = [];

                for (let i = 1; i < rows.length; i++) {
                    const cols = rows[i].split(',');
                    if (cols.length === 4 || cols.length === 5) {
                        const event = {
                            id: cols[0],
                            title: cols[1],
                            start: cols[2],
                            end: cols[3],
                            userId: cols[4] || '', // ユーザーIDを追加
                        };
                        events.push(event);
                    }
                }

                return events;
            }
        });
    </script>

</body>

</html>
