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);
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 dont want ng-message to keep showing until user enters valid input. So I want to hide the ng-message say after 5 seconds on showing.
I saw the class toggle from ng-active to ng-inactive.
Now how can i manually set ng-message to inactive or hide it after some seconds?
The #muller answer is solved your problem. but it's a temporary solution only. Because if you used more ng-message you need to manage all of them.
But my options is you may go to AngularJS-Toaster. AngularJS Toaster is a customized version of "toastr" non-blocking notification javascript library.
I hope You can see the demo for more clarifications .
And son't worry about the integrations. We don't need long time to integrate this. you just need to download the files from the link which I bring above (js,css) and drag the files to your main screen . That's all.
$timeout(function() {
$scope.showMessage = false;
}, 5000)
edit: to know if the message is shown you can watch the value of the condition (error) I assume (e.g. if the condition is required, watch the error object of your [input field].$error.required..)
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")