I have the following issue while using the angular ui calendar component, as when the page loads I have like 60 records (full of information) I pull off the DB and this makes the reloading really awfull.
I realize I could detect when the user switches from one month to another and so load only the records corresponding to that month (According to the view).
Is there any angular ui calendar event to detect or be aware of this ?. Thankx !.
This is pulled from docs:
Custom event rendering
You can use fullcalendar's eventRender option to customize how events are rendered in the calendar. However, only certain event attributes are watched for changes (they are id, title, url, start, end, allDay, and className).
If you need to automatically re-render other event data, you can use calendar-watch-event. calendar-watch-event expression must return a function that is passed event as argument and returns a string or a number, for example:
$scope.extraEventSignature = function(event) {
returns "" + event.price;
}
<ui-calendar calendar-watch-event="extraEventSignature(event)" ... >
// will now watch for price
In the docs, it is advised to use viewRender callback:
There is no mechanism to $watch the displayed date range on the
calendar due to the JQuery nature of fullCalendar. If you want to
track the dates displayed on the calendar so you can fetch events
outside the scope of fullCalendar (Say from a caching store in a
service, instead of letting fullCalendar pull them via AJAX), you can
add the viewRender callback to the calendar config.
$scope.calendarConfig = {
calendar:{
height: "100%",
...
viewRender: function(view, element) {
console.log("View Changed: ", view.start, view.end);
}
}
};
Related
I like the gijgo treeview with checkbox as its clean and neat and it solves the purpose of showing the hierarchy information. Check below link for documentation.
https://gijgo.com/tree/demos/bootstrap-treeview-checkbox
Since knockout.js is preferred for the front end development hence its needed to develop a knockout binding for this particular requirement.
The idea is to populate the hierarchy data from the backend and bind it to the custom knockout binding.
The user selects/un-selects some checkboxes and then hits the save button. the selected/unselected data is again sent back to the server for the save.
The below code is the usage of the control in jquery.
The function tree.getCheckedNodes() returns the array of selected checkboxes.
How would one call the above function from an knockout binding.
ko.bindingHandlers.tree = {
init: function (element, valueAccessor, allBindingsAccessor) {
},
update: function (element, valueAccessor, allBindingsAccessor) {
var options = valueAccessor() || {};
var value = ko.utils.unwrapObservable(valueAccessor());
var tree = $(element).tree(value);
}
}
In the init method:
Unwrap the widget's initial data passed by your viewmodel from the valueAccessor
Convert the initial data to the format the tree widget understands
Initialize the widget with the correct settings $(element).tree({ /* ... */ })
Attach an event listener (.on("change", function() { }) to track user-input
In the event listener function, write back the data from the UI to the viewmodel (e.g. valueAccessor() (tree.getCheckedNodes()))
Optional: add custom disposal logic to clean up the widget if knockout removes it from the DOM
In the update method, which is called if your view model's value changes
Implement the logic that updates the widget based on your new settings. Probably something like tree.check(ko.unwrap(valueAccessor())). Make sure the update is "silent", if it would trigger a change event, you'd end up in an infinite loop.
I was trying to implement a calendar, on which when I select date, I want an event to be fired and get the control. I am only able to get the date selected and not able to get that event.
https://material.angularjs.org/1.1.6/api/directive/mdCalendar
I tried going through the library for the above calender,
https://github.com/angular/material/blob/master/src/components/datepicker/js/calendar.js
Here, I see an event being emitted, how can I listen to this event? md-calendar-change
/**
* Sets the ng-model value for the calendar and emits a change event(md-calendar-change).
* #param {Date} date
*/
CalendarCtrl.prototype.setNgModelValue = function(date) {
var value = this.dateUtil.createDateAtMidnight(date);
this.focus(value);
this.$scope.$emit('md-calendar-change', value);
this.ngModelCtrl.$setViewValue(value);
this.ngModelCtrl.$render();
return value;
};
The best way to react to date selection is to use the ng-change directive:
<md-calendar ng-model="birthday" ng-change="onSelect(birthday)">
</md-calendar>
For more information, see
AngularJS ng-change Directive API Reference
I am using AngularJS 1.3. Assume I have created several routes in my application. But when user hits a specifc route/url & then tries to move to another route/url, I want to fire some event. I do not want to fire this event on every URL change.
So only when user comes out of this url http://localhost:9000/data/55677c/edit, I want to fire one function available in XYZ controller.
Here is my scenario:
I have a page which looks like this:
<div class="well">
<button id='edit-btn' type="button" ng-click='saveContent()'>
<div ng-include="'components/grid/comOne.html'"></div>
</div>
components/grid/comOne.html page contains one grid and it has its own controller which takes care of data management of the grid.
This grid is shown in two pages. One in editable mode and one is non-ediatble mode. While user is in editable mode and try to move out of the page without saving the info, I need to fire an event in order to discard ant changes user has made to the grid data.
Please suggest
If the listening controller is a parent controller you could $emit the event.
Or you could have a common service like this:
angular.module('x').factory('CommonLogic', function(){
var pageChangeListeners = [];
return {
listenToPageChange: listenToPageChange
};
function listenToPageChange(callback){
pageChangeListeners.push(callback);
}
function pageChanged(){
for(var i = 0; i < pageChangeListeners.length; i++){
pageChangeListeners[i]();
}
}
});
then when leaving that url (track that via $routeChangeStart) you can call: commonLogic.pageChanged()
In the controller where you want to take action just:
commonLogic.listenToPageChange(function(){..}).
Obviously this should be improved to avoid duplicate registration of the listener ... etc.
I hope I'm not overcomplicating this. Could you describe your use case in more detail ?
I guess you want to use $routeChangeStart:
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
});
You can put this in the scope of your current controller which might be edit as your url says.
From the docs:
$routeChangeStart
Broadcasted before a route change. At this point the route services starts resolving all of the dependencies needed for the route change to occur. Typically this involves fetching the view template as well as any dependencies defined in resolve route property. Once all of the dependencies are resolved $routeChangeSuccess is fired.
The route change (and the $location change that triggered it) can be prevented by calling preventDefault method of the event. See $rootScope.Scope for more details about event object.
Type:broadcast
Target:root scope
I've got a backbone.js model which contains a calendar. The user can go back and forth in the calendar and I can get the events for the selected calendar day.
In my Model, I have
initialize: function(){
this.on('change:date',this.get_cal());
},
get_cal: function(){
alert('get calendar');
this.fetch(...
}
and in my view I have
cal_date: function(move){
Myapp.cal.attributes.date.setDate(Myapp.cal.attributes.date.getDate()+move);
}
when the date changes, I expected backbone to trigger the change event, and get the calendar events for the new date. Unfortunately, that isn't happening.
I've also tried putting the printed date into the model as
Myapp.cal.set({print_date: formatted_date});
thinking that maybe backbone is missing the update because I'm not calling 'set', or because it sees a date object and thinks that it already had a date object and therefore didn't change.
I've also tried to trigger the change with Myapp.cal.trigger('change'), in the view but that didn't work either. Nor did removing the calendar events by calling Myapp.cal.cal_events.refresh() where cal_events is the collection holding the days events.
Do you see what's wrong here?
I think the issue is with the parentheses after get_call on this line:
this.on('change:date',this.get_cal());
You should remove them because they call get_call right in initialize instead of making them an event handler.
I have a web page (written with PHP/Zend) with a full calendar component which is driven by a combo-box. This combo-box is used to switch from one calendar to another. Each time the user changes the value of the combo-box, we fetch the events in the database and "json" them as an array to the JavaScript. Then, we erase all events from the present calendar (empty current calendar) and add the newest event... but it does not work.
As the query to obtain all the events between two dates is long to execute we want to make it once for each calendar (each time user change the value of the combo-box).
My JavaScript code where $('#planning').val() is the combo-box value. The result variable contains a JSON array which has been validate.
<script type="text/javascript">
$(document).ready(function()
{
$("#planning").change(function() {
$.post(
'/Jerome/public/index/update-calendar',
{ planning: $('#planning').val() },
function(result) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar(result); //not working
$('#calendar').fullCalendar( 'addEventSource',result);//not working
$('#calendar').fullCalendar( 'refetchEvents' ); //anything change
$('#calendar').fullCalendar( 'rerenderEvents' ); //anything change
});
});
});
</script>
It looks to me like your issue is when you're trying to load the new events. Full Calendar wouldn't know what to do with your JSON object try replacing...
$('#calendar').fullCalendar(result);
With..
$('#calendar').fullCalendar( 'addEventSource', result )
Here is a link to documentation.
I hope this helps!