При обновлении полного календаря берется неверная дата - PullRequest
Новая
       75

При обновлении полного календаря берется неверная дата

0 голосов
/ 07 августа 2020

Это мое add_event. 

def add_event(request):
     title = request.GET.get("title", None)
     start = request.GET.get("start", None)
     end = request.GET.get("end", None)
     event = Events(title=str(title), start=start, end=end)
     event.save()
     data = {}
     return JsonResponse(data)

Дата взята вот так 

2020-08-07T15:00:00
2020-08-07T16:00:00

Однако, когда данные хотят обновить, при попытке распечатать обновленные данные отображается недопустимая дата. дата начала и дата окончания. 

def update(request):
    start_date = request.GET.get("start", None)
    end_date = request.GET.get("end", None)
    title = request.GET.get("title", None)
    id = request.GET.get("id", None)
    event = Events.objects.get(id=id)
    print (start_date)
    print (end_date)
    data = {}
    return JsonResponse(data)

Я не могу обновить полный календарь в настоящее время из-за проблем с форматированием. Кто-нибудь знает, почему обновление не работает должным образом?

мой html выглядит так 

<script>
          $(document).ready(function () {
            $('#calendar').fullCalendar({
        height: 550,
        lang: "ja",
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        // timeZone: 'Asia/Tokyo',
        navLinks: true,
        timeFormat: 'HH:mm',
        events: [
            
                {% for event in events %}
                {
                    title: "{{ event.title}}",
                    start: '{{ event.start|date:"Y-m-d\TH:i:s\Z" }}',
                    end: '{{ event.end|date:"Y-m-d\TH:i:s\Z" }}',
                    id: "{{ event.id}}",
                    allDay: "{{ event.allDay}}",
                },
                {% endfor %}
            
        ],
        displayEventTime: true,
        displayEventEnd: {
            month: true,
            basicWeek: true,
            "default": true
        },
        selectable: true,
        selectHelper: true,
        select: function(start, end, resource) {
            // 日付選択された際のイベント

                // ダイアログタイトル設定
                $("#dialogTitle").text("スケジュール登録");
                // タイトル初期化
                $("#inputTitle").val("");
                // 備考初期化
                $("#inputDescription").val("");
                // ボタン制御
                $("#registButton").show();
                $("#updateButton").hide();
                $("#deleteButton").hide();
    
                // ダイアログ表示
                $('#inputScheduleForm').on('show.bs.modal', function (event) {
                    setTimeout(function(){
                        $('#inputTitle').focus();
                    }, 500);
                }).modal("show");
    
                // 日付ピッカーの設定
                $('#inputYmdFrom').datetimepicker({locale: 'ja', format : 'YYYY年MM月DD日', useCurrent: false });
                $('#inputYmdTo').datetimepicker({locale: 'ja', format : 'YYYY年MM月DD日', useCurrent: false });
                $('.ymdHm').datetimepicker({
                    locale: 'ja',
                    format : 'YYYY年MM月DD日 HH時mm分'
                });
    
                // 開始終了が逆転しないように制御
                $("#inputYmdFrom").on("dp.change", function (e) {
                    $('#inputYmdTo').data("DateTimePicker").minDate(e.date);
                });
                $("#inputYmdTo").on("dp.change", function (e) {
                    $('#inputYmdFrom').data("DateTimePicker").maxDate(e.date);
                });
    
                if (this.name == "month") {
                    $('.ymdHm').hide()
                    $('.ymd').show()
    
                    // 終日チェックボックス
                    $('#allDayCheck').prop("checked", true);
                    // 選択された日付をフォームにセット
                    // FullCalendar の仕様で、終了が翌日の00:00になるため小細工
                    var startYmd = moment(start);
                    var endYmd = moment(end);
                    if (endYmd.diff(startYmd, 'days') > 1) {
                        endYmd = endYmd.add(-1, "days");
                    } else {
                        endYmd = startYmd;
                    }
                    $('#inputYmdFrom').val(startYmd.format("YYYY年MM月DD日"));
                    $('#inputYmdFrom').data("DateTimePicker").date(startYmd.format("YYYY年MM月DD日"));
                    $('#inputYmdTo').val(endYmd.format("YYYY年MM月DD日"));
                    $('#inputYmdTo').data("DateTimePicker").date(endYmd.format("YYYY年MM月DD日"));
                } else {
                    $('.ymdHm').show();
                    $('.ymd').hide();
    
                    // 終日チェックボックス
                    $('#allDayCheck').prop("checked", false);
                    var startYmd = moment(start);
                    var endYmd = moment(end);
                    $('#inputYmdHmFrom').val(startYmd.format("YYYY年MM月DD日 HH時mm分"));
                    $('#inputYmdHmFrom').data("DateTimePicker").date(startYmd.format("YYYY年MM月DD日 HH時mm分"));
                    $('#inputYmdHmTo').val(endYmd.format("YYYY年MM月DD日 HH時mm分"));
                    $('#inputYmdHmTo').data("DateTimePicker").date(endYmd.format("YYYY年MM月DD日 HH時mm分"));
                }
    
            },
        eventClick: function(event) {

        // 予定クリック時のイベント
            $("#dialogTitle").text("スケジュール詳細");

            // スケジュールID設定
            $("#scheduleId").val(event.id);
            // タイトル設定
            $("#inputTitle").val(event.title);

            // ボタン制御
            $("#registButton").hide();
            $("#updateButton").show();
            $("#deleteButton").show();

            // ダイアログ表示
            $('#inputScheduleForm').on('show.bs.modal', function (event) {
                setTimeout(function(){
                    $('#inputTitle').focus();
                }, 500);
            }).modal("show");

            // 日付ピッカーの設定
            $('#inputYmdFrom').datetimepicker({locale: 'ja', format : 'YYYY年MM月DD日', useCurrent: false });
            $('#inputYmdTo').datetimepicker({locale: 'ja', format : 'YYYY年MM月DD日', useCurrent: false });
            $('.ymdHm').datetimepicker({
                locale: 'ja',
                format : 'YYYY年MM月DD日 HH時mm分'
            });

            // 開始終了が逆転しないように制御
            $("#inputYmdFrom").on("dp.change", function (e) {
                $('#inputYmdTo').data("DateTimePicker").minDate(e.date);
            });
            $("#inputYmdTo").on("dp.change", function (e) {
                $('#inputYmdFrom').data("DateTimePicker").maxDate(e.date);
            });

            // 終日チェックボックス
            $('#allDayCheck').prop("checked", true);

            // 選択された日付をフォームにセット
            if (this.name == "month") {
                $('.ymdHm').hide()
                $('.ymd').show()

                // 終日チェックボックス
                $('#allDayCheck').prop("checked", true);
                // 選択された日付をフォームにセット
                // FullCalendar の仕様で、終了が翌日の00:00になるため小細工
                var startYmd = moment(start);
                var endYmd = moment(end);
                if (endYmd.diff(startYmd, 'days') > 1) {
                    endYmd = endYmd.add(-1, "days");
                } else {
                    endYmd = startYmd;
                }
                $('#inputYmdFrom').val(startYmd.format("YYYY年MM月DD日"));
                $('#inputYmdFrom').data("DateTimePicker").date(startYmd.format("YYYY年MM月DD日"));
                $('#inputYmdTo').val(endYmd.format("YYYY年MM月DD日"));
                $('#inputYmdTo').data("DateTimePicker").date(endYmd.format("YYYY年MM月DD日"));
            } else {
                $('.ymdHm').show();
                $('.ymd').hide();

                // 終日チェックボックス
                $('#allDayCheck').prop("checked", false);
                var startYmd = moment(event.start);
                var endYmd = moment(event.end);
                $('#inputYmdHmFrom').val(startYmd.format("YYYY年MM月DD日 HH時mm分"));
                $('#inputYmdHmFrom').data("DateTimePicker").date(startYmd.format("YYYY年MM月DD日 HH時mm分"));
                $('#inputYmdHmTo').val(endYmd.format("YYYY年MM月DD日 HH時mm分"));
                $('#inputYmdHmTo').data("DateTimePicker").date(endYmd.format("YYYY年MM月DD日 HH時mm分"));
            }
        },
    });
         });

         function registSchedule() {

// 開始終了日付の調整
var startYmd = moment(formatNengappi($('#inputYmdFrom').val() + "00時00分00", 1));
var endYmd = moment(formatNengappi($('#inputYmdTo').val() + "00時00分00", 1));
var allDayCheck = $('#allDayCheck').prop("checked");
if (!allDayCheck) {
    startYmd = moment(formatNengappi($('#inputYmdHmFrom').val() + "00", 1));
    endYmd = moment(formatNengappi($('#inputYmdHmTo').val() + "00", 1));
}
if (endYmd.diff(startYmd, 'days') > 0) {
    endYmd = endYmd.add(+1, "days");
}

//非同期でサーバーにリクエストを送信
var EventData = {
        id: $("#scheduleId").val(),
        title: $('#inputTitle').val(),
            // title: event.title,
        start: startYmd.format("YYYY-MM-DDTHH:mm:ss"),
        end: endYmd.format("YYYY-MM-DDTHH:mm:ss"),
        allDay: allDayCheck,
    };
    alert("3!");
sendAjaxRequest("add_event", EventData);
    }

