Reputation: 5335
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>
Upvotes: 0
Views: 221
Reputation: 12872
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,
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')
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 }}
Upvotes: 1