We Keep Coding

FullCalendar not showing extraParams

I am having some problems retrieving these from my string
here is my script, taken from the website..
events: {
url: '/CalendarManager/Findall',
method: 'GET',
extraParams: {
custom_param1: 'customerName',
custom_param2: 'description'
},
failure: function () {
alert('there was an error while fetching events!');
},
eventRender: function (event, element) {
element.qtip({
content: event.custom_param1,
content: event.custom_param2
});
}
},
UPDATE: 12/24/2020
To answer questions below.. I am using 5.3.2 version. I can use this as well and it will bring back everything but the custom parameters.
events: '/CalendarManager/Findall',
I am using Json pulling from DB - Below is the code..
public ActionResult FindAll()
{
return Json(db.GetEvents.AsEnumerable().Select(e => new
{
id = e.CompanyId,
companyName = e.CompanyName,
title = e.Title,
description = e.Description,
allDay = e.AllDay,
start = e.StartDate.ToString("yyyy-MM-ddTHH:mm:ss"),
end = e.EndDate.ToString("yyyy-MM-ddTHH:mm:ss"),
color = e.Color
}).ToList(), JsonRequestBehavior.AllowGet);
}
I changed the version I was using and that is when the extras did not show up. So I added what I thought the documentation said to use.
Adding the extra Params after the url did not work..
UPDATE:
I read through the suggested. I guess I am still not understanding or maybe not getting "Where I am supposed to put the code".
I believe I need to use eventContent. I also did use the console.log(info.event.extendedProps.companyName); Which is great, it does show up in the console window, However i need it on the calendar not in the console window. FullCalendar's examples could be a little better!
Here is what I did but still does not show on the calendar.
eventDidMount: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
console.log(info.event.extendedProps.companyName);
},
eventSources: [{
url: '/CalendarManager/Findall',
failure: function () {
alert('there was an error while fetching events!');
},
}],
eventContent: function (arg) {
html: arg.event.extendedProps.companyName
}
I did add some stuff in there to produce just a bubble when hovered over with this info but it does not work either.
Thank You!
UPDATE: 12/27/2020 Working Code
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay,listWeek'
},
initialView: 'dayGridMonth',
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
themeSystem: 'bootstrap',
selectable: true,
selectMirror: true,
//Random default events
//events: '/CalendarManager/Findall',
eventDidMount: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
console.log(info.event.extendedProps.companyName);
},
events: {
url: '/CalendarManager/Findall',
failure: function () {
alert('there was an error while fetching events!');
},
},
eventContent: function (arg) {
return { html: arg.event.title + '<br>' + arg.event.extendedProps.companyName + '<br>' + arg.event.extendedProps.description };
}
});
calendar.render();
Thank you for all your help!

First, let me know what kind of version of fullcalendar you are using.
fullcalendar v5.5 doesn't provide eventRender.
And extraParams is not what you want to show. It is the query params which attach after the request url, like http://example.com/CalendarManager/Findall?custom_param1=customerName&....
If you want to use extend event props then you should parse them as extendProps.
And you should use Event Render Hooks rather than eventRender if you are using the latest version.
How to fix:
Anyway, you should use function, not an object.
You can use events (as a function)
function( fetchInfo, successCallback, failureCallback ) { }
You can also use events (as a json feed)
var calendar = new Calendar(calendarEl, {
events: '/myfeed.php'
});
If you are going to use object rather than function, then you can use eventSources
And if you want to handle the success response, then use eventSourceSuccess function
Here is an example (using fullcalendar v5.5):
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'listWeek',
loading: function(bool) {
if (bool) {
$("#dashboard-calendar-column .pre-loader").show();
} else {
$("#dashboard-calendar-column .pre-loader").hide();
}
},
// get all events from the source
eventSources: [{
url: '/CalendarManager/Findall',
method: 'GET',
failure: function() {
document.getElementById('script-warning').style.display = 'block'
}
}],
// convert the response to the fullcalendar events
eventSourceSuccess: function(content, xhr) {
var events = [];
content.events.value.map(event => {
events.push({
id: event.id,
allDay: event.isAllDay,
title: event.subject,
start:event.start.dateTime,
end: event.end.dateTime,
// The followings are what you want to add as extended
custom_param1: 'customerName',
custom_param2: 'description',
// Or you could add them to the extendedProps object
extendedProps: {
custom_param1: 'customerName',
custom_param2: 'description',
description: event.bodyPreview,
...
},
// You can check fullcalendar event parsing
...
})
})
return events;
},
eventDidMount: function (arg) {
// remove dot between the event titles
$(arg.el).find('.fc-list-event-graphic').remove();
// You can select the extended props like arg.event.custom_param1 or arg.event.extendProps.custom_param1
...
},
});
calendar.render();
})
Hope this would help you.

You can use extraParams using eventSources if you are using fullcalendar v5.
eventSources: [{
url: '/CalendarManager/Findall',
method: 'POST',
extraParams: {
custom_param1: 'customerName',
custom_param2: 'description'
}
...
}]
You should use POST rather use GET, then it will work.

Javascript identifier for widget in Odoo