function remove() {

    // リクエストパラメータの設定
    var eventData = {
            id: $("#scheduleId").val(),
        };

    sendAjaxRequest("remove", eventData);
}    

function update() {

    // 開始終了日付の調整
    var startYmd = moment(formatNengappi($('#inputYmdFrom').val() + "00時00分00", 1));
    var endYmd = moment(formatNengappi($('#inputYmdTo').val() + "00時00分00", 1));
    var allDayCheck = $('#allDayCheck').prop("checked");
    if (!allDayCheck) {
        startYmd = moment(formatNengappi($('#inputYmdHmFrom').val(), 1));
        endYmd = moment(formatNengappi($('#inputYmdHmTo').val(), 1));
    }
    if (endYmd.diff(startYmd, 'days') > 0) {
        endYmd = endYmd.add(+1, "days");
    }

    // 非同期でサーバーにリクエストを送信
    var eventData = {

            id: $("#scheduleId").val(),
            title: $('#inputTitle').val(),
            start: startYmd.format("YYYY-MM-DDTHH:mm:ss"),
            end: endYmd.format("YYYY-MM-DDTHH:mm:ss"),
            allDay: allDayCheck,
        };
        alert("flow here!");
    sendAjaxRequest("update", eventData);
}

function sendAjaxRequest(method, EventData) {

var cal = $("#calendar").fullCalendar("getView");
EventData.searchStart = cal.start;
EventData.searchEnd = cal.end;

// 処理名を設定
var methodName = "登録";
if (method == "update") {
    methodName = "更新"
} else if (method == "remove") {
    methodName = "削除"
}

$.ajax({
    url: "/fullcalendar/" + method,
    type: "GET",
    //JSON data -> string
    // data: JSON.stringify(EventData),
    data: {'title': EventData.title, 'start': EventData.start, 'end': EventData.end,'id': EventData.id,'allDay':EventData.allDay},
    // data: EventData,
    dataType: "json",
    success: function(data) {
        // カレンダー再描画
        // $('#calendar').fullCalendar('refetchEvents');
       // $('#calendar').fullCalendar('renderEvents',event) ;

        alert("refetch yes!");
        $('#inputScheduleForm').modal('hide');
        alert("予定を" + methodName + "しました。");
    },
    error: function(data) {
        alert("予定の" + methodName + "に失敗しました。");
    }
});

$('#calendar').fullCalendar('unselect');
}

function allDayCheckClick(element) {
if (element && element.checked) {

    // 日付に変換して設定
    var startYmdHm = formatNengappi($("#inputYmdHmFrom").val() + "00", 1);
    var endYmdHm = formatNengappi($("#inputYmdHmTo").val() + "00", 1);
    var startYmd = moment(startYmdHm);
    var endYmd = moment(endYmdHm);
    $("#inputYmdFrom").val(startYmd.format("YYYY年MM月DD日"));
    $("#inputYmdTo").val(endYmd.format("YYYY年MM月DD日"));

    // 表示切替
    $('.ymdHm').hide();
    $('.ymd').show();

} else {
    // 日時に変換して設定
    var startYmd = formatNengappi($("#inputYmdFrom").val(), 0);
    var endYmd = formatNengappi($("#inputYmdTo").val(), 0);
    var startYmdHm = moment(startYmd + "T" + moment().format("HH") + ":00:00");
    var endYmdHm = moment(startYmd + "T" + moment().format("HH") + ":00:00").add(1, "hours");
    $("#inputYmdHmFrom").val(startYmdHm.format("YYYY年MM月DD日 HH時mm分"));
    $("#inputYmdHmTo").val(endYmdHm.format("YYYY年MM月DD日 HH時mm分"));

    // 表示切替
    $('.ymdHm').show();
    $('.ymd').hide();
}
}

function formatNengappi(nengappi, flg) {
var ret = nengappi.replace("年", "-").replace("月", "-").replace("日", "");
if (flg == 1){
    ret = nengappi.replace("年", "-").replace("月", "-").replace("日", "T").replace("時",":").replace("分",":").replace(" ","");
}
return ret;
}
      </script>
...