Posted on

how to extend default javascript

I try to extend standard magento javascript configuration but I just get nothing.

I’m following this:
and this:

To do so in my theme I placed a requirejs-config.js like so:

var config = {
map: {
‘*’ : {
‘myScript1’ : ‘js/my_script_1’,
‘mage/calendar’ : ‘js/calendar’,
‘mage/tabs’ : ‘js/tabs’

my_script_1.js looks roughly like so:

define([‘jquery’,’mage/tabs’, ‘domReady!’], function ($) {
$.fn.myFunction = function () {
// some code …

I can then access that function in my product_page.phtml like so:

<script>// <![CDATA[
], function ($) {
// ]]>

This works well.
Now I want to do roughly the same in the other two files. But here I want to extend existing functionality.

Here is the js/calendar.js:

], function($){

$.widget(‘<vendor>.calendar’, $.mage.calendar, {
calendarConfig: {
showWeek: false

return $.<vendor>.calendar;

Here is the js/tabs.js:

], function($){

$.widget(‘<vendor>.tabs’, $.mage.calendar, {
* Instantiate collapsible
* @param element
* @param index
* @param active
* @param disabled
* @private
_instantiateCollapsible: function (element, index, active, disabled) {

_myFunction123: function (foo) {
return foo;

return $.<vendor>.tabs;

But both extensions (calendar and tabs) don’t work. The calendar still shows the weeks and that console.log() in tabs.js is never triggered.

What am I doing wrong here? How do I have to extend this?


So at least the calendar config can be changed like this.
Overwrite app/design/frontend/<vendor>/<theme>/Magento_Theme/templates/js/calendar.phtml
with the original files from Magento itself and change options there.
But this does not reflect the way described in the docs.

Leave a Reply

Your email address will not be published. Required fields are marked *