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.
Related
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:
I'm using FullCalendar and allowing the user to make selections to create off-times. Is it possible to allow selecting multiple days, but instead of the standard behavior:
select only the rectangle between the start and end time.
Desired behavior:
I'm OK with still having one Start date/time and one End date/time. I don't need an array of selections (one per each day selected) as I'm handling that fine in the backend already.
Using FullCalendar v3.9.0.
It's not possible to do this with FullCalendar as-is. I've changed the code to support such option.
Please refer to the following issue, in the initial message a Patch is attached for v3.9.0 of the calendar:
https://github.com/fullcalendar/fullcalendar/issues/4119
Whenever i insert an event and that day passes it just disappears from my calendar. I have a different page where i load all the events and they're still there so they are not being removed from the database.
There must be a check somewhere in the FullCalendar code which makes it that it doesn't display dates < $today. I have no clue on where to start looking, is there anyone who had the same problem as me? How did you manage to fix it? Thank you for reading my question.
Also, how would i go about storing the last created event day? For example, i want to create a function which brings the users to my event created in August instead of today's date.
$('#calendar').fullCalendar( 'gotoDate', LASTCREATEDDATE );
I need it to update whenever somebody creates a new event.
I looked for different functions on how to achieve this but i'm not quite sure how to do this.
Your problem is that you are not getting the right events to be showed.
As you can read here FullCalendar is going to send the following URL to the server:
/myfeed.php?start=2013-12-01&end=2014-01-12&_=1386054751381
So you have to select from your database the events which EventStartDate <= end && EventEndDate >= start
About your second question you should use something like SignalR or WebSockets if you want the calendar of your users to be updated as soon you create a new event.
I'm looking for suggestions/recommendations for a JQuery/Javascript calendar that can display multiple months at once (ie. previous month, current month, next month) like so:
(The attached mockup shows a 4-month view, but I think we'll actually be doing a 3-month view).
I DO NOT need a date picker. This is basically meant to display a user's schedule, with no ability to choose a specific month/year (beyond the side-scrolling). We'll pull events out of our database, hook them into the calendar somehow, and then on a day click/hover (or both), display additional information. Events will not be editable from this view - it is display only.
I've looked into general JQuery calendar plugins (Ion Calendar, CLNDR), but none seem to have the basic multiple-month functionality I need. Multi-lingual support (or the ability to add multi-lingual text) is also important to us. I was really hoping to find a ready-made plugin for this - can't be the first time someone's tried to do it!
In case it's any use/help, we use ColdFusion and MSSQL Server. We've also got JQuery 1.9.1, JQueryUI 1.10.0 and Bootstrap 2.3.2.
Edit: I did look at the JQuery UI datepicker, but it won't work for the functionality I need. I can't see any way to attach data to a specific date, or to be able to style certain days differently than others. I think the primary issue w/ it is that it's a datepicker, not a display calendar.
Like Sean said in the comments, the best option you have is probably FullCalendar. Although multi-month isn't supported out of the box, you might be able to achieve it by adding multiple calendars. Check out Issue #199, which describes a possible solution.
Regarding the multi-lingual problem: although it isn't multi-lingual by itself, FullCalendar does support modifying the days, months, etc. See Text/Time Customization. You could use ColdFusion's MonthAsString and DayOfWeekAsString functions to make it multi-lingual yourself.
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.