We Keep Coding

Click button in Full Calendar popover is not working

I've created a click button on popover of events in FullCalendar to perform some xyz action . But the function ("detailcheck") created is not working . It would be helpfull If someone can guide me through the issue in below mentioned code snippet?
Full Calendar Popup
$scope.uiConfig = {
calendar: {
name : 'calender1',
height: 600,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventMouseover: function () { $scope.checked = true; },
eventMouseout: function () { $scope.checked = false; },
eventDrop: $scope.alertOnDrop,
//eventResize: $scope.alertOnResize,
eventRender: function (event, element) {
var chk = $(event.target).css('display', 'block');
element.popover({
trigger: "click",
html: true,
animation: true,
content: '<div ng-show="checked"><button class="btn btn-danger pop" ng-click="detailcheck(event)">abc</button><b>Inicio</b>:' + event.start + "<b>Fin</b>:" + event.end + "</div>",
})
},
firstDay: 1,
viewRender : function (view, element) {
$scope.calendarrangestart = view.start._d;
$scope.calendarrangeend = view.end._d;
}
}
};
$scope.eventSources = [$scope.events];
$scope.detailcheck = function (event) {
console.log("hi");
}

###Fixed the issue ,not an angular solution but applying a bit jquery resolved my issue ###
{ calendar: {
name : 'calender1',
height: 600,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventMouseover: function () { $scope.checked = true; },
eventMouseout: function () { $scope.checked = false; },
eventDrop: $scope.alertOnDrop,
//eventResize: $scope.alertOnResize,
eventRender: function (event, element) {
var chk = $(event.target).css('display', 'block');
element.popover({
trigger: "click",
html: true,
animation: true,
content: '<div ng-show="checked"><button id="object_" class="btn btn-danger pop">abc</button><b>Inicio</b>:' + event.start + "<b>Fin</b>:" + event.end + "</div>",
});
$('.fc-content-skeleton').on('click', '#object_', function () {
$scope.scop = true;
console.log("abcs");
console.log($scope.scop);
});
},
firstDay: 1,
viewRender : function (view, element) {
$scope.calendarrangestart = view.start._d;
$scope.calendarrangeend = view.end._d;
}
}};
$scope.eventSources = [$scope.events];

ng-fullcalendar need to show only events with specific id's in angular

I'm trying to create an scheluder for my angular application with ng-fullcalendar. I got it installed without any problem but i want only render some specific ID's from my event.service. This is my NgOnInit:
ngOnInit() {
this.eventService.getEvents().subscribe(data => {
console.log(data[0].id);
this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
events: data,
};
});
}
My events.service looks like:
import { Inject, Injectable } from '#angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
#Injectable()
export class EventService {
public getEvents(): Observable<any> {
const dateObj = new Date();
const yearMonth = dateObj.getUTCFullYear() + '-' + (dateObj.getUTCMonth() + 1);
let data: any = [{
id: 999,
title: 'All Day Event',
start: yearMonth + '-01'
},
{
id: 998,
title: 'Long Event',
start: yearMonth + '-07',
end: yearMonth + '-10'
},
{
id: 999,
title: 'Repeating Event',
start: yearMonth + '-09T16:00:00'
},
{
id: 998,
title: 'Repeating Event',
start: yearMonth + '-16T16:00:00'
}
];
return Observable.of(data);
}
};
At the current situation al those events are rendered in my view. What do i need to change on this code to only show events with the id '999' for example.
Thanks for those who took time to help me!

