Я использую fullcalendar в ng-repeat. Описание проблемы выглядит следующим образом:
- выберите дату начала и дату окончания, нажмите кнопку , нажмите кнопку , будет отображен календарь с отключением всех предыдущих дней и выбранных начала и конца.
- нажмите кнопку Добавить , чтобы добавить новый календарь. с другой датой начала и окончания.
- попробуйте изменить месяц в первом добавленном календаре, вы увидите даты из недавнего календаря 1-й календарь должен показать ранее добавленные даты, не последние во 2-м календаре.
Я хочу отключить календарь дат, но при изменении месяца первый календарь обновляется.
пожалуйста, проверьте код:)
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.test = [];
$scope.test.departures = [{}];
//add
$scope.AddCalendar = function() {
var temp = {};
$scope.test.departures.push(temp);
};
$scope.showCalendar = function(temp_calendar, temp_index) {
console.log(temp_calendar);
if (angular.isDefined(temp_calendar.from_date)) {
$scope.sel_from_date = moment(temp_calendar.from_date).format('YYYY-MM-DD');
}
if (angular.isDefined(temp_calendar.to_date)) {
$scope.sel_to_date = moment(temp_calendar.to_date).format('YYYY-MM-DD');
}
console.log($scope.sel_from_date);
console.log($scope.sel_to_date);
console.log(temp_index);
$scope.new_index = '#calendar_' + temp_index;
$($scope.new_index).fullCalendar({
defaultDate: moment(),
editable: true,
eventLimit: true,
dayRender: function(date, cell) {
$($scope.new_index).fullCalendar('render');
var current_date = moment(date, 'DD.MM.YYYY').format('YYYY-MM-DD');
var maxDate = moment();
if (date < maxDate) {
$(cell).addClass('disabled');
cell.css("background-color", "#808080");
}
if (angular.isDefined($scope.sel_from_date) && $scope.sel_to_date) {
if (current_date < $scope.sel_from_date || current_date > $scope.sel_to_date) {
cell.css("background-color", "#EEEEEE");
}
}
}
});
};
});
.disabled .fc-day-content {
background-color: grey;
color: #FFFFFF;
cursor: default;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl" style="margin-top: 100px;">
<div class="container">
<div class="col-md-6">
<form name="InputForm" ng-submit="onSend(input)">
<div class="form-group" ng-repeat="(temp_index,temp_calendar) in test.departures">
<!-- inputs -->
<div class="form-group col-md-6">
<label>from date</label>
<input class="form-control" type="date" id="from_date_{{temp_index}}" ng-model="temp_calendar.from_date" name="from_date_{{temp_index}}">
</div>
<div class="form-group col-md-6">
<label>to date</label>
<input class="form-control" type="date" id="to_date_{{temp_index}}" ng-model="temp_calendar.to_date" name="to_date_{{temp_index}}">
</div>
<!-- /inputs -->
<button type="button" class="btn btn-primary" ng-click="showCalendar(temp_calendar,temp_index)" data-toggle="collapse" data-target="#demo_{{temp_index}}">Click</button>
<div id="demo_{{temp_index}}" class="collapse">
<div id="calendar_{{temp_index}}" ng-model="temp_calendar.calendar"></div>
</div>
</div>
<div class="form-group pull-right">
<button type="button" class="btn btn-primary" ng-click="AddCalendar()">Add</button>
</div>
<button type="submit" class="btn btn-success">Save</button>
</form>
</div>
</div>
</body>