Add 3rd party java script for ember js

Question

Im beginner for the emebr-js im create the application for my university project, im add some 3rd party calendar for my application, i want to add some java script in this application where's to include this 3rd part script, im try to add this route > Profile.js but not working, how can i add this script for the profile.hbs

hbs page name Profile.hbs

this is my script

    <script type="text/javascript">



  var calendarPicker2 = $("#dsel2").calendarPicker({
    monthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    useWheel:true,
    //callbackDelay:500,
    years:0,
    months:0,
    days:3,
    showDayArrows:false,
    callback:function(cal) {

    }});

    </script>

Where calendarPicker is defined ?. Create component my-profile and include it in profile.hbs template like {{my-profile }}and include datePicker initialization code in didInsertElelement life cycle hook method. — Ember Freak
– Ember Freak, Commented Jul 13, 2017 at 6:53
Dont do that. thats not supported. You just run the below command, ember g component my-profile it will create .hbs and .js file for you — Ember Freak
– Ember Freak, Commented Jul 13, 2017 at 7:00
sir, this is my html part <div id="bookingdetails-calender"> <a href="calendarPicker.html#" onclick="calendarPicker2.changeDate(new Date())"></a> <div id="dsel2" style="width:390px;margin-left:-100px;"></div> </div> — core114
– core114, Commented Jul 13, 2017 at 7:04
that's ok. which third party are you using for calendarPicker — Ember Freak
– Ember Freak, Commented Jul 13, 2017 at 7:06

Ember Freak · Accepted Answer · 2017-07-13 07:42:34Z

I will encourage you to look for ember-addons from https://emberobserver.com/

So if just want to use w3widgets.com/responsive-calendar

For this code,

<script src="js/jquery.js"></script>
<script src="js/responsive-calendar.js"></script>
<link href="css/responsive-calendar.css" rel="stylesheet" media="screen">

How to setup ember to use plugin,

jquery.js is already bundled in Ember so no need for special handling.
Place responsive-calendar.js file in app-name/vendor/responsive-calendar.js and in app-name/ember-cli-build.js file iclude app.import('vendor/responsive-calendar.js')
Place responsive-calendar.css file in app-name/styles/responsive-calendar.css and open app.css and include the below line @import 'responsive-calendar.css';

Thats it now plugin is ready for use.

How to use it,

Create component called my-calendar by running the command ember g component my-calendar, it will create my-calendar.hbs and my-calendar.js file.

In my-calendar.hbs, place the required markup code,

<!-- Responsive calendar - START -->
<div class="responsive-calendar">
  <div class="controls">
      <a class="pull-left" data-go="prev"><div class="btn"><i class="icon-chevron-left"></i></div></a>
      <h4><span data-head-year></span> <span data-head-month></span></h4>
      <a class="pull-right" data-go="next"><div class="btn"><i class="icon-chevron-right"></i></div></a>
  </div><hr/>
  <div class="day-headers">
    <div class="day header">Mon</div>
    <div class="day header">Tue</div>
    <div class="day header">Wed</div>
    <div class="day header">Thu</div>
    <div class="day header">Fri</div>
    <div class="day header">Sat</div>
    <div class="day header">Sun</div>
  </div>
  <div class="days" data-group="days">
    <!-- the place where days will be generated -->
  </div>
</div>
<!-- Responsive calendar - END -->

and in my-calendar.js file,

import Ember from 'ember';
export default Ember.Component.extend({
    didInsertElement() {
        this.$('.responsive-calendar').responsiveCalendar();
    }
});

That's it. You can include my-calendar component in any template like {{my-calendar }}

Sir, Thank you for the valuable explain and your time for me

Collectives™ on Stack Overflow

Add 3rd party java script for ember js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related