I'm using fullcalendar with eventLimit.
I don't want to use the popover function of eventLimit, I would like just to show the remaining events in the same view.
I'm using the basicWeek but if I set:
elementClick: 'basicWeek'
Clicking on the more link does not work at all.
Please see the example at the following link
I think you mean:
eventLimitClick: "basicWeek"
not "elementClick".
https://fullcalendar.io/docs/display/eventLimitClick/
There's no "elementClick" option in the documentation, as far as I can see.
EDIT:
In your JSFiddle I can see you have used "eventLimitClick" correctly. However, you're asking it to go to the same view ("basicWeek") that you're already in, which will essentially do nothing.
Did you mean to make it go to, say, the "basicDay" view to get more detail? If so, then in order to make it work, you then need to override the "eventLimit" for the day view in question, so that you don't simply end up with the "show more" type link on that view instead of the actual events. To do that, you need to update the fullCalendar and momentJS versions you're using in the Fiddle, so that fullCalendar supports view-specific options (see https://fullcalendar.io/docs/views/View-Specific-Options/).
In short, what you'd need to do is set the options like this:
eventLimit: 1,
eventLimitClick: 'basicDay', //go to a DAY view, not the same week view
views: {
basicDay: { eventLimit: false } //for the day view, remove the event limit
},
See a working fiddle: http://fiddle.jshell.net/pwyw2sfy/3/
Related
I'm using FullCalendar v4 and trying to display all the events which are available only for the current view in a custom list view.
Current view in the sense, let's say if I'm in 'dayGridMonth' view, I need get the events for the entire month which is currently on. Likewise if I'm in 'timeGridWeek' view, I need to get the events for the entire week which is currently active.
I'm using FullCalendar Angular plugin and I have tried the following code using getEvents() method.
let CalendarApi = this.calendar.getApi();
let events = CalendarApi.getEvents()
console.log(events);
Using this way, FullCalendar displays all the events no matter what view I'm in. I want something like a lazy loading way where the events are loaded only for the current view (time period).
Try using
eventRender(event){}
It will render events in current view
I think you need to do some steps:
1) Identify the change of view (click at button 'month' or 'week' for example).
2) On change of view, you erase ou insert the list of events you want for that view.
How to do these steps on code:
1)
At the component, put a callback that return the view:
<full-calendar (viewSkeletonRender)="handleViewRender($event)"></full-calendar>
At your code, create the method 'handleViewRender':
handleViewRender($event) {
if ($event.view.viewSpec.buttonTextDefault === 'month') {
// step 2 here, change the list of events for month view
} else if ($event.view.viewSpec.buttonTextDefault === 'week') {
// step 2 here, change the list of events for week view
}
alert($event.view.viewSpec.buttonTextDefault );
}
I think you already know how to put a list of events at the calendar, and if not, is so simple to find... so i will not put the code here.
Official doc about events on calendar, most of code is in jQuery:
https://fullcalendar.io/docs/event-object
Official doc about viewSkeletonRender, this doc is so poor.
https://fullcalendar.io/docs/viewSkeletonRender
I hope it helps.
I am looking for a way to perform mouse click on DateRangePicker element.
I tried to write a tool for automation on https://rvshare.com/.
I need to click on DateRangePicker. I tried all the ways that are available on the internet but no luck.
Here are 3 ways I tried.
// 1.
Driver.FindElement(by).Click();
// 2.
Driver.ExecuteScript("arguments[0].click('');", ((RemoteWebDriver)Driver).FindElement(by));
// 3.
Actions action = new Actions(Driver);
action.MoveToElement(Driver.FindElement(by)).Perform();
action.Click(Driver.FindElement(by)).Perform();
The calendar controls are supposed to be shown but any of the above does not work.
Is there anybody who encountered similar issues?
I'm not sure what was your problem, but I was able to click on Datepicker(Pickup or Dropoff) using 1st method you mentioned, so I suggest that issue is not with methods u r using, but with your locator.
Your code is gonna be:
Driver.FindElement(By.XPath("//div[#class='DateRangePickerInput_arrow DateRangePickerInput_arrow_1']/following::div[#class='DateInput DateInput_1']")).Click();
If you are trying to select the data from the calendar then use the below script once you click on the either Pickup or Dropoff. The xpath works for both of them. Make sure to enter the date in the right format and you month you want to select is there in the calendar. You have to click on move to next month button until you reach the required month.
driver.FindElement(By.Xpath("//td[contains(#aria-label,'May 14, 2019')]")).click();
Question 1: I am wokring with tiny MCE 4 and have this bit of code
editor.addMenuItem("item1", {
text: "Name",
onclick: function() {
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
As you can see I am passing in a setting object where the fields text and onclick is set. Also if you look at the example here it uses a setting object with the field text, context, and onclick. But when I look at the documentation for settings attribute I do not see context, or onclick listed there. I looks at the menu and button also and could see anything there. Is there a more complete documentation somewhere?
Question 2: The reason I am asking this is because I want to see if there is a settings somewhere, that I can use to change the menus, for example, in the fiddle mention here instead of additional data displaying list box, I want the menu item used to display list box to be replaces with a textbox/dropdown.
In the example that you mentioned it is already explained that the context is where to you put your new menu item in the existing menu (Example configuration of a menu here). So if you have an context "tools", you can add you new menu item to "tools".
editor.addMenuItem("item1", {
text: "YourItemName",
context: "tools",
onclick: function() {
//The function of your menu item insert some content at the cursor position, is that corrent?
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
For your first question: No, at the moment the documentation of tinyMCE 4.x is still not complete. To learn more about how plugins (menus and buttons incl.) work, I downloaded the complete source code. I looked at some plugins (e.g. link plugin) and tried to understand the code there. At the moment the fastest way to learn some not-well-documented stuff.
For your second question: If you want to edit existing menus (or plugins), you have to download the dev-code and look the sources.
Here's something to bake everyone's noodle. I have a form on a website. You can look at it: My Website. Click book me and select a certain number of days at the top right. Manually remove a few of the form lines from the form using the '-' button. Then try to use the first input on the first line. It's linked to the wrong input. All the inputs have unique ID attributes, and I rebind datetimepicker class after a line is removed. Anyone have the foggiest idea why the datetimepicker pointing the the wrong object? Ironically enough, the timepicker portion, which is not from jQuery UI proper, still points to the correct input, it would seem. It seems that when you delete lines of a lower number, the lines of a higher number are moved and renamed, but the date portion f the datetime picker is still pointing the the line number that it was originally bound to, if that makes any sense.
Help is appreciated because this one has me stumped. I've tried manually releasing the datepicker objects before I remove the form lines, but nothing seems to help.
Thanks
Edit: Is there a way to completely destroy the instances of the datepicker that are bound to the input elements before I remove them?
Edit: Alright, I just had a realization. I am destroying the datepickers on the lines I'm removing, but not the lines that remain, so I'm going to work on this for a minute and see if destroying the datepickers completely when i rebuild the form helps.
No time to analyse all that code but could possible help to call $(elem).datetimepicker('destroy') when you remove a control before any rebinding.
In setAlts()
try removing var fields = $('.date').get();
and just doing:
$('.date').each(function() {
$(this).datetimepicker('destroy'); // From Marcell
$(this).datetimepicker({
minDate: now,
timeFormat: "h:mm tt",
stepMinute: 15,
});
});
If you remove dateCheck() all should be fine.
I assume below is what you are intending with dateCheck() though.
Ok in dateCheck()
change:
target.siblings('.date').datetimepicker('setDate', dateMin);
to:
target.next('.date').datetimepicker('minDate', dateMin);
Alright, so to answer the question: It seems obvious in retrospect, but the datetimepicker addon which is coded in a slightly different, and probably less efficient, manner was throwing me off the trail. At any rate, I'll try to explain what was happening in a clear fashion.
The datepicker object binds to the id of the element when it is created, and it keeps that id until it is destroyed. And apparently, attempting to bind a new datepicker object does nothing if there is already a datepicker object present.
To rememdy the problem, in the setAlts() method, I simply destroyed every single datepicker object, and recreated it. Pretty simple, but it was confusing the hell out of me.
And thanks for setting me on the right path. Otherwise I'd have probably had a chimpout and started smearing my poo on the walls.
I've got a jquery ui datepicker on my page. It's linked to a span not an input. It's currently tweeked to select a week at a time. I've also got two buttons on my page 'Previous Week' and 'Next Week'. I want the buttons to control what's selected by the datepicker. (ie jump forward / backward by one week when pressed).
I'm not sure how to grab the datepicker so I can mess with it (or what I actually mess with - is there a real 'object' there, or is it a just a load of css / html component like 'ui-datepicker-current-day' etc).
there is a real object you can hold a reference to.
example:
var datePicker = $("#id").datepicker({firstDay: 1});
to know what you can do with it, check:
http://jqueryui.com/demos/datepicker/