event_modal.html 이벤트 모달에 대한 내용 정의

입력폼에 내용을 입력했을 때

0. 사용자가 달력에서 특정 날짜를 선택하면, jQuery의 select 함수가 호출되어 모달 창을 띄움

1. event_modal.html에 입력값이 들어옴

2. 사용자가 '저장' 버튼을 클릭하면, 입력된 데이터가 AJAX를 통해 서버의 /add_event 경로로 비동기식으로 전송됨

3. $.ajax 함수는 서버로 title, start, end, f_category 데이터를 전송합니다. 이는 서버의 add_event 뷰로 전달

4. 'add_event' 뷰에서는 전달받은 데이터를 바탕으로 새로운 Events 객체를 생성하고 데이터베이스에 저장

5. 저장된 이벤트의 ID와 함께 JSON 응답을 클라이언트로 반환

6. AJAX 요청이 성공적으로 처리되면, FullCalendar가 업데이트되고 사용자에게 알림이 표시

<script>
   $(document).ready(function () {
       var calendar = $('#calendar').fullCalendar({
           header: {
               left: 'prev,next today',
               center: 'title',
               right: 'month,listMonth'
           },
           events: '/all_events',
           selectable: true,
           selectHelper: true,
           editable: true,
           eventLimit: true,
       // 날짜를 선택할 때
       select: function (start, end, allDay) {
            var foodName = "";
            var startDate = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
            var endDate = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");

            // 모달 대화 상자 열기
            $("#event-food").val("");
            $("#event-start").val(startDate);
            $("#event-end").val(endDate);
            var category = $("#category").val(); // 카테고리


            $("#event-dialog").dialog({
                title: '이벤트 정보 입력',
                buttons: {
                    '저장': function () {
                        foodName = $("#event-food").val();
                        startDate = $("#event-start").val();
                        endDate = $("#event-end").val();
                        var category = $("#category").val(); // 선택한 카테고리 값 가져오기

                        // 서버로 이벤트 데이터 전송
                        $.ajax({
                            type: "GET",
                            url: '/add_event',
                            data: {'title': foodName, 'start': startDate, 'end': endDate, 'f_category': category}, // 카테고리 정보 추가
                            dataType: "json",
                            success: function (data) {
                                calendar.fullCalendar('refetchEvents');
                                alert("이벤트 등록 완료!");
                                $("#event-dialog").dialog('close');
                            },
                            error: function (data) {
                                alert('문제가 발생하였습니다');
                            }
                        });
                    },
                    '취소': function () {
                        $("#event-dialog").dialog('close');
                    }
                },

파일 구조

prj 폴더 django_calender_prj

하위 앱 폴더
accounts (로그인/로그아웃/회원가입 처리)
calender (음식정보, 마감일, 관리)
community (커뮤니티 기능 구현)