If you have two widget in a view. And you do something with the first widget and you want to update (call display_field) the second widget. How to have the identifier for the second widget?
For example in the extend definition of a widget:
local.FieldNewWidget = instance.web.form.AbstractField.extend({
init: function(parent, options) {
},
events: {
'click .oe_new_input_button': 'open_new_specific_form',
},
start: function() {
},
display_field: function() {
},
render_value: function() {
},
open_new_specific_form: function(event) {
var self = this;
var new_action = {
type: 'ir.actions.act_window',
name: $(event.target).data('name'),
res_model: $(event.target).data('data-model'),
res_id: $(event.target).data('res-id'),
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
target: 'new',
context: {
},
flags: {'form': {'action_buttons': true}},
}
self.do_action(new_action, {
on_close: function() {
// I want to refresh (call display_field) the second widget here.
// What is the identifier for the second widget?
},
});
},
});

i think this will work but i don't know if it's the best solution. I think every widget knows witch view it's by using (this.view). why don't you use a special event to trigger it from one widget and listen for it in the other one.
For example Register an event listener on the widget to listen for property changing on the view:
//in first widget register the event listener:
this.view.on('property_name', this, this.your_method);
// in second widget trigger the event by setting the value
this.view.set('property_name', a_value);
i'm new to odoo javascript let me know if this works for you i think there is a better solution by using events triggering without changing properties at all.

Is there a nice way to use ui definition inside events in Backbone view

Consider following example:
ui: {
name: '#name'
},
events: {
'change #name' : function() { ... }
}
is there a way so I don't need to write #name selector in both places, since I could have changes in template in future?

After reading your question I got interested and here the result:
It's possible, you just need to move events to intialize like this
ui: {
name: '#name'
},
initialize: function() {
this.events = {};
this.events["change " + this.ui.name] = function() { ... };
}

AngularJS and Fullcalendar: eventClick works only first time

I'm using the Angular module based on fullcalendar: https://github.com/angular-ui/ui-calendar along with the dialog module from ng-bootstrap. I configured the calendar to show a dialog for editing an event on eventClick action. It works fine only once. After closing first dialog and clicking again on any event new dialog doesn't show. But when I click on any other link on page, all desired dialogs shows one by one like they're queued somewhere some way.
Here's snippet from my controller:
$scope.showEditVisitDialog = function (event) {
var editVisitDialogOpts = {
backdropClick: false,
templateUrl: 'views/addEditVisitDialog.html',
controller: 'AddEditVisitDialogController',
resolve: {
patientId: function () {
return event.patientId;
},
visitId: function () {
return event.id;
}
}
};
var editVisitDialog = $dialog.dialog(editVisitDialogOpts);
editVisitDialog.open().then(function (updatedVisit) {
//some action
});
};
$scope.calendar = {
height: 450,
editable: true,
header: {
left: 'month agendaWeek ',
center: 'title',
right: 'today prev,next'
},
eventClick: $scope.showEditVisitDialog
};
$scope.events = [];
$scope.eventSources = [$scope.events]
Events are fetched from REST later in the controller.
In html:
<div ui-calendar="calendar" config="calendar" ng-model="eventSources"/>
No errors in console, what am I doing wrong?
Code on plunker: http://plnkr.co/edit/89sQfsU85zN4uxauFI2Y?p=preview

As always, things are simpler and more obvious when there's a fiddle/plnkr available. You need to place your call to showEditVisitDialog inside the $apply function:
...
$scope.calendar = {
editable: true,
eventClick: function(){
$scope.$apply(function(){
$scope.showEditVisitDialog()
});
}
};
...
Working plnkr.

you need to declare you fnction before uiConfig for the calendar ;)

How to add row double click event listener when extending grid panel with Ext.define()?

I am extending GridPanel with Ext.define() (Ext v4).
I need to get the row data when a grid row is double clicked. At this point I cannot even get the event listener working:
Ext.define('Application.usersGrid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.usersgrid',
viewConfig: {
listeners: {
dblclick: function(dataview, index, item, e) {
alert('dblclick');
}
}
},
...
What is wrong here?
If anyone needs the answer- this is the right way:
Ext.define('Application.usersGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.usersgrid',
viewConfig: {
listeners: {
itemdblclick: function(dataview, record, item, index, e) {
alert('itemdblclick');
}
}
},
...
http://dev.sencha.com/new/ext-js/4-0/api/Ext.grid.GridView#event-itemdblclick

You don't need to put the listener in the viewconfig. Here is my working configuration:
listeners : {
itemdblclick: function(dv, record, item, index, e) {
alert('working');
}
},
Another thing is, you seems to have used Ext.grid.GridPanel in the extend property. But in documentation it's Ext.grid.Panel. But even with gridpanel, everything seems to work fine.
I would suggest to use the Ext JS 4 terms as it might cause to application breakage later in other 4.x versions.
Now, if you are using the new MVC architecture, you will want to move these actions to the controller rather than the view. You can refer to the MVC Architecture guide for details.

With the MVC approach in ExtJS 4 there's another smart way too to define such handlers. Some example code:
Ext.define('App.controller.Documents', {
extend: 'Ext.app.Controller',
stores: ['Documents'],
models: ['Document'],
views: [
'document.List',
'document.Edit',
'document.Preview'
],
init: function() {
this.control({
/*
* a cool way to select stuff in ExtJS 4
*/
'documentlist': {
itemdblclick: this.editDocument
},
/*
* simple access to components
*/
'documentedit button[action=save]': {
click: this.updateDocument
},
});
},
editDocument: function(grid, record) {
var view = Ext.widget('documentedit');
view.down('form').loadRecord(record);
},
updateDocument: function(button) {
var win = button.up('window'), // new selection API
form = win.down('form'), // in ExtJS 4
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
}
});

listeners: {
select: 'xxxx',
itemdblclick: function (dv, record, item, index, e) {
var myBtn = Ext.getCmp('btnEdit');
myBtn.onClick();
}
},