You can filter using this:
data.filter( ev => ev.id == '999');
So on your ngOnInit will become like this:
ngOnInit() {
this.eventService.getEvents().subscribe(data => {
console.log(data[0].id);
this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
events: data.filter( ev => ev.id == '999'),
};
});
}
You can also start with an empty list of events and later use a method to insert them.
this._calendar.fullCalendar('renderEvents', #your Filtered events#, true);

Limit the number of events created per day in fullcalendar

I am working with fullcalendar. I want to limit the number of events created per day to 4 in week's view.
I have seen this link but it is not of much help
stackoverflow question
eventLimit options only limits the events displayed but I want to stop creating events once 6 events have been created per day in week's view.

Try this.
select: function( start, end, jsEvent, view) {
var eventCounter = 0;
$('#calendar').fullCalendar('clientEvents', function(event) {
if (start.format('YYYY-MM-DD') == event.start.format('YYYY-MM-DD')) {
eventCounter++;
}
});
if (eventCounter < 6) {
// Code to create event
}
}
This works for me locally.

Okay after digging deep and learning more about fullcalender, here is how i did it. it was very easy i must say. `
var event_count=0;// to count the number of events starting from zero
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-12',
editable: true,
selectable: true,
minTime: '09:00:00',
maxTime: '18:00:00',
columnFormat: 'dddd',
eventLimit: true,
select: function(start, end) {
var eventData = {
start: start,
end: end
};
event_count+=1;//if the control is inside this function increment eventcount
if(event_count<4){
//if the counter is less than four then do this
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$('#calendar').fullCalendar('unselect');
}
},
eventClick: function(event){
$('#calendar').fullCalendar('removeEvents',event._id);
event_count-=event_count;//decrement event_count when event is removed
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
$('#view_calendar').on('shown.bs.modal', function () {
$("#calendar").fullCalendar('render');
});
})
`

How to get the value of allDay in fullcalendar jquery plugin?

I'm using the fullcalendar jquery plugin and I want to get the value of allDay that is true or false and I want to append the value to a form.But value that is getting appended is [object Object]
<input type="hidden" id="apptAllDay" value="[object Object]">
<script type="text/javascript">
$(document).ready(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$('#apptStartTime').val(start);
$('#apptEndTime').val(end);
$('#apptAllDay').val(allDay);
$.magnificPopup.open({
items: {
src: '#popup',
type: 'inline'
}
});
},
editable: true,
eventLimit: true, // allow "more" link when too many events
eventStartEditable : false,
events: "http://localhost/app1/events",
});
$(document).on("click","#addEvent",function(e) {
e.preventDefault();
doSubmit();
});
function doSubmit(){
var title = $("#titleContainer").val();
var description = $.trim($("#descContainer").val());
var url = $("#urlContainer").val();
if (!title) {
alert("Title is required");
return false;
}
$("#calendar").fullCalendar('renderEvent',
{
title: title,
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true")
},
true);
}
});
How can I get the real value that is TRUE or FAlSE?

This might probably help you, change according to your requirement.
function parseClientEvents(){
var clientArr = $('#calendar').fullCalendar('clientEvents');
for(i in clientArr){
console.log(clientArr[i]);//gives events full description.
console.log(clientArr[i].allDay);
//check for value here and append to your hidden field.
//all your logic goes here.
}
return true;
}

Fullcalendar v2 store dragged event into localstorage

How can I store my dragged events into localstorage ? I have figured out in old fullcalendar version but this solution is not working any more.
var EventsView = Backbone.View.extend({
el: document.getElementById("content"),
render: function() {
var self = this;
var events = JSON.parse(localStorage.getItem('events'));
var events = new Events(events);
var jsevents = events.toJSON();
this.el.innerHTML = _.template( calendarTemplate,{data : jsevents} );
$('#calendar').fullCalendar({
agenda: 'h:mm{ - h:mm}',
'': 'h(:mm)t',
aspectRatio: 1.5,
droppable: true,
weekend: true,
editable: true,
eventDrop: function(event) {
// ???????????????????????????????
},
defaultView: 'month',
firstDay: 1,
handleWindowResize: true,
allDayDefault: false,
firstHour: 7,
columnFormat: {
month: 'dddd',
week: 'ddd, dS',
day: 'dddd, MMM dS'
},
header: {
right: 'prev,next',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
events.push(eventData);
localStorage.setItem('events',JSON.stringify(events));
}
$('#calendar').fullCalendar('unselect');
},
events: function(start, end, timezone, callback) {
callback(jsevents);
}
});
},
You can see my select function fully working. I mean selected events are stored into database.

i was able to replicate your example, and it worked just fine, the only thing i added is the definition of Events, i made it as backbone collection
var Events = Backbone.Collection.extend({});
I think you need to debug while setting the value in local storage, try to log the value of
JSON.stringify(events)
just before setting in local storage
EDIT:
jsfiddle: http://jsfiddle.net/mfarouk/vcsr45q8/25/