I'm having an issue when displaying fullcalendar events, sometimes when the calendar is loaded for the first time the events are not entirely visible as shown in the image, and to fix it, I have to switch to the month view and return back to week view. Is there a way to fix this problem so the calendar is always loaded correctly ?
EDIT:
This is the html code of my calendar:
And this is the javascript code:
Related
We are making a web application where users can create theire own calendars. They should be able to create multiple calendars (all in view agendaDay) on one page. There are external events that have to be dropped on the calendars to make appointments. Everything we want to do is working like a charm!
But we have 1 problem and we can't seem to get a solution for it.
We have a second (month) calendar (dynamicly created) and we are using this calendar to navigate between days. When a user clicks on a day we use gotoDate to change the FullCalendars day.
This is where the problem comes in. When we use gotoDate on all the calendars on the page it's not possible drop the external events on the first calendar. Dropping the events on de second or third calendar is not giving any problems.
What i have seen is that the fullCalendar gets destroyed in the renderView function in the fullcalendar.js on line 724 (version 2.2.6). After this the fullcalendar has been rendered again.
When i uncomment the destroy the problem is solved but then ofcourse the drop event gets initialized for second time (or third, or fourth).
I'm unable to find a solution so trying to find some help for this.
See my code on: http://jsbin.com/pubelo/1/
I have also submitted this to the FullCalendar issue tracker but i'm trying to find a fast solution for now.
Update 1
Still looking into the FullCalendar.js code. I have noticed that the problem is solved when i remove line 6414 in the destroy function.
this.el.empty();
But removing that line results in double javascript events.
Update 2
Changed the jsbin link.
Update 3
I have noticed that the handler 'documentDragStart' isn't called on the first calendar when using the gotoDate.
Update 4
Problem turns out to be in "var Grid = fc.Grid = RowRenderer.extend({" unbindHandlers function.
Because the seconds calendar is calling the unbindHandler after the first calendar called the bindHandlers the dragstart has been removed and only applied once (to the last calendar).
Haven't found a solution tho...
Workaround / solution
Got a work around for the problem.
I'm destroying both calendars. After that i initialize both calendars again with defaultDate paramater set to the correct date.
This seems to work fine for now.
Got a work around for the problem.
I'm destroying both calendars. After that i initialize both calendars again with defaultDate paramater set to the correct date.
This seems to work fine for now.
Update
Problem had been fixed by Arshaw and released in the newest version 2.3.0.
I have an issue with the rendering of the angular UI calendar. My app has several views that we use to navigate in between using routes. The main page has the angular calendar and when we load the main page the calendar loads fine. But when we navigate away from this page and comes back, the calendar failed to load and only the header part gets loaded with the title and the buttons. If a button (eg- month) is clicked then the whole calendar loads up again.
Is this something to do with rendering? any output is highly appreciated.
[1]: http://jsfiddle.net/fECuY/4/ "jsfiddle"
I have resolved this issue by using resizing the window where the calendar got rendered within a timeout function.
Still I want to know how this render method can be used to re- render this calendar again. (in angular context)
arshaw.com/fullcalendar/docs/display/render example is catered for jquery..
I'm working on a php-html-javascript project and I'm really going crazy with this problem.
The project uses jquery datetime picker and everything is fine (the datetime picker works on other pages and also in the "affected ones"), but when I'm trying to use it on a dynamically created element the date time picker loses interactivity: can't click it or change year/month, it only closes when there's a click on another element. It doesn't even trigger the "onSelect" event so I can't use it.
OTHER INFORMATIONS:
- The div associated is in the page (DOM element) but is cloned as a new div ($.clone())
- The datetime picker is associated with the element when the div is fully created (callback), so there is no possibility of not-loaded element
- The datetime picker displays on click but isn't interactive.
I tried for days but I can't solve this. Hope you all can help... Thanks!
As far i know the problem is occurring because of clone.If we use clone with true as the argument then the events and properties associated with the old element copies to cloned element. May be when you click on the calendar check whether the date is been displayed on the first text box. If it is so then there must be problem with the cloning.
I'm looking for a way to get the current pagedate. I know how to get the original config or even how to subscribe to changePageEvent and get it while scrolling, but neither covers a case when someone opens the calendar scrolls through few months and then closes and re-opens, I need the pagedate for that page. There has to be a property that records that, but can't find in the API.
Here is an example of a popup calendar that remains on the last calendar page viewed, even if a date isn't selected. Browse to a month and close the calendar using the "x" in the corner. When you click the button to display the calendar again you'll find it's on the same page you last navigated to:
Calendar Control: Popup Calendar - Basic
I don't see any code in the example source code that sets the date, so in the absence of your source code I'll have to guess that you're instantiating a new calendar each time you show it.
To get the month/year displayed use the pagedate property.
I've got a fullcalendar setup, but there are so many pages I've got it set up with tabs, but when I change a date, only the ones currently displayed get updated, the same goes for the initial loading of calendars, it will only load the events for the displayed ones, while the "hidden" ones in inactive tabs don't' get populated at all.
I at first couldn't even get a calendar view going, but I solved this by initiating the $.tabs AFTER the fullcalendar construction was done.
I have a live copy running right now at http://www.stavanger-ishall.no/ (hitting the blue time schedule image should open it for you)
I have attempted working around the problem by adding an event to the "select" option of the tabs to fetch the calendar data then, but to no avail.
The solution was to use the $.tabs() "show" event as opposed to "select" and then running a fetch command on my calendars, this ensured the page had loaded the calendar before trying to populate it.