I'm creating a reservation for projector and upon development, I'm stucked here where every time I dragged new events, it does not create new event in the calendar view. I tried alerting the values and I retrieved it correctly, only the calendar is not updating. Fullcalendar + Scheduler has a limited resources over the internet so I tried asking here. Anybody knows what's missing or what should be done?
select: function(info)
{
this.title = prompt('Event Title:');
if (this.title) {
this.eventData = {
title: this.title,
start: info.start,
end: info.end,
resourceId: info.resource.id // Example of resource ID
};
$('#calendar').fullCalendar('renderEvent', this.eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
alert('selected ' + info.start + ' to ' + info.endStr + 'wew ' + info.resource.id);
},
calendar.addEvent({
id: NewEventID, resourceId: info.resource.id, start: info.startStr, end: info.endStr, title: Title2
});
Here's what I forgot to do, then refetch the events using calendar.refetchEvents();. Problem solved!
Just migrated to pure V4, remove V3 syntaxes and included the .addEvent function. Problem solved!
Related
I've searched the documentation and found nothing about associating a FullCalendar Resource with Event Sources from Google Calendar.
This is the relevant code:
resources: [
{ id: 'room01', title: 'Room 1' },
{ id: 'room02', title: 'Room 2' },
{ id: 'room03', title: 'Room 3' },
{ id: 'room04', title: 'Room 4' }
],
eventSources: [
{
id: 'e1',
resourceId: 'room01',
googleCalendarId: '[GOOGLE CALENDAR ID #1]'
},
{
id: 'e2',
resourceId: 'room02',
googleCalendarId: '[GOOGLE CALENDAR ID #2]'
}
],
Please, help :-)
In that you can associate any event with anything, the specific bit about google calendar I cannot really answer, however from what you showed here (i.e. adding the googleCalendarId to your events as you have), I am thinking what you may be looking for is the next piece of the puzzle, being the eventClick part ?
For what you have I would think this would look something like :
eventClick: function(calEvent) {
if (calEvent.googleCalendarId) {
var edit_url = "/url_to_get_to_the_google_calendar/" + calEvent.googleCalendarId + "/";
window.open(edit_url,"_self");
return false;
}
},
I use the same technique as you showed above to add various associations to my events, and then simply add eventClick code (which would simply follow your code above in your calendar page entry) - except I am adding my data in methods in the scheduler views.py methods.....but it's the same concept !
Does that help ? I was not clear on what actually you were needing help with !
I am using pnotify and loading callback function to show a notification when the fullcalendar plugin has loaded all events.
loading:function(isLoading, view){
if (isLoading === false){
new PNotify({
title:"Finished loading events",
type:'success',
delay: 1000
});
My problems is that when ever I move to different dates it calls loading again so I am left with so many notifications shown on my screen that it becomes very unusable. How can I bypass this? Is there a way to check if a notification is active and just change the text and title of it?
You can add that logic based on the template you're using (check the template docs).
Your code would be something like
loading:function(isLoading, view){
var exists = false;
$(".ui-pnotify-title").each(function() {
if ($(this).html() == 'Finished loading events')
exists = true;
});
if (!exists) {
new PNotify({
title:"Finished loading events",
type:'success',
delay: 1000
});
}
}
It would be better if you could use a specific id or class to detect if the notification is already shown, but this works.
Take a look at the working jsfiddle.
You can just store it in a variable, do your necessary code (like nullable/undefined checks, etc) and call "update()" (here: http://sciactive.com/pnotify/ - for example, find for 'Click Notice' and see the source)
var p = new PNotify({
title: 'Some title',
text: 'Check me out! I\'m a error.',
type: 'error',
icon: 'fa fa-times-circle'
});
// ... code ...
p.update({title: 'My new title'});
I have FullCalendar installed and working great, pulling in courses from my database.
You can view different courses based on clicking a button that submits the page again but passes different criteria.
The Issue is that on reloading of the page and the new content it skips back to the current date which is rather annoying when when you are looking at courses 3 months into the future!!
Does anybody know how to make the calendar go back to the page you where on after you have refreshed the page???
I have a feeling it might be something to do with getdate as I got the following code to work but can't seem to pass the result back through the URL and into the calendar setup.
$('#my-button').click(function() {
var d = $('#calendar').fullCalendar('getDate');
alert("The current date of the calendar is " + d);
});
If you use jquery.cookie you can store the currently viewed date in a cookie for the page being viewed and use that value to set the defaultDate when the page reloads. Pass these in as options when you initialise your calendar:
defaultView: Cookies.get('fullCalendarCurrentView') || 'month',
defaultDate: Cookies.get('fullCalendarCurrentDate') || null,
viewRender: function(view) {
Cookies.set('fullCalendarCurrentView', view.name, {path: ''});
Cookies.set('fullCalendarCurrentDate', view.intervalStart.format(), {path: ''});
}
This code also saves the current view (e.g. month, day etc...)
I used a combination of the two above. I set the localStorage value for the start date when creating, moving, or resizing an event as well as viewRender and then assigned that value to the defaultDate.
defaultDate: localStorage.getItem('Default_FullCalendar_Date'),
viewRender: function(view) {
localStorage.setItem('Default_FullCalendar_View', view.name);
...
},
select: function(start, due){
localStorage.setItem('Default_FullCalendar_View', start);
...
},
eventDrop: function(event, delta, revertFunc, jsEvent, ui, view){
localStorage.setItem('Default_FullCalendar_View', event._start._d);
...
},
eventResize: function(event, delta, revertFunc, jsEvent, ui, view){
localStorage.setItem('Default_FullCalendar_View', event._start._d);
...
}
Works like a charm.
You can use gotoDate method:
var d = $('#calendar').fullCalendar('getDate');
$('#calencar').fullCalendar( 'gotoDate', d.getFullYear(), d.getMonth(), d.getDate() )
Here is an updated answer for version 4 and 5 of fullcalendar.
since viewRender is no longer an option in these versions. I came up with a different approach using the loading option.
The loading option will give you a boolean argument stating whether the calendar is done loading or not. Inside that function I check if the calendar is done loading and if so, I set the calendar date to localStorage. Next I created an if else statement before the fullcalendar object to check if the localstorage item exists, and if so I set the defaultDate option in the calendar object to to localStorage date; if not, I just set it to today's date.
Example:
let viewDate;
const savedDate = localStorage.getItem("calDate");
if (savedDate !== null) {
viewDate = new Date(savedDate);
} else {
viewDate = today();
}
const calendarElement = document.getElementById('your_calendar');
const calendar = new FullCalendar.Calendar(calendarElement, {
defaultDate: viewDate,
loading: function(stillLoading) {
if (stillLoading === false) {
// When Calendar is done loading....
localStorage.setItem("calDate", calendar.getDate());
}
},
});
I have created a jquery fullcalendar, pulling the feed from a google calendar and would like to open the event details in a colorbox. So far, I am completely lost as to how to achieve this and am looking for help. Everything that I have tried so far causes the calendar not to appear at all, so there is clearly a problem. Here is the latest code that I have tried:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'my feed url'
}
eventAfterRender: function(event, element, view ) {
if(event.url) {
$('a',$(element)).colorbox({
type: 'ajax'
});
}
}
})
});
</script>
I don't think I completely understand what's going on with fullcalendar's event information; so if someone can provide a working code that I can mess with, I would appreciate it. Thanks very much in advance for any help!
Simply add the eventClick property when initializing the fullcalendar object and call colorbox within,
$('#calendar').fullCalendar({
editable: true,
eventClick: function(calEvent, jsEvent, view) {
$.colorbox({html:"<h1>"+calEvent.title+"</h1><br><p>"+calEvent.start+" TO "+calEvent.end+"</p>"});
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
}
]
});
This is a very basic example. You can expand on it as per your requirements. Hope it helps.
I use jQuery fullCalendar (http://arshaw.com/fullcalendar/docs/selection/unselectAuto/)
I use Selectable version of this calendar (http://arshaw.com/js/fullcalendar/demos/selectable.html)
It's working fine however I want to cancel/delete my old selections if I continue selecting new dates.
Lets say I chose 1 Jan and gave a title to it.
When I try to select 2 Jan, I want to see only 2 Jan selection.
I thought unselectAuto is for this but I couldnt manage to make it work :(
Any ideas?
I used unselectAuto right under
selectable: true,
unselectAuto: true,
First it's still necessary to use the $('#yourCalendar').fullCalendar('unselect'); function.
The second thing that I needed to do, was to specify how the unselect callback was going to behave (when setting up the fullcalendar options). For me I had to unbind the submit button from my form
unselect: function(){
$('#submitButton').unbind();
},
It worked great!
I was able to reach this conclusion after reading this post "multiple events created"
u can try this way, this works for me :)
var liveDate = new Date(); // current Date
var calendar = $('#calendar').fullCalendar({
select: function (startDate, endDate) {
if (liveDate > startDate) {
alert('Selected date has been passed');
return false;
} else {
//do your wish
}
calendar.fullCalendar('unselect');
}
});
Had the same problem but my user was interfacing directly with the calendar and multiple events were being generated. ie. not through a form with a button and therefore nothing to "unbind" as many of the previous solutions.
To only allow one selection and to clear previous submissions I changed the select function as follows:
select: function(start, end) {
var title = "Desired Booking";
var eventData;
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); },
select: function(start, end) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('rerenderEvents')
var title = "Desired Booking";
var eventData;
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); },
This did the trick for me.
I had problems with unselectAuto also. Sometimes it would unselect when I didn't want it to, and sometimes it would NOT unselect when I DID want it to. My solution was to manually trigger the unselect method.
Here's how to unselect all currently selected:
$('#yourCalendar').fullCalendar('unselect');
You can put this line of code inside custom jQuery events that you bind outside of the plugin. You can also include it in fullCalendar callbacks, etc...
Hope this helps.
Scott
Here is an exemple of Version 5 doing the unselect
You could do it by :
const calendarApi = selectInfo.view.calendar;
calendarApi.unselect(); // clear date selection
Use this code
$('#trainings_modal').on('hidden', function () {
$('#trainings_modal *').unbind(); // Unbind all events
});
Unbind on hide form with any method (i.e esc press, or out key)