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?
Related
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 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
}
},
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);
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 am using Jquery plugin http://timeago.yarp.com/ for showing time.
Issue is timeago will not take effect for dynamically generated items.
$(document).ready(function() {
$(".timeago").timeago(); // works perfectly fine for the items which are loaded on page load
//$(".timeago").live(timeago()); // gives me an error ie timeago is not defined
//$(".timeago").live($(".timeago").timeago()); // gives me an error too much recursion.
jQuery.timeago.settings.allowFuture = true;
});
From some google search I got to know something ie:
Using live is the same as using bind, except that it is limited only to the events click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
Now how can do it cause I dont have any click event? How can I bind this?
.live() and .bind() assign callbacks to event. In your case, you don't have an event to assign the function to and so it fails.
You can, in theory, assign your callback to a custom event. You will however have to manually trigger the event (using .trigger()) whenever your item is generated. For example:
$("abbr.timeago").live("timeago", function() {
$(this).timeago();
});
// ... and in the bit that generates your item
$new_item.trigger("timeago")
Demo: http://jsfiddle.net/ZjuW4/9
Of course, using .live() in this situation is purely academic and does not really serve a good purpose.
If you do have access to the code that's generating the items, you can simply chain in the call to .timeago() as the items are generated, i.e. http://jsfiddle.net/ZjuW4/3/
take a look in this topic
here was discussed how to put timeago on dynamically loaded items
for example the results of an ajax request.
Activate timeago on newly added elements only
PS: allowFuture does not have anything to do with putting timeago on newly created items on your page. it just allows dates in the future (f.e. "in 3 days", "next week")