Open masiri201 opened 5 years ago
The error happens when i change the text on the events array
Page angular controller
`'use strict'; function CalendarCtrl($scope, $compile, uiCalendarConfig) { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); window.scope = $scope; $scope.changeTo = 'Hungarian'; $scope.eventIndex = 1; /* event source that pulls from google.com */ $scope.eventSource = { url: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic', className: 'gcal-event', // an option! currentTimezone: 'America/Chicago' // an option! }; /* event source that contains custom events on the scope */ $scope.events = []; /* event source that calls a function on every view switch */ $scope.eventsF = function (start, end, timezone, callback) { var s = new Date(start).getTime() / 1000; var e = new Date(end).getTime() / 1000; var m = new Date(start).getMonth(); var events = [{ title: 'Feed Me ' + m, start: s + (50000), end: s + (100000), allDay: false, className: ['customFeed'] }]; callback(events); }; /* event type defines the color and class of that event */ $scope.eventTypes = [ { type: 'Evento', listColor: 'primary', className: 'event-primary' }, { type: 'Padrão', listColor: 'default', className: 'event-default' }, { type: 'Reserva', listColor: 'warning', className: 'event-warning' }, { type: 'Festividade', listColor: 'success', className: 'event-success' }]; $scope.calEventsExt = { color: '#f00', textColor: 'yellow', events: [ { type: 'party', title: 'Lunch', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: false }, { type: 'party', title: 'Lunch 2', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: false }, { type: 'party', title: 'Click for Google', start: new Date(y, m, 28), end: new Date(y, m, 29), url: 'http://google.com/' } ] }; /* alert on eventClick */ $scope.alertOnEventClick = function (date, jsEvent, view) { $scope.alertMessage = (date.title + ' was clicked '); }; /* alert on Drop */ $scope.alertOnDrop = function (event, delta, revertFunc, jsEvent, ui, view) { $scope.alertMessage = ('Event Droped to make dayDelta ' + delta); }; /* alert on Resize */ $scope.alertOnResize = function (event, delta, revertFunc, jsEvent, ui, view) { $scope.alertMessage = ('Event Resized to make dayDelta ' + delta); }; /* add and removes an event source of choice */ $scope.addRemoveEventSource = function (sources, source) { var canAdd = 0; angular.forEach(sources, function (value, key) { if (sources[key] === source) { sources.splice(key, 1); canAdd = 1; } }); if (canAdd === 0) { sources.push(source); } }; /* add custom event*/ $scope.addEvent = function () { var eventType = $('#eventTypeText').val(); var listColor = 'default'; var className = 'event-default'; //define o tipo de evento for (var i = 0; i < $scope.eventTypes.length; i++) { if (eventType == $scope.eventTypes[i].type) { listColor = $scope.eventTypes[i].listColor; className = $scope.eventTypes[i].className; } } $scope.events.push({ id: $scope.eventIndex, title: 'Novo evento', start: new Date(y, m, d), end: new Date(y, m, d), className: [className], listColor: listColor, }); $scope.eventIndex window.console.log($scope.events); }; /* remove event */ $scope.remove = function (index) { //remove o evento dos eventos $scope.events.splice(index, 1); $scope.eventIndex--; angular.element('#myCalendar').fullCalendar('removeEvents'); angular.element('#myCalendar').fullCalendar('addEventSource', $scope.events); }; /* Change View */ $scope.changeView = function (view, calendar) { uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view); }; /* Change View */ $scope.renderCalender = function (calendar) { if (uiCalendarConfig.calendars[calendar]) { uiCalendarConfig.calendars[calendar].fullCalendar('render'); } }; /* Render Tooltip */ $scope.eventRender = function (event, element, view) { element.attr({ 'tooltip': event.title, 'tooltip-append-to-body': false }); $compile(element)($scope); }; /* config object */ $scope.uiConfig = { calendar: { height: 550, editable: true, header: { left: 'title', right: 'month,agendaWeek,agendaDay today prev,next' }, buttonIcons: { prev: ' fa fa-caret-left', next: ' fa fa-caret-right', }, droppable: true, // this allows things to be dropped onto the calendar !!! axisFormat: 'h:mm', columnFormat: { month: 'ddd', // Mon week: 'ddd D', // Mon 7 day: 'dddd M/d', // Monday 9/7 agendaDay: 'dddd D' }, allDaySlot: false, eventClick: $scope.alertOnEventClick, eventDrop: $scope.alertOnDrop, eventResize: $scope.alertOnResize, eventRender: $scope.eventRender, } }; $scope.changeLang = function () { if ($scope.changeTo === 'English') { $scope.uiConfig.calendar.dayNames = ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado']; $scope.uiConfig.calendar.dayNamesShort = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']; $scope.changeTo = 'Portuguese'; } else { $scope.uiConfig.calendar.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; $scope.uiConfig.calendar.dayNamesShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; $scope.changeTo = 'English'; } }; /* event sources array*/ $scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF]; $scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events]; } angular .module('urbanApp') .controller('CalendarCtrl', ['$scope', '$compile', 'uiCalendarConfig', CalendarCtrl]); `
Html doc
<script> var scope; $(function() { $(".dropdown-menu").on('click', 'li a', function() { $("#eventTypeText").text($(this).text()); $("#eventTypeText").val($(this).text()); }); }); </script> <div class="row" ng-controller="CalendarCtrl"> <div class="col-sm-3"> <!-- Butão para adicionar o evento--> <button type="button" class="btn btn-default" data-ng-click="addEvent()"> <span class="fa fa-paint-brush mr5"></span> <span>Adicionar</span> </button> <!-- /Butão para adicionar o evento--> <!-- DropDown para definir o tipo do evento --> <div class="btn-group dropDown" dropdown> <button id="eventTypeButton" type="button" class="btn btn-default dropdown-toggle" dropdown-toggle> <span id="eventTypeText">Padrão</span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="javascript:;">Reserva</a> </li> <li> <a href="javascript:;">Evento</a> </li> <li> <a href="javascript:;">Festividade</a> </li> <li class="divider"></li> <li> <a href="javascript:;">Padrão</a> </li> </ul> </div> <!-- /DropDown para definir o tipo do evento --> <hr> <ul class="external-events"> <li ng-repeat="e in events"> <div class="external-event event-{{e.listColor}}"> <input ng-model="e.title" class="form-control no-border no-bg pl0"> <small>{{e.start | date:"MMM dd"}} - {{e.end | date:"MMM dd"}}</small> <a class="small ml5 remove" ng-click="remove($index)">Remove</a> </div> </li> </ul> </div> <div class="col-sm-9"> <div class="calendar-viewer"> <div ui-calendar="uiConfig.calendar" id="myCalendar" class="fullcalendar" calendar="myCalendar" ng-model="eventSources"></div> </div> </div> </div>
The error happens when i change the text on the events array
Page angular controller
Html doc