Using version 3.4.0 of FullCalendar
and Jquery 3.2.0
Event click works, but day click does not work in IE only
After googling this for over an hour, ripping out most my code I then updated jquery to 3.2.1
Looks like some fixes were made
https://github.com/jquery/jquery/issues?q=is%3Aissue+milestone%3A3.2.1+is%3Aclosed
And all works now in IE.
What fixed for me was removing overflow-x: hidden from the HTML element. Its a known issue: https://github.com/fullcalendar/fullcalendar/issues/3615
Related
I'm building a calendar plugin for Vaadin (see https://vaadin.com/). Everythng works fine, the stylesheets are applied EXCEPT when I programatically change the view. The view changes but the Fullcalendar styles do not apply correctly! See sample screenshot.List View after changeView called
I need to hit refresh for the styles to apply correctly.
(If I just change the view using the full calendar 'built in' buttons at the top right, the styles are applied.)
Using FullCalendar V3.7.0 and and Scheduler trial 1.9.0
Vaadin is a GWT framework, using V6.8.
GWT code for calling changeView:
private native void changeView(JavaScriptObject cal,String view,String nid)
/*-{
cal.fullCalendar("changeView",view);
//cal.trigger( "create" ); trying to fix the not-applying .css problem
}-*/;
'cal' is the original selector returned by jQuery.
Any ideas how to fix this?
Found the problem. It was due to the Vaadin framework removing FC's style class from the topmost element. To fix, I simply added these back using the framework's setStyleName("fc fc-unthemed fc-ltr");.
I'm a backpacker and a programmer, trying to use the second skill to find openings in a full campsite. Rather than crawling fro scratch, I'm using the end-to-end testing framework nightwatch.js to navigate for me.
I've hit a roadblock, because nightwatch is having difficulty finding a specific element using css selectors.
Here are the elements and page:
Here is my test code:
Previous Attempts
My test code will click on the selection box with #permitTypeId. It will see that #permitTypeId option is visible. It will not see or click on any of the options when more specific values are specified. The five .click()'s are all css selectors I've already tried. None of the options are set to display:hidden or display:none. I have also tried all of the above without the .waitForElementToBeVisible() just in-case the waiting causes the dropdown to hide.
I've successfully clicked options from different dropdown menus on this website without any problem. Just this one is causing a headache.
The tests are running with the most current Selenium server and Firefox on Mac Yosemite.
tl;dr
Nightwatch.js/Selenium won't click on something from a dropdown menu.
The Path...
Cory got me thinking about jQuery and native DOM manipulation. Tried going that route and was successful selecting the correct option using Selenium's .execute() function:
.execute('document.getElementById("permitTypeId").options[1].selected=true')
However, it was not triggering the onchange event.
Saw this post which made me start thinking about using key-strokes and this one which suggested using arrow-keys to navigate down a <select> element to the option, then hitting enter.
...to the Solution
.click('select[id=permitTypeId]')
.keys(['\uE015', '\uE006'])
I've found that this is an issue with Firefox. Chrome and PhantomJS operate well clicking <option> tags.
you should be able to click like this way
browser.click('select[id="permitTypeId"] option[value="1451140610"]')
Additionally I was able to add a .click event for the specific option once I did a .click for the select. see my example below:
.click('select[name="timezone"]')
.pause(1000)
.click('option[value="America/Chicago"]') //selects the option but doesn't click
.pause(5000)
.keys(['\uE006']) //hits the enter key.
another solution:
.click('select[id="permitTypeId"]')
.waitForElementVisible("option[value='1451140610']")
.click("option[value='1451140610']")
Very simple way is to use .setValue('#element', 'value of option')
I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.
Scenario:
I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.
You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:
$('#calendar').fullCalendar('rerenderEvents');
Hopefully this helps!
Use refetchResources: .fullCalendar( 'refetchResources' )
This will fetch and freshly re-render the resource data, per the FullCalendar documentation.
The problem:
"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here
In my opinion, destroy is not needed in this case, only with render you can see the calendar.
My solution:
<script type="text/javascript">
$('#objectname').show(0,onObjectShow);
function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>
You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.
Solution Based on this reference.
You can also redraw calendar on the fly using below command-
$(window).trigger("resize");
i m building a web control in aspx 3.5 in which i m using ajax hover menu extender. it works fine in chrome. but in IE8 it crashes when i hover over a button. when i check in chrome error given there is Uncaught ReferenceError: enabalajax is not defined. please help me in this regard
Try using enableajax
you are definitely spelling enable wrong...
I am using fullcalendar from arshaw.com/fullcalendar for displaying events on a corporate intranet calendar. I had the className attribute working, made a couple changes to some code and now cannot figure out why it's not working. Here is the json that is returned from my service
[
{
"allDay":true,
"className":"corporate",
"editable":null,
"end":null,
"id":null,
"start":"2010-07-05T00:00:00.0000000",
"title":"4th of July Holiday (Day Off)",
"url":"\/en\/EmployeeResources\/Calendar\/Corporate\/2010\/07\/4th_of_july_holiday.aspx"
}
]
everything works fine, except for assigning the 'corporate' className to the event items on the calendar.
This is the code that I'm using on document.ready to load the calendar events, which again, works fine, it's just the className's that I'm having trouble with
$("#calendar").fullCalendar('addEventSource', '/layouts/calendar/SitecoreCalendarEventsHandler.ashx?calendar=Corporate')
I'll also note, I'm using the latest version from arshaw.com (1.4.6)
nevermind, it seems that it was being generated, web developer toolbar was not showing the class being added, but when I viewed generated source, that showed the class name. I had some messed up CSS, which was why the style appeared to not be showing up