Fullcalendar triggering multiple sources - fullcalendar

I'm using fullcalendar v2 and the sources of the events are selectable from an ul-li menu. The initial call uses the link from the first li and I may navigate through all the months in the calendar. When I use the second link, fullcalendar retrieves the events from the previous link as well as the new link. On each new select, fullcalendar remember the event sources. How can I disable this? Here my code:
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource');
// refill calendar
fillEvents(urlEvents, branchName);
});
function fillEvents(urlEvents, branchName) {
// change title of potlet box
var newTitle = '<i class="fa fa-calendar"></i> Available schedules for: ' + branchName;
$('#calendarCaption').html(newTitle);
$('#calendarSchedules').fullCalendar({
year: <?= $yy ?>,
month: <?= --$mm ?>, // javascript month is 0 based
date: 1,
header: {
left: '',
center: 'title',
right: 'prev,next,today'
},
defaultView: 'month',
firstDay: 1, // monday
editable: false,
slotEventOverlap: false,
selectable: true,
selectHelper: true,
dayRender: function (view, element) {
$('.fc td.fc-sun').css('background', '#E7EFEF');
$('.fc td.fc-sat').css('background', '#E7EFEF');
},
eventClick: function (event) {
$('#dueTime').show();
$('#duedate').val(moment(event.start).format('YYYY-MM-DD'));
$('#duetime').val(moment(event.start).format('HH:mm:ss'));
$('#isPartitionable').val(event.partitionable); // user clicked on partitionable dispo or not
}
});
$('#calendarSchedules').fullCalendar('addEventSource', urlEvents);
}
// load first branch item
$('#chgBranch li a:first').trigger('click');

I think you should destroy your calendar also. Because you are initializing fullcalendar every tine on sources change from ul-li.
Try below one.
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarCaption').fullCalendar( 'destroy' );
// refill calendar
fillEvents(urlEvents, branchName);
});
This will work for sure. I tried locally and works fine.

I tried it with following method which also works fine, but #Chintan method is also fine:
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource', storedEventSource);
And I store the event source in a hidden field once the calendar rendered.

Related

jQuery Fullcalendar - per event change editable event to non-editable (or vice versa)

I've been playing with official Fullcalendar CodePen
and can't find a way to make event non-editable (or editable).
In demo, the global option is set: editable: true. If I try to change this setting per event with:
eventRender: function(event, element){
event.editable=false;
}
nothing changes. Events are still all editable (resizable, draggable,..) . I found this post jquery-fullcalendar-change-editable-properties-of-particular-event-on-a-calendar
where the suggestion is:
editable: false,
eventRender: function(event, element) {
if(event.userId === user.id) {
event.editable = true;
}
}
but this doesn't work. Changing event.editable under eventRender or eventAfterRender, does not take any effect.
Is it possible to change this setting dynamically (per event)?
You can use an eventDataTransform function to check if your event has the desired user Id and then change the editable property to true.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'https://fullcalendar.io/demo-events.json?overload-day',
eventDataTransform: function(event){
if(event.userId === user.id){
event.editable=true;
}
return event;
}
});
});
Edit: I think the eventRender function is meant to be used to modify the element. To modify the event you should use the eventDataTransform function

publish/subscribe problems when using Meteor to make a calendar app

I'm trying to use Meteor to build a calendar app, but having issues about initial loading of data from database.
At the very beginning, I just used the autopublish, which caused the problem because the subscription might not be ready yet. Then I looked at the questions here Can't put data from a Meteor collection into an array and here Meteor: How can I tell when the database is ready? and make some changes of my code to this:
Meteor.startup(function(){
Session.set("data_loaded", false);
});
Meteor.subscribe("allEvents", function() {
Session.set("data_loaded", true);
});
var myCalendar = null;
Template.Calendar.onRendered(function() {
if (Session.get("data_loaded")) {
myCalendar = $('#myCalendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
dayClick: function(date, jsEvent, view) {
CalEvents.insert({title:"New Event", start:date.format(), end:date.format()});
Session.set("lastMod", new Date());
},
eventClick: function(calEvent, jsEvent, view) {
},
events: function(start, end, timezone, callback) {
var events = [];
allEvents = CalEvents.find({},{reactive:false});
console.log(allEvents);
allEvents.forEach(function(evt){
console.log(evt);
events.push({
id:evt._id,
title:evt.title,
start:evt.start,
end:evt.end});
});
callback(events);
}
}).data().fullCalendar;
}
myCalendar.defaultView = 'agendaWeek';
});
Template.Calendar.lastMod = function() {
return Session.get("lastMod");
};
However, I'm still having the same problem, just at this time, instead of showing a blank calendar, it doesn't show calendar at all in most cases. I feel like I'm not setting Session correctly, especially for that if statement, but I'm not very sure how to do that.
And then, I found this post Displaying loader while meteor collection loads , and followed the step there to make a template-level subscriptions. However, I got another error.
var myCalendar = null;
Template.Calendar.onCreated(function(){
this.subscribe("allEvents");
});
Template.Calendar.onRendered(function() {
myCalendar = $('#myCalendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
dayClick: function(date, jsEvent, view) {
CalEvents.insert({title:"New Event", start:date.format(), end:date.format()});
Session.set("lastMod", new Date());
},
eventClick: function(calEvent, jsEvent, view) {
},
events: function(start, end, timezone, callback) {
var events = [];
allEvents = CalEvents.find({},{reactive:false});
console.log(allEvents);
allEvents.forEach(function(evt){
console.log(evt);
events.push({
id:evt._id,
title:evt.title,
start:evt.start,
end:evt.end});
});
callback(events);
}
}).data().fullCalendar;
myCalendar.defaultView = 'agendaWeek';
});
Template.Calendar.lastMod = function() {
return Session.get("lastMod");
};
template file:
<template name="Calendar">
{{#if Template.subscriptionReady}}
{{> editEvent}}
<br>
<br>
<input type="hidden" name="lastMod" value="{{lastMod}}" id="lastMod">
<div id="myCalendar">
</div>
{{else}}
Loading...
{{/if}}
</template>
When the application starts, it shows the "Loading..." characters, but then I got a TypeError: Cannot read property 'fullCalendar' of undefined from }).data().fullCalendar;
Anyone can help me to get this thing work? Thanks in advance.
Short answer: "meteor search" is your friend. Use the component that I linked in the comment.
Long answer: Getting UI elements to work that modify DOM or create entire DOM trees is tricky with meteor. The overall problem is that meteor doesn't have a single callback which gets called when the DOM is finalized. In fact, DOM is never finalized and could change at any point. Any custom nodes that a UI component created and were in the subtree will get destroyed and will have to be recreated. While it can be done, it is quite a bit of plumbing and isn't easily understood by the newly initiated to meteor.
Luckily however, most of the frequent used UI components already have a meteor smart package and using them is just a matter of doing a "meteor add". Even a bit more experienced ones out of us prefer to simply save time and if a package already have the plumbing of the component sorted out, would just use that instead of spending a few hours trying to get it to work from scratch.

How to display Events in Calendar page

Im working in symfony2.5 framework.
In my app, i have a calendar page implemented with full calendar.js jquery plugin. (http://fullcalendar.io/).
I have a event table with records of employees' events.
How to display these events in the calendar page.
my calendar page's js:
$( '.calendar' ).fullCalendar({
header: {
left: 'prev,next,today',
center: 'title,',
right: 'month,agendaWeek,agendaDay'
}
});
Can anyone help me? Thanks in Advance!
First you have to parse your events as fullCalendar event object, following event documentation
var myEvent = {id: 1, title: 'myTitle', start: moment(...)}
Then, you should add those events to an array, function, json...
var mySourceEvents = [myEvent, myOtherEvent];
Finally you could set that array in your fullcalendar config as a source.
$('#calendar').fullCalendar({
eventSources: [
mySourceEvents
]
});
Or... You could add your events directly as an array:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
});

FullCalendar skips back to current date rather than staying on current month

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());
}
},
});

How to select select without Javascript Title prompt?

select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
I can select a date(period) only if I enter a title.
How can I fix this so that I can enter an event without title?
Note: Fullcalendar from arshaw.com/fullcalendar/
I have this someone may find usefull for example y have a dialog with 2 inputs and a create button (html) i wanna input title and other info, took me a while to figure out uuuuf it wooooorks be thankfull for my genius hehe:)
select: function(start, end, allDay) {
$('#mydialog').dialog('open'); // open the dialog you must have a div defined with 2 or more inputs
$("#create").bind("click", { start: start, end: end,allDay: allDay }, function(event){ // when you click in a create button inside dialog you should send as parameters start,end,etc
$input1 = $("#input1").val();
$title = $("#input2").val();
if ($title) {
$mycalendar.fullCalendar('renderEvent',
{
id: $id, // CORREGIR obtener el ultimo id
title: $title,
start: start,
end: end,
allDay: allDay,
url: $url
},
true // make the event "stick"
);
}else{
$mycalendar.fullCalendar('unselect');
}
$('#mydialog').dialog('close');// close my dialog
});
},
You could go for a html popup and a callback method to store the value instead of javascript prompt, that gives you much more controll over layout and more.

Resources