How to use bower installed widget in yii2

Question

Hi everyone this might be a stupid question but i am not sure how to proceed thats why i am asking the question here.

I wants to use bootstrap-calendar in my yii2 project. I installed all the necessary files using the command given on the project page with help of bower.

Dependency are listed automatically and all the jquery and css files are installed in vendor folder. So now how do i use that widget in yii2 view file?

Do i just use it like any other js and css files i use?

I mean using AppAsset or do i manually include the files required to use the plugin like below?

<script type="text/javascript" src="../../vendor/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../vendor/underscore-min.js"></script>
<script type="text/javascript" src="../../calendar.js"></script>

I am really confused with this.

It's not much, but do you read this: https://github.com/yiisoft/yii2-jui/blob/master/docs/guide/README.md ? — TomaszKane, Nov 25 '15 at 09:28
@TomaszKane thank you for that doc its helpful for me but it doesnt have calendar events ui so i cant use that here. — Mike Ross, Nov 25 '15 at 22:22

score 3 · Answer 1 · answered Nov 26 '15 at 10:08

You can't use bower assets directly.

As you've probably noticed, they are installed in the vendor folder which is outside your web root. Making a copy of certain files from vendor folder to the web-accessible web/assets folder is called asset publishing. It is implemented using yii's AssetBundle class. AssetBundle also handles asset registration, which is the process of creating script and style tags in your HTML document.

A typical example of asset publishing is the BootstrapAsset class:

class BootstrapAsset extends AssetBundle
{
    public $sourcePath = '@bower/bootstrap/dist';
    public $css = [
        'css/bootstrap.css',
    ];
}

This configuration instructs yii to publish contents of the dist directory to a temporary web-accessible location. Also, when this asset is registered in a view (BootstrapAsset::register($this)), a corresponding style tag to include bootstrap.css will be created.

This topic is extensively covered in the guide.

However, it's most likely that somebody has already taken all these steps and already created the corresponding asset bundle and possibly widget. In your particular case, consider these two date picker widgets:

How to use bower installed widget in yii2

1 Answers1