I am using FullCalendar for Angular. I have a Dropdown by the side of calendar which contains list of Employees. When selected option is changed in dropdown, I need to show all events of specified employee. On change event of dropdown, I am calling ngOnInit() method to refresh the data.
handleEmployeeChange(employee_id) {
this.router.navigate([`route-plan/${employee_id}`]);
this.ngOnInit();
}
And this is how I am trying to reset calendarEvents in ngOnInit method.
ngOnInit() {
this.calendarEvents = this.calendarEvents.splice(0, this.calendarEvents.length);
console.log(this.calendarEvents);
}
calendarEvents: EventInput[] = [];
In console, everytime I select a new employee, calendar events get appended to the list data. Thanks in advance.
Related
I am using Asp.net Webforms and FullCalendar library. The client side works as expected. I have added a submit button to the calendar. On submit, i want to get all the changed or added events from the calendar and post them to database. Clientevents gets all events of the calendar, however i want to get only the changes between the calendar and datasource. Can you please help me?
Possible duplicate of How to send only updated events as json to server on fullcalendar?
You can include your own field on event object (like isNew / isUpdated) and filter the events by that field when you collect all events.
eventData = {
title: title,
start: start,
end: end,
isNew: true, //your own field
isUpdated: true, //your own field
};
var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents', function (event) {
return event.isNew == true;
});
I'm trying to keep my Ckeditor 4 toolbar buttons to a minimum, but want figure out what buttons the users are using most.As such, I'm trying to add google analytics to toolbar button clicks.
Firing off a JS event to record the analytic is no problem. However, I'm having a hard time figuring out how to capture the click event of the toolbar item specifically. Is there an event callback I can bind to? Thanks.
Ideally, this does not have to use the jquery ckeditor connector as I have managed to not use that yet. Although, it is ok to use Jquery itself.
I think I figured it out. There appears to not be a way to do this at the CKEDITOR class level, however it can be done at the individual editor level.
Inside of my instanceReady handler, I can add afterCommandExec event handler.
CKEDITOR.on('instanceReady', function (e) {
var textarea_id, editor;
textarea_id = e.editor.name;
editor = CKEDITOR.instances[textarea_id];
// Attach handler for events
editor.on('afterCommandExec', function (evt) {
// Record Analytic of toolbar bar & keypress events
// See http://docs.ckeditor.com/#!/api/CKEDITOR.command-property-state for vals
var cmd_name, cmd_prev_state, cmd_new_state;
cmd_name = evt.data.name;
cmd_prev_state = evt.data.command.state;
cmd_new_state = evt.data.command.previousState;
console.log([cmd_name, cmd_prev_state, cmd_new_state]);
// Call analytics event next ...
});
})
References:
Event callbacks for the global CKEDITOR level: http://docs.ckeditor.com/#!/api/CKEDITOR-event-instanceReady
Event callbacks for the editor instance level: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-afterCommandExec
I am currently using the http://arshaw.com/fullcalendar/ (full calender Plugin) and the qtip2 plugin. I want to create events using the qtip2 popover. and i dont have any idea of how to do so? can anyone please guide me on this?
Bind the option select to a new function youFunction (callback). In this new function you should receive the selected date parameters, then you can manipulate and save the event as you wish.
$('#calendar').fullCalendar({
// put your options and callbacks here
//...
select: yourFunction,
//...
});
function yourFunction(startDate, endDate, allDay) {
//open your popover, manipulate the data and save the event.
}
I'm building a calendar-based web app with fullcalendar, which is for college students to use. There are some categories I've defined. e.g, sport, art, mind, etc... every event in the fullcalendar would be assigned to a category.
What i want to do is: there're some checkboxes corresponding categories on the top of the calendar, and the user can check or uncheck some checkboxed to hide/show the related events
how would I achieve this?
One way is to put appropriate classes on each event by setting the 'className' property on the event objects you're sending to the calendar and use jquery to hide those events (e.g. $(.myClassName).hide()) when they check the checkboxes. The trouble is the events would vanish leaving a gap where they were which might not be what you want.
A better way would be to add a filter function to the events option when you first call fullCalendar like this:
fullCalendar({
...
events: {
url: ....,
success: function(events) {
$.map(events, function (e) {
if (userHasFilteredOut(e))
return null;
else
return e;
});
},
...
});
This will filter out the events before they are displayed. The function userHasFilteredOut returns true if the event object passed in is of a class the user's checkbox values indicate is filtered out. When the user checks or unchecks a checkbox, you will need to refetch all the events from the server. You need to do this:
$('#mycal').fullCalendar('refetchEvents');
On page I have fullcalendar, variable which determines how to display now (all events or events with filter), button for changing variable value and function which applies filter.
Variable (true - show all events, false - with filter):
var isShownWithCancelEvents = true;
Button and it's click function:
$('.fc-header-left').append('<span class="fc-button fc-button-show-with-canceled-events fc-state-default"><span class="fc-button-inner"><span id="show_without_canceled_events" class="fc-button-content">Show with filter</span><span class="fc-button-effect"><span></span></span></span>');
$(".fc-button-show-with-canceled-events").click(function() {
isShownWithCancelEvents = !isShownWithCancelEvents;
prepareEvents();
});
Function prepareEvents():
function prepareEvents(){
if (isShownWithCancelEvents) {
$('#calendar').fullCalendar('refetchEvents');
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show with filter");
}
else {
$('#calendar').fullCalendar ( 'removeEvents', filter );
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show all events");
}
}
Filter function:
function filter(event) {
return (event.ec_e_id !== null);
}
Also in fullcalendar I use option:
viewDisplay: function(view) {
prepareEvents();
},
Button is working, problem is with fullcalendar option.
Default view on page is agendaWeek. I open page and click button, variable's value changes to false, filter applies. It's OK. Then I click button "Month" and view changes to month. And I see all events. Then I click button "Week" and view changes to agendaWeek - events are filtered. I click button "Month" again - on this view events are filtered too. So, the problem is when first time changing view to another.
I open page and click button, variable's value changes to false, filter applies. It's OK. Then I navigate left or right (next or previous week), and I see all events. Then I return back, where events were filtered and see all events there.
If I add alert into fullcalendar option
viewDisplay: function(view) {
alert("something");
prepareEvents();
},
everything is OK, and filter works every time.