We Keep Coding

External function with fullcalendar data

I am using the following code to filter a fullcalendar inside eventRender(). But I would like to do the filtering from an external function but I cant access its data (info.event) . Is there a way a can import the data to then filter?
eventRender: function(info) {
var changeMatch = false;
var changeArr = [info.event.extendedProps.estado];
$('#calEstado option:selected').each(function(index, el){
if (changeArr.indexOf($(this).val()) >= 0){changeMatch = true;}
});
return (changeMatch);
}
The idea would be something like this..
$("#calendar_filter_form").submit(function() {
console.log("filter!");
//FILTER
var changeMatch = false;
var changeArr = [info.event.extendedProps.estado];
$('#calEstado option:selected').each(function(index, el){
if (changeArr.indexOf($(this).val()) >= 0){changeMatch = true;}
});
return (changeMatch);
});
in version 3 I would do:
var view = $('#calendar').fullCalendar('getView');
alert("The view's title is " + view.title);

this is fixed , as I set calendar to be global I moved the imported js files and now I can access it using
var view = calendar.view;
var eventSources = calendar.getEventSources();
calendar.refetchEvents();

Dynamic dropdowns filtering options with jquery

I am trying to filter one dropdown from the selection of another in a Rails 4 app with jquery. As of now, I have:
$(document).ready(function(){
$('#task_id').change(function (){
var subtasks = $('#subtask_id').html(); //works
var tasks = $(this).find(:selected).text(); //works
var options = $(subtasks).filter("optgroup[label ='#{task}']").html(); // returns undefined in console.log
if(options != '')
$('#subtask_id').html(options);
else
$('#subtask_id').empty();
});
});
The task list is a regular collection_select and the subtask list is a grouped_collection_select. Both which work as expected. The problem is that even with this code listed above I can't get the correct subtasks to display for the selected task.
NOTE: I also tried var tasks=$(this).find(:selected).val() that return the correct number but the options filtering still didn't work.

Try something like this instead (untested but should work).
$(function () {
var $parent = $('#task_id'),
$child = $('#subtask_id'),
$cloned = $child.clone().css('display', 'none');
function getParentOption() {
return $parent.find('option:selected');
}
function updateChildOptions($options) {
$child.empty();
$child.append($options);
}
$parent.change(function (e) {
var $option = getParentOption();
var label = $option.prop('value'); // could use $option.text() instead for your case
var $options = $cloned.find('optgroup[label="' + label + '"]');
updateChildOptions($options);
});
});

Why does my function not re-run with new parameter from new click?

I have four buttons that fill a shared target box in HTML. Each button sends a different argument ("type") to a common handler, which runs a common function, CalChoice, which fires an API with a customized URL (based on the type argument). This works correctly the first time, but any click on another button does not fire the function again with the new argument. I've run counters and alerts to prove my clicks are getting to the function, but after the first time, I can see the XHR callback in my console does not change. (I suppose I can't rule out the function is re-running with the old param, as content would not change, but I don't see the slightest burp.) In the code below, you'll find the click handler and func call at the very bottom below everything.
Why fail?
function CalChoice(type) {
if ( type == "getArt") {
$useURL = "my cal source here 1"
} else if ( type == "getNature") {
$useURL = "my cal source here 2"
} else if ( type == "getFitness") {
$useURL = "my cal source here 3"
} else if ( type == "getLectures") {
$useURL = "my cal source here 4"
}
$('.amu-calendar').fullCalendar({
googleCalendarApiKey: 'XXXXXX', //our API key
events: { googleCalendarId: $useURL
},
eventBackgroundColor: '#65378e',
defaultView: 'vertWeek',
header: {
left: "title",
center: "vertWeek month",
right: "prev next"
},
dayRender: function( date, cell ) {
// Get the current view
var view = $('.amu-calendar').fullCalendar('getView');
// Check if the view is the new vertWeek -
// in case you want to use different views you don't want to mess with all of them
if (view.name == 'vertWeek') {
// Hide the widget header - looks wierd otherwise
$('.fc-widget-header').hide();
$('.fc-day-header').hide();
// $('div#calendar.fc.fc-ltr.ui-widget').find('div.fc-toolbar').find('div.fc-center').html( "<a href='#switchView'>Change View</a>" );
// Remove the default day number with an empty space. Keeps the right height according to your font.
$('.fc-day-number').html('<div class="fc-vertweek-day"> </div>');
// Create a new date string to put in place
var this_date = date.format('ddd, MMM Do');
// Place the new date into the cell header.
cell.append('<div class="fc-vertweek-header"><div class="fc-vertweek-day">'+this_date+'</div></div>');
}
},
theme: true,
themeButtonIcons: true,
eventClick: function(gcalEvent, jsEvent, view) {
gcalEvent.preventDefault ? gcalEvent.preventDefault() : gcalEvent.returnValue = false; //IE8 does not recognize preventDefault so use returnvalue=false
var eid = gcalEvent.id;
var etitle = gcalEvent.title;
//var eurl = gcalEvent.url;
//var estart = $.fullCalendar.formatDate(gcalEvent.start, 'MMMM d'+', '+'h:mm tt ');
//var eend = $.fullCalendar.formatDate(gcalEvent.end, 'h:mm tt');
var elocation = gcalEvent.location;
var edescription = gcalEvent.description;
var eallday = gcalEvent.allDay;
$('div.title-d').html(etitle);
//$('div.datetime-d').html(estart + "-" +eend);
$('div.location-d').html(elocation);
$('div.description-d').html(edescription);
$('div.framer').css({'background' : 'rgb(234,191,73)'}); // and do the same for the detail framer
gcalEvent.preventDefault ? gcalEvent.preventDefault() : gcalEvent.returnValue = false; //IE8 does not recognize preventDefault so use returnvalue=false
return false;
}
});
}
//MY HANDLER
$(".accordionButton").click(function(event) { //amu-calendar
event.stopPropagation();//tried this, does not help
var type = $(this).attr('id');
console.log("The " + type + " button was clicked." ) //this always works but...
CalChoice(type);// a counter in this func does increment, yet it appears it is not running with the new type...no new result.
});

It isn't much a problem with the function call, because the argument is correct but the fullCalendar plugin is being stateful at some point and it will work with the previous calendar. You'll need to destroy the calendar first to create another one.
$('.amu-calendar').fullCalendar('destroy');
Another way would be to remove the eventsObject:
$('.amu-calendar').fullCalendar('removeEvents');
$('.amu-calendar').fullCalendar('addEventSource' , { googleCalendarId : 'newEventURL' });

to have a javascript code only added once when using partial view

i have a partial view that itself is inside a partial view. The content inside the inner most partial view can be rendered multiple times. i have a javascript code that is significant only for the innermost view. SO what happens is when the content is rendered more than once the javascript code is added twice and event are called twice. e.g
var isDccmAndReady = '#isDccmAndReady';
$(document).ready(function() {
$(function() {
$("input[name='ReportDate']").change(function() {
if (isDccmAndReady) {
var d = new Date();
var currentDate = (d.getMonth() + 1) + "/" + +d.getDate() + "/" + d.getFullYear();
var dateSelected = $(this).val();
if (new Date(dateSelected) > new Date(currentDate)) {
var answer = confirm("The contract has been already reported, are you sure you wish to continue?");
if (answer) {
return true;
} else {
$(this).val('#Model.OriginalReportDate.Value.ToShortDateString()');
return false;
}
}
}
return false;
});
});
Now if the textbox is embedded twice onchange event is called two times when something changes in one of the textbox. how to circumvent this issue?

I'm not sure about what you want, if you want a function to run only exactly once, you can use underscore "once" function:
var newfunction = _.once(yourfunction);
newfunction();
newfunction();
if your purpose is to prevent the event handler to add more than once in an element, you can first unbind the event and then bind it again like:
$("#someselector").unbind("change").change(function(){
})

Finally got it working. i added the following javascript in the partial view where the innermost partial is called so that javascript s registered in the dom once.i also added couple of data attributes in the text box whose value i needed in the javascript
$(document).ready(function () {
$(function () {
$("input[name='ReportDate']").change(function () {
if ($(this).attr('data-isDccmAndReady')) {
var d = new Date();
var currentDate = (d.getMonth() + 1) + "/" + +d.getDate() + "/" + d.getFullYear();
var dateSelected = $(this).val();
if (new Date(dateSelected) > new Date(currentDate)) {
var answer = confirm("The contract has been already reported, are you sure you wish to continue?");
if (answer) {
return true;
} else {
$(this).val($(this).attr('data-originalReportDateVal'));
return false;
}
}
}
return false;
});
});
});

Fullcalendar display the count of events per day

I using the FullCalendar and i would like display the count of events per day in all views for each days.
Example :
<div class="fc-day-number">1</div>
Change to :
<div class="fc-day-count">X</div>
<div class="fc-day-number">1</div>
Please find a screenshoot as example:
link
Thanks in advance

I hope this helps someone but don't know if it's the exact answer you're looking for.
To get the number of events that occur on a day you can use the following code:
$('#calendar').fullCalendar( 'clientEvents', function(eventObj){
if (eventObj.start.isSame('2014-11-21')) {
return true;
} else {
return false;
}
}).length;
As per fullcalendar documentation you can search for events with a filter function clientEvents.
The if statement in the function compares dates using moment.js which is included in fullcalendar 2.0

Sample in Month View EventsPerDay variable gives count
eventRender: function (event, element, view) {
$(element).each(function () { $(this).addClass('dateClass-' + event.start.getDate().toString()); $(this).attr('date-num', event.start.getDate().toString()); });
if (view.name == "month") {
// $('.shifts,.tasks,.shiftOut,.shiftIn').hide();
var CellDates = [];
var EventDates = [];
var EventCount = 0, i = 0;
$('.fc-view-month').find('.fc-day-number').each(function () {
CellDates[i] = $(this).text();
// alert( $(this).text());
i++;
});
for (j = 0; j < CellDates.length; j++) {
EventsPerDay = $(".fc-view-month>div>.dateClass-" + CellDates[j]).length;}}

I added a line to fullcalendar.js in the method named
function fetchEventSource(source, fetchID):
function fetchEventSource(source, fetchID) {
_fetchEventSource(source, function(events) {
if (fetchID == currentFetchID) {
if (events) {
if (options.eventDataTransform) {
events = $.map(events, options.eventDataTransform);
}
if (source.eventDataTransform) {
events = $.map(events, source.eventDataTransform);
}
// TODO: this technique is not ideal for static array event sources.
// For arrays, we'll want to process all events right in the beginning, then never again.
for (var i=0; i<events.length; i++) {
events[i].source = source;
normalizeEvent(events[i]);
}
cache = cache.concat(events);
}
pendingSourceCnt--;
if (!pendingSourceCnt) {
reportEvents(cache);
}
}
// add this next line here to dump the running count
$("#someElement").html("There are " + cache.length + " events scheduled for this view");
});
}
This has the net effect of leveraging what fullcalendar is already doing. You can then save yourself the extra network call on the database.