Дублирование записей в последующие месяцы - PullRequest
Новая
       16

Дублирование записей в последующие месяцы

0 голосов
/ 08 октября 2019

Странный. Публикуйте два календаря школьных зданий в общедоступном Google Cal. Можно щелкнуть месяц за месяцом без ошибок, но когда я скрываю один номер здания и нажимаю на следующий месяц, я получаю повторяющиеся записи, которые продолжают удваиваться, а затем увеличиваться в три раза и продолжать дублироваться при нажатии на месяц. Вот код: 

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

<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fullcalendar.css" rel="stylesheet" />
<link href="css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="shortcut icon">
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="icon">
<script src="js/moment.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.js"></script>
<script>
    var allCals = [
        {
            id: 1,
            name: 'High School',
            url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE@group.calendar.google.com/public/basic',
            color: '#0057b8',
            visible: true
        },{
            id: 2,
            name: 'Middle School',
            url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE@group.calendar.google.com/public/basic',
            color: '#4b4c4c',
            visible: true
        }
    ];

    var gCals = function(){
        var ret = $.grep(allCals, function(a){
            return a.visible === true;
        });
        console.log('called gCals()');
        console.log(ret);       
        return ret;
    }

    $(document).ready(function() {
        //Hide/Show all
        $('#hide-all').click(function(){
            $('.calendar-list button').each(function(){
                $(this).removeClass('btn-calendar-hide');
            });

            $.each(allCals, function(index,value){
                //$('#calendar').fullCalendar('removeEventSource', this);
                this.visible = false;
            });

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

        $('#show-all').click(function(){
            $('.calendar-list button').each(function(){
                $(this).addClass('btn-calendar-hide');
            });
            $('#calendar').fullCalendar('removeEvents');
            $.each(allCals, function(index,value){
                $('#calendar').fullCalendar('addEventSource', allCals[index]);
                this.visible = true;
            });
        });

        //Populate buttons
        $.each( allCals, function( index, value ){
            var tmp = $('<button/>', {
                    type: 'button',
                    class: 'btn btn-block btn-calendar',
                    style: 'background-color: '+value.color,
                    text: value.name,
                    id: 'btn_calendar'+value.id,
                    click: function () {                        
                        if ($(this).hasClass('btn-calendar-hide')){
                            //$('#calendar').fullCalendar('removeEventSource', value);
                            $( this ).removeClass('btn-calendar-hide');
                            value.visible = false;
                        } else {
                            //$('#calendar').fullCalendar('addEventSource', value);
                            $( this ).addClass('btn-calendar-hide');
                            value.visible = true;                           
                        }
                        updateCalendar();
                    }      
                });
            if (value.visible === true){
                tmp.addClass('btn-calendar-hide');
            }
            $('.calendar-list').append(
                tmp
            );
        });

        //Display the calendar
        $('#calendar').fullCalendar({
            googleCalendarApiKey: 'AIzaSyDiJjIhfkuYrKzwrj0GS3wBN1erVcMsJmM',
            eventSources: allCals,
            eventClick: function(event) {
                // opens events in a popup window
                window.open(event.url, 'gcalevent', 'width=700,height=600');
                return false;
            },
            loading: function(bool) {
                $('#loading').toggle(bool);
            },
            header: {
                left: 'month,basicWeek,basicDay',
                center: 'title',
                right: 'today prev,next'
            }
        });

        function updateCalendar(){
            $('#calendar').fullCalendar('removeEvents');
            $.each(allCals, function(index,value){
                if (value.visible === true){
                    $('#calendar').fullCalendar('addEventSource', allCals[index]);
                }
            });
        }

    });

</script>
<style>
a.fc-event:hover, a.fc-event:focus{
    color:#000;
}
#loading {
    display: none;
    position:absolute;
    width:96%;
    padding:10px;
    z-index:999;
    border: solid 1px #f8e166;
    margin:1% 2%;
}
#loading h3 {
    margin:2%;
}
#calendar {
    margin: 20px auto;
}
.btn {
    border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}
.btn-calendar {
    background-image: none;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
    opacity: 0.5;
}
.btn-calendar-hide {
    opacity: 1;
}
.btn:hover, .btn:focus {
    color: #FFFFFF;
    text-decoration: none;
}
@media print {
a[href]:after {
    content: none;
}
}
</style>
</head>
<body>
<div id="loading" class="bg-warning">
  <h3 class="text-center">Loading...</h3>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 hidden-print"> <a href="http://www.woostercityschools.org/hs"><img class="img-responsive center-block" style="margin-top:2em; margin-bottom:2em" src="logo-district.jpg" alt="Wooster City Schools" ></a>
      <div class="calendar-list">
        <h4>Calendars
          <div class="btn-group">
            <button id="show-all" type="button" class="btn btn-xs">Show All</button>
            <button id="hide-all" type="button" class="btn btn-xs">Hide All</button>
          </div>
        </h4>
      </div>
    </div>
    <div class="col-md-10">
      <p class="text-right hidden-print" style="margin-top:2%"><a href="javascript:print();" class="btn btn-info btn-sm"><i class="glyphicon glyphicon-print"></i> Print</a></p>
      <div id="calendar"></div>
    </div>
  </div>
</div>
</body>

</html>

1 Ответ

0 голосов
/ 09 октября 2019

Проблема, с которой вы столкнулись, заключается в том, что вызов $('#calendar').fullCalendar('removeEvents'); удаляет события, видимые в данный момент в календаре, но не удаляет источник этих событий.

Это означает, что когда вы затем продолжаете вызывать $('#calendar').fullCalendar('addEventSource', вы просто добавляете один и тот же источник событий снова и снова. В следующий раз, когда вы нажимаете «следующий» или «предыдущий», чтобы изменить диапазон дат, это вызывает fullCalendar для запроса новых событий для этого диапазона дат из всех доступных источников. Поскольку вы не удалили никаких источников, но продолжали добавлять больше, вы можете увидеть, как это приводит к дублированию событий на дисплее.

В одной части кода вы закомментировали вызов$('#calendar').fullCalendar('removeEventSource' ... но на самом деле это (или множественное число «removeEventSources», где это уместно) должно быть правильным подходом. Если вы удалите источник, он одновременно удалит существующие события, а также не позволит будущим запросам к этому источнику снова добавлять другие события.

...