2022-04-29 개발일기 [Django, Fullcalendar]

Django와 Fullcalendar 를 이용한 캘린더 구현중 Django DB와 연동하여 일정 저장 및 구글 API와 충돌방지 성공...!

앞으로는 eventClick 으로 ajax사용하여 Django DB 삭제 진행할 예정..! 데이터만지기 재밌다..!

 

첫일기 열심히 쓰자!

 

개발소스 [script]

<script type="text/javascript">

    var calendar = null;
    $(document).ready(function () {
        var Calendar = FullCalendar.Calendar;
        var Draggable = FullCalendar.Draggable;

        var containerEl = document.getElementById('external-events');
        var calendarEl = document.getElementById('calendar');
        var checkbox = document.getElementById('drop-remove');


        new Draggable(containerEl, {
            itemSelector: '.fc-event',
            eventData: function (eventEl) {
                return {
                    title: eventEl.innerText
                };
            }
        });

        calendar = new Calendar(calendarEl, {
            googleCalendarApiKey: '',
            eventSources: {
                googleCalendarId: 'ko.south_korea#holiday@group.v.calendar.google.com'
            },
            events: {{ test|safe }},
            headerToolbar: {
                left: 'prevYear,prev,next,nextYear today', // 저번달 , 다음달, 오늘
                center: 'title', // 제목
                right: 'dayGridMonth,timeGridWeek,timeGridDay' // 월, 주, 일
            },
            editable: true, //수정 가능 여부
            locale: 'ko',
            height: 650,
            hiddenDays: [0, 6],
            eventColor: '#EE5007',
            timeZone: 'Asia/Seoul',
            droppable: true,
            drop: function (info) {
                if (checkbox.checked) {
                    info.draggedEl.parentNode.removeChild(info.draggedEl);
                } // 항목 삭제 체크박스
            },
            eventClick: function (info) {
                info.jsEvent.stopPropagation();
                info.jsEvent.preventDefault();
                if (confirm("일정 '" + info.event.title + " '삭제하시겠습니까?")) {
                    info.event.remove();

                    console.log(info.event)
                }
                function deleteDate() {
                    $.ajax({
                        url: "{% url 'B2C:etclist' %}",
                        dataType: 'json',
                        method: "DELETE",
                        data: {{ test|safe }},
                        success: function (result) {
                            alert('삭제되었습니다.')
                        }
                    })
                }
            },
        });

        calendar.render();
    });

    function allSave() {
        var allEvent = calendar.getEvents();
        var events = new Array();
        for (var i = 0; i < allEvent.length; i++) {
            var obj = new Object();

            obj.title = allEvent[i]._def.title; //이벤트 명칭
            obj.allday = allEvent[i]._def.allDay; // 하루 종일의 이벤트인지 알려주는 불린 값
            obj.start = allEvent[i]._instance.range.start; // 시작날짜 및 시간
            obj.end = allEvent[i]._instance.range.end; // 마침날짜 및 시간

            events.push(obj); // 오브젝트화
        }
        var jsondata = JSON.stringify(events); // json 형태 변형
        console.log(jsondata)

        test(jsondata);
    }


    function test(jsondata) {
        $.ajax({
            url: "{% url 'B2C:etclist' %}",
            dataType: 'json',
            type: 'POST',
            data: {"alldata": jsondata},
            success: function (result) {
                console.log('ok')
            }
        })
    }

    $(document).on("click",)


</script>

개발소스 [view단]

def etclist(request):
    calendar_list = Calendar.objects.all()
    x = Calendar.objects.all()

    req = request.POST
    if req.get('alldata'):
        print(req.get('alldata'))
        testdata = json.loads(req.get('alldata'))
        for i in testdata:

            try:
                test_set = Calendar()
                test_set.title = i['title']
                test_set.start_data = i['start']
                test_set.end_data = i['end']
                test_set.allday = i['allday']
                test_set.save()
            except:
                pass




    result = []
    for iloc in Calendar.objects.all():
        tgdict = dict()
        tgdict['title'] = iloc.title
        tgdict['start'] = iloc.start_data.date().strftime("%Y-%m-%d")
        tgdict['end'] = iloc.end_data.date().strftime("%Y-%m-%d")
        result.append(tgdict)



    context = {
        'calendar': x,
        'calendar_list': calendar_list,
        'test': result
    }

    return render(request, 'B2C/etclist.html', context)