I have implemented Arshaw master calendar in angular js, Lets assume the scenario If I have more than 5 events on the same date, But I dont want to show all the 6 events directly in the date cell of the master calendar, Instead I would like to show only 2 events, And a link saying that 'more', On clicking on more a popup will be opened showing all the events of that date. For Better understanding I have provided Screen shots of what exactly I want to achieve. Thanks in advance..!!
Found an answer, I just set eventLimit Property as follows, And it worked,
eventLimit: true,
views: {
month: {
eventLimit: 1
}
},
Related
I'm using Fullcalendar v5.6 with RRule for recurring events.
The events are being generated correctly on the calendar but I'd like to be able to access the toText function so I can display human readable text - similar to how the demo works https://jakubroztocil.github.io/rrule/
I've tried but I'm unable to access the function from Fullcalendar.
The closest I've come is with this code from the eventClick event
eventClick: function(info) {
console.log(info.event._def.recurringDef.typeData.rruleSet.toText());
}
This just shows 'every year' on the console, so isn't working.
Is it possible to access this function from Fullcalendar?
UPDATE
Here's a codepen which displays the issue I am facing.
https://codepen.io/damiantaylor/pen/rNdmaQg
When clicking on an event, the console will show the rrule object but there seems to be a problem with the data. 'freq' is zero, 'dtstart' is shown as today and 'until' is null.
Is there something I'm doing wrong or is this just fullcaldendar/rrule not playing nicely?
I am facing a performance issue in my angularjs application using angular material.
I have an <md-select> with many options (around 1300) and this <md-select> is in an <md-tab> tag. On the page load, my page freezes. This is probably due to Google Chrome's event passive listener, because I get the following log in my js console :
[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
You can find a codepen which reproduces my issue : https://codepen.io/jjalal/pen/vWxYbv.
When switching from Harry to John the page freezes (it is way more obvious on my application). If you open the js log and set the log level to 'All levels' (enable verbose level), you can see the 3000 logs (I have 3 select with 1000 options each).
I saw on some answers that I should set the event passive to true like this :
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: true });
But this didn't solve my issue.
Any help would be appreciated.
Very recently (two days ago) had a very similar issue and after hours of research I had to realize that this is something that won't be fixed in the near future. Please refer to this question and the accepted answer for explanation. (And also check out the angularjs github issue which has a tag 'won't fix')
Regarding a kind-of solution:
The problem is 100% with the browser (don't even try it in IE, it will freeze with a note 'long running script') and the DOM rendering and not in your code. So I kept trying and trying and trying, removed tiny parts of the DOM (complete container divs, buttons, paragraphs, whatever I could find) one by one. At one point I was able to identify what caused the issue. I had an item that was draggable which contained a clickable md-icon and that icon had an on-hover md-tooltip. Now you see it had 3 events (dragging the item, clicking on the button and hovering the button) which collided. After removing the md-tooltip it worked like a charm. My suggestion is for you to start identifying what exactly could be causing this. The real solution will have to wait...
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);
}
}
};
Sorry for the mistakes, I'm French.
I use the Dojo calendar and there are some buttons "Today" "4 Days", "Week", "Month"... Is there a javascript function which do like if I clicked on one of these buttons, and thus changes the DateInterval property ? Or there is an other way to do that ?
Thank your for your help.
So if I understand correctly, you want to change the date interval without having to click one of these buttons?
You can do that with the dateInterval property which accepts, according to the API documentation, the values: day, week and month (I have no clue how to get the "4 weeks").
This means you can change them by using:
registry.byId("myCalendar").set("dateInterval", "day");
I also made an example JSFiddle (doesn't render properly, but the button does what you want). You can of course change the initiator (I created a seperate button), but it can be anything.
EDIT: As requested in the comments, you can determine which "view" is chosen by using the following event handler:
registry.byId("test").set('onTimeIntervalChange', function(e) {
console.log(e);
});
However, this event will always be executed when the time interval changes, so it will probably also be called when you click a custom button like in my previous example. I have no clue if there's an event handler more suitable to your situation, but the API documentation will probably be very helpful to you.
Anyways, I updated the JSFiddle which you can find here.
To get the four day calendar set this
registry.byId("myCalendar").set("dateInterval", "day");
and then this
registry.byId("myCalendar").set("dateIntervalSteps", 4);
Actually I want to create a calendar like Google calendar, In which user can able to create events. So that I want a popover when user clicks on cells. Please give me any suggestion for this. I have also confused between ng-grid and ui-calendar, which is the best option for drawing calendar, binding click event etc.
Thanks in advance.
No reason to worry about ng-grid, you could build a calendar out of it but the existence of ui-calendar makes that just a good coding/css exercise.
The Angular UI Calendar (https://github.com/angular-ui/ui-calendar) is a wrapper around the jQuery fullcalendar plugin (http://arshaw.com/fullcalendar/docs/). You can use the documentation on the latter and pass options right through the directive.
Example from the GitHub page referenced above:
myAppModule.controller('MyController', function($scope) {
/* config object */
$scope.calendarConfig = {
height: 450,
editiable: true,
dayClick: function(){
scope.$apply($scope.alertEventOnClick);
}
};
});
<div ui-calendar="calendarOptions" ng-model="eventSources">