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');
Related
What is the way to catch anytime a view is rendered?
Not only when switching views, but also when clicking today / prev / next?
I need to clear an array of unique event titles after (or before) each render is complete.
So, similar to eventAllRender which was removed starting v4.
Currently using .click event for all buttons, which does the trick, but I was hoping there was something really linked to the actual rendering.
calendar.render();
$('.fc-button').click( () => {
console.log("do something")
})
https://fullcalendar.io/docs/datesSet
Called after the calendar’s date range has been initially set or
changed in some way and the DOM has been updated.
datesSet: function(info) {
// ...
}
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.
Im trying to use registerHelper to respond to a click event on my page.
i seem to be having difficulty getting the page to perform a function based on a click event.
The function below runs when the page renders.
Template.registerHelper('deletetask', function () {
Tasksdb.remove(this._id);
how do i get it to run on a click event? I have tried something like:
Template.registerHelper('deletetask', 'click.delete' : function () {
Tasksdb.remove(this._id);
it just errors out.I think my syntax is off or i have to do it some other way.
Thanks
Template helpers return values for display. Template events are designed for, you guessed it, handling events.
Template.myTemplate.events({
'click .delete': function(ev){
Tasksdb.remove(this._id);
}
});
Note that this will be the data context corresponding to the instance of myTemplate that was clicked on.
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'm trying to figure out the best way (minimal effort) to apply filtering to a webgrid that I have displayed in my Main/Index view (MVC3).
I added a multiselet that would allow filtering by a certain column and I would like to catch the click event (which I already have implemented and working) per select item and then somehow re-invoke my Index() method that contains all the code to rebuild the view based on if it was invoked from a filter (multiselect).
What is the best way to go about this? I know that this is a broad ask but any information would be greatly appreciated.
Thanks!
You could place the multiselect inside a form. Then you have 2 possibilities to submit this form:
Using a submit button
Using the onchange event of the multiselect (in this case you will have to use javascript)
The first point is straightforward:
#using (Html.BeginForm())
{
#Html.ListBoxFor(x => x.SelectedItems, Model.Items)
<button type="submit">Filter</button>
}
To implement the second you could use jQuery and subscribe to the change event of the multiselect. First, let's give this multiselect an id so that we can more easily select it:
#using (Html.BeginForm())
{
#Html.ListBoxFor(x => x.SelectedItems, Model.Items, new { id = "filter" })
}
and then in a separate javascript file:
$(function() {
$('#filter').change(function() {
// when the selection changes we manually trigger the submission
// of the containing form
$(this).closest('form').submit();
});
});
In both cases the controller action that we are submitting to will take an array of strings as argument which will represent the selected values in the multiselect which will be used to filter the resultset.