0

I'm working on aurelia+scheduler poc. I have found one standalone js library for displaying meeting events. The issue is integrating this js with aurelia. I'm using jspm for downloading project dependencies.

Has anybody tried to integrate a standalone js library with aurilia.

Below is the library that I'm trying to integrate.

http://javascript.daypilot.org/demo/scheduler/scalehours.html. 

<ai-dialog-body>      

<script>

    function sample(){

    var dp = new DayPilot.Scheduler("dp");

    dp.startDate = new DayPilot.Date("2016-06-28"); 

    dp.cellGroupBy = "Month";
    dp.days = 1;

    dp.cellDuration = 1440;

    dp.timeHeaders = [
        { groupBy: "Day" },
        { groupBy: "Cell" }
    ];
    dp.scale = "Hour";    
    dp.bubble = new DayPilot.Bubble();
    dp.treeEnabled = true;
    dp.rowHeaderWidth = 200;
    dp.resources = [{"id":"test@xyz.com","name":"Test"}];
    dp.events.list = [{"start":"2016-06-27T16:30:00","end":"2016-06-27T17:00:00","text":"Busy","resource":"test@xyz.com","id":2170}] 
    dp.cellWidth = 60;
    dp.init();
}
</script> 
<div id="dp"></div>       
<button onclick="sample()">Ok</button>
</ai-dialog-body>

when reference 3rd party library class getting below message.

ReferenceError: sample is not defined

Suri Babu
  • 85
  • 2
  • 12
  • What have you tried so far? What errors are you receiving with your current attempt? – Des Horsley Jul 05 '16 at 05:14
  • Horsley, I need info on how to add ref. for above library in the config.js so that i can refer it in module. As this library not available in npm and github. I'm looking for info. if someone already faced this kind of situation. like "babel": "npm:babel-core@5.8.34", looking for daypilot. – Suri Babu Jul 05 '16 at 05:23
  • Your question is very broad, so its hard to help you, have you tried working through something [like this article](http://blog.nojaf.com/2015/07/08/using-toastr-with-aurelia/)? – Des Horsley Jul 05 '16 at 05:31
  • The problem is library is not available in github and npm. It's a direct download from their website. – Suri Babu Jul 05 '16 at 05:39
  • You should create that function inside webcomponent's view-model and then call it using "click.delegate="sample()" – Fabio Jul 05 '16 at 13:39
  • As @FabioLuz said, you shouldn't have inline script in your View template. Move the code to the VM and it should work as expected as long as you load DayPilot with a script tag in your `index.html`. – Ashley Grant Jul 05 '16 at 19:20
  • Thanks for the pointer, it worked when add it in VM. – Suri Babu Jul 28 '16 at 08:38

1 Answers1

0

Have you tried to download the source and then reference it in your html:

<body aurelia-app>
    <script src="jspm_packages/system.js" charset="utf-8"></script>

    <!-- Place a referece to the downloaded library here -->

    <script src="config.js" charset="utf-8"></script>
    <script type="text/javascript">
        System.import("aurelia-bootstrapper");
    </script>
</body>
Des Horsley
  • 1,858
  • 20
  • 43
  • Horsley, if i add the reference as mentioned above im getting reference error. I updated my post with code i'm trying. – Suri Babu Jul 05 '16 at 09